Refine project and todo workflow

frontend/src/views/TicketDetailPage.tsx

@@ -1,7 +1,8 @@
-import { ArrowLeft, ClipboardList, FolderKanban, Pencil, Save, Target, Trash2 } from "lucide-react";
+import { ArrowLeft, ClipboardList, FolderKanban, Pencil, Plus, Save, Target, Trash2 } from "lucide-react";
 import { FormEvent, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Alert } from "@/components/ui/alert";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,6 +14,7 @@ import { HelpLink } from "@/components/HelpLink";
 import { OrganizationSelect } from "@/components/OrganizationSelect";
 import { TodoPanel } from "@/components/TodoPanel";
 import {
+  createProject,
   createSession,
   deleteSession,
   getTicketDetails,
@@ -159,6 +161,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [savingTicket, setSavingTicket] = useState(false);
   const [editTicketNumber, setEditTicketNumber] = useState("");
+  const [editTicketTitle, setEditTicketTitle] = useState("");
   const [editOrganizationId, setEditOrganizationId] = useState("");
   const [editOrganizationName, setEditOrganizationName] = useState<string | null>(null);
   const [editWorkType, setEditWorkType] = useState<WorkType>("support");
@@ -178,6 +181,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
   const [globalMonthFilter, setGlobalMonthFilter] = useState(initialGlobalMonthFilter);
   const [globalStatusFilter, setGlobalStatusFilter] = useState<"all" | "open" | "billed" | "non_billable">("all");
   const [globalSourceFilter, setGlobalSourceFilter] = useState<"all" | "manual" | "recurring">("all");
+  const [creatingProject, setCreatingProject] = useState(false);
 
   async function load() {
     try {
@@ -220,6 +224,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
     }
 
     setEditTicketNumber(data.ticket.ticket_number);
+    setEditTicketTitle(data.ticket.title ?? "");
     setEditOrganizationId(data.ticket.organization_id ?? "");
     setEditOrganizationName(data.ticket.organization_name ?? null);
     setEditWorkType(data.ticket.work_type ?? "support");
@@ -286,6 +291,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
   const ticketDataDirty = Boolean(
     ticket &&
       (editTicketNumber !== ticket.ticket_number ||
+        editTicketTitle !== (ticket.title ?? "") ||
         editOrganizationId !== (ticket.organization_id ?? "") ||
         editWorkType !== (ticket.work_type ?? "support"))
   );
@@ -387,6 +393,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
     try {
       await updateTicket(ticket.id, {
         ticketNumber: editTicketNumber,
+        title: editTicketTitle || null,
         organizationId: editOrganizationId,
         workType: isProject ? "consulting" : editWorkType
       });
@@ -403,6 +410,44 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
     }
   }
 
+  async function createProjectFromTicket() {
+    if (!ticket) {
+      return;
+    }
+
+    if (!ticket.organization_id) {
+      toast.error("Organisation fehlt", {
+        description: "Speichere zuerst eine Organisation am Ticket, bevor daraus ein Projekt wird."
+      });
+      return;
+    }
+
+    setCreatingProject(true);
+    try {
+      await createProject({
+        ticketNumber: ticket.ticket_number,
+        title: ticket.title ?? null,
+        organizationId: ticket.organization_id,
+        teamspaceProject: ticket.title ?? "",
+        description: "",
+        goals: "",
+        startsOn: null,
+        endsOn: null,
+        hourBudgetMinutes: null
+      });
+      toast.success("Projekt angelegt", {
+        description: "Das Ticket ist jetzt als Consulting-Projekt markiert."
+      });
+      await load();
+    } catch (error) {
+      toast.error("Projekt konnte nicht angelegt werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setCreatingProject(false);
+    }
+  }
+
   async function submitTicketSession(event: FormEvent) {
     event.preventDefault();
 
@@ -563,16 +608,28 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
             Zur Auswertung
           </Button>
           <div className="flex flex-wrap items-center gap-2">
-            <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">{ticket?.ticket_number ?? "Ticket"}</h2>
+            <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">{ticket?.title || ticket?.ticket_number || "Ticket"}</h2>
             {ticket?.ticket_number ? <CopyTicketButton ticketNumber={ticket.ticket_number} /> : null}
+            {isProject ? <Badge variant="outline">Projekt</Badge> : null}
             {(periodType === "month" || (isGlobalTicket && globalMonthFilter !== "all")) && data?.closed ? <Badge variant="outline">Monat geschlossen</Badge> : null}
           </div>
-          <p className="text-sm text-muted-foreground">Sessions {sessionsScopeLabel}</p>
+          <p className="text-sm text-muted-foreground">
+            {ticket?.title ? `${ticket.ticket_number} · ` : ""}
+            Sessions {sessionsScopeLabel}
+          </p>
         </div>
 
-        <Badge variant={data?.openCount === 0 ? "success" : "warning"}>
-          {data?.openCount === 0 ? "Bewertet" : `${data?.openCount ?? 0} offen`}
-        </Badge>
+        <div className="flex flex-wrap items-center gap-2">
+          {!isProject && ticket ? (
+            <Button type="button" size="sm" variant="secondary" disabled={creatingProject} onClick={() => void createProjectFromTicket()}>
+              <Plus className="size-4" />
+              {creatingProject ? "Erstellt..." : "Als Projekt anlegen"}
+            </Button>
+          ) : null}
+          <Badge variant={data?.openCount === 0 ? "success" : "warning"}>
+            {data?.openCount === 0 ? "Bewertet" : `${data?.openCount ?? 0} offen`}
+          </Badge>
+        </div>
       </div>
 
       {(periodType === "month" || (isGlobalTicket && globalMonthFilter !== "all")) && data?.closed ? (
@@ -647,11 +704,15 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
           </div>
         </CardHeader>
         <CardContent className="px-4 pb-4">
-          <form className="grid gap-3 lg:grid-cols-[180px_minmax(220px,1fr)_180px_auto] lg:items-end" onSubmit={saveTicketData}>
+          <form className="grid gap-3 lg:grid-cols-[180px_minmax(220px,1fr)_minmax(220px,1fr)_160px_auto] lg:items-end" onSubmit={saveTicketData}>
             <div className="space-y-2">
               <label className="text-sm font-medium" htmlFor="edit-ticket-number">Ticketnummer</label>
               <Input id="edit-ticket-number" value={editTicketNumber} onChange={(event) => setEditTicketNumber(event.currentTarget.value)} required />
             </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="edit-ticket-title">Titel</label>
+              <Input id="edit-ticket-title" value={editTicketTitle} onChange={(event) => setEditTicketTitle(event.currentTarget.value)} placeholder="optional" />
+            </div>
             <div className="space-y-2">
               <label className="text-sm font-medium" htmlFor="edit-ticket-organization">Organisation</label>
               {ticket?.customer_name && !ticket.organization_id ? (
@@ -703,29 +764,26 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
               <HelpLink anchor="projekte" label="Hilfe zu Projekten" />
             </div>
           </CardHeader>
-          <CardContent className="grid gap-3 px-4 pb-4 lg:grid-cols-[1fr_1fr_220px]">
-            <div className="rounded-md border bg-muted/20 p-3">
-              <div className="mb-1 flex items-center gap-2 text-sm font-medium">
-                <FolderKanban className="size-4 text-muted-foreground" />
-                Beschreibung
-              </div>
-              <p className="whitespace-pre-wrap text-sm text-muted-foreground">{project.description || "Noch keine Beschreibung."}</p>
+          <CardContent className="space-y-3 px-4 pb-4">
+            <div className="flex flex-wrap gap-2 text-sm">
+              <Badge variant="secondary">Zeitraum {project.starts_on || "offen"} - {project.ends_on || "offen"}</Badge>
+              <Badge variant="secondary">Kontingent {project.hour_budget_minutes ? formatMinutes(project.hour_budget_minutes) : "offen"}</Badge>
+              {project.teamspace_project ? <Badge variant="outline">{project.teamspace_project}</Badge> : null}
             </div>
-            <div className="rounded-md border bg-muted/20 p-3">
-              <div className="mb-1 flex items-center gap-2 text-sm font-medium">
-                <Target className="size-4 text-muted-foreground" />
-                Ziele
+            <div className="grid gap-3 text-sm lg:grid-cols-2">
+              <div className="min-w-0">
+                <div className="mb-1 flex items-center gap-2 font-medium">
+                  <FolderKanban className="size-4 text-muted-foreground" />
+                  Beschreibung
+                </div>
+                <p className="line-clamp-3 whitespace-pre-wrap text-muted-foreground">{project.description || "Noch keine Beschreibung."}</p>
               </div>
-              <p className="whitespace-pre-wrap text-sm text-muted-foreground">{project.goals || "Noch keine Ziele."}</p>
-            </div>
-            <div className="space-y-2 rounded-md border bg-muted/20 p-3 text-sm">
-              <div>
-                <span className="block text-xs text-muted-foreground">Zeitraum</span>
-                <span className="font-medium">{project.starts_on || "offen"} - {project.ends_on || "offen"}</span>
-              </div>
-              <div>
-                <span className="block text-xs text-muted-foreground">Kontingent</span>
-                <span className="font-medium">{project.hour_budget_minutes ? formatMinutes(project.hour_budget_minutes) : "offen"}</span>
+              <div className="min-w-0">
+                <div className="mb-1 flex items-center gap-2 font-medium">
+                  <Target className="size-4 text-muted-foreground" />
+                  Ziele
+                </div>
+                <p className="line-clamp-3 whitespace-pre-wrap text-muted-foreground">{project.goals || "Noch keine Ziele."}</p>
               </div>
             </div>
           </CardContent>
@@ -769,102 +827,109 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
           </div>
         </CardHeader>
         <CardContent className="px-4 pb-4">
-          <div className="space-y-3">
+          <Accordion type="multiple" className="gap-2">
             {sessionGroups.map((group) => (
-              <div key={group.key} className="rounded-md border bg-background">
-                <div className="flex flex-col gap-2 border-b bg-muted/40 px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
-                  <p className="font-medium">{group.label}</p>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Badge variant="outline">Tag abgerechnet {formatMinutes(group.totalMinutes)}</Badge>
-                    {group.nonBillableMinutes > 0 ? <Badge variant="secondary">Nicht {formatMinutes(group.nonBillableMinutes)}</Badge> : null}
-                    {group.openMinutes > 0 ? <Badge variant="warning">Offen {formatMinutes(group.openMinutes)}</Badge> : null}
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                      <label htmlFor={`crm-billing-${group.key}`}>Teamspace</label>
-                      <Input
-                        id={`crm-billing-${group.key}`}
-                        type="text"
-                        className="h-7 w-24 bg-background text-right"
-                        autoComplete="off"
-                        inputMode="decimal"
-                        value={dayBillingInputs[group.key] ?? ""}
-                        disabled={isPeriodClosed || savingDayBillingKey === group.key}
-                        placeholder="0"
-                        onChange={(event) => {
-                          const nextValue = event.currentTarget.value;
-
-                          if (!isPartialHoursInput(nextValue)) {
-                            return;
-                          }
-
-                          setDayBillingInputs((current) => ({
-                            ...current,
-                            [group.key]: nextValue
-                          }));
-                        }}
-                        onKeyDown={(event) => {
-                          if (event.key === "Enter") {
-                            event.preventDefault();
-                          }
-                        }}
-                      />
-                      <span>h</span>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className={cn("h-7 w-[104px]", !isDayBillingDirty(group.key) && "invisible")}
-                        disabled={isPeriodClosed || !isDayBillingDirty(group.key) || savingDayBillingKey === group.key}
-                        onMouseDown={(event) => event.preventDefault()}
-                        onClick={() => void saveDayBilling(group.key)}
-                      >
-                        <Save className="size-3.5" />
-                        {savingDayBillingKey === group.key ? "Speichert..." : "Speichern"}
-                      </Button>
+              <AccordionItem key={group.key} value={group.key} className="rounded-md border bg-background px-3">
+                <AccordionTrigger className="gap-3 py-2 hover:no-underline">
+                  <div className="flex min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+                    <div className="min-w-0 text-left">
+                      <p className="truncate font-medium">{group.label}</p>
+                      <p className="text-xs text-muted-foreground">{group.sessions.length} Session(s)</p>
                     </div>
-                  </div>
-                </div>
-                <div className="space-y-1.5 p-2 sm:p-3">
-                  {group.sessions.map((session) => (
-                    <div key={session.id} className="ml-3 rounded-md border bg-card/40 p-2 sm:ml-6">
-                      <div className="grid gap-2 lg:grid-cols-[140px_minmax(0,1fr)_90px_auto_auto] lg:items-center">
-                        <div className="text-sm text-muted-foreground">
-                          {formatTimeRange(session.started_at, session.ended_at)}
-                        </div>
-                        <div className="min-w-0">
-                          <p className="whitespace-pre-wrap break-words text-sm font-medium">{session.activity}</p>
-                        </div>
-                        <div className="flex flex-wrap gap-1">
-                          <Badge variant="outline" className="w-fit">{formatMinutes(session.rounded_minutes)}</Badge>
-                          {session.recurring_billing_id ? <Badge variant="secondary">fix</Badge> : null}
-                        </div>
-                        <BillingButtons
-                          session={session}
-                          disabled={isPeriodClosed}
-                          loading={loadingId === session.id}
-                          onChange={(value) => setBilling(session.id, value)}
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Badge variant="outline">Abgerechnet {formatMinutes(group.totalMinutes)}</Badge>
+                      {group.nonBillableMinutes > 0 ? <Badge variant="secondary">Nicht {formatMinutes(group.nonBillableMinutes)}</Badge> : null}
+                      {group.openMinutes > 0 ? <Badge variant="warning">Offen {formatMinutes(group.openMinutes)}</Badge> : null}
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground" onClick={(event) => event.stopPropagation()}>
+                        <label htmlFor={`crm-billing-${group.key}`}>Teamspace</label>
+                        <Input
+                          id={`crm-billing-${group.key}`}
+                          type="text"
+                          className="h-7 w-24 bg-background text-right"
+                          autoComplete="off"
+                          inputMode="decimal"
+                          value={dayBillingInputs[group.key] ?? ""}
+                          disabled={isPeriodClosed || savingDayBillingKey === group.key}
+                          placeholder="0"
+                          onChange={(event) => {
+                            const nextValue = event.currentTarget.value;
+
+                            if (!isPartialHoursInput(nextValue)) {
+                              return;
+                            }
+
+                            setDayBillingInputs((current) => ({
+                              ...current,
+                              [group.key]: nextValue
+                            }));
+                          }}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter") {
+                              event.preventDefault();
+                            }
+                          }}
                         />
-                        <div className="flex gap-1 lg:justify-end">
-                          <Button size="icon" variant="ghost" className="size-8" onClick={() => openSessionEditor(session)}>
-                            <Pencil className="size-4" />
-                            <span className="sr-only">Session bearbeiten</span>
-                          </Button>
-                          <Button
-                            size="icon"
-                            variant="ghost"
-                            className="size-8 text-destructive hover:text-destructive"
-                            disabled={deletingId === session.id}
-                            onClick={() => removeSession(session)}
-                          >
-                            <Trash2 className="size-4" />
-                            <span className="sr-only">Session löschen</span>
-                          </Button>
-                        </div>
+                        <span>h</span>
+                        <Button
+                          type="button"
+                          size="sm"
+                          className={cn("h-7 w-[104px]", !isDayBillingDirty(group.key) && "invisible")}
+                          disabled={isPeriodClosed || !isDayBillingDirty(group.key) || savingDayBillingKey === group.key}
+                          onMouseDown={(event) => event.preventDefault()}
+                          onClick={() => void saveDayBilling(group.key)}
+                        >
+                          <Save className="size-3.5" />
+                          {savingDayBillingKey === group.key ? "Speichert..." : "Speichern"}
+                        </Button>
                       </div>
                     </div>
-                  ))}
-                </div>
-              </div>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pb-3">
+                  <div className="space-y-1.5">
+                    {group.sessions.map((session) => (
+                      <div key={session.id} className="ml-3 rounded-md border bg-card/40 p-2 sm:ml-6">
+                        <div className="grid gap-2 lg:grid-cols-[140px_minmax(0,1fr)_90px_auto_auto] lg:items-center">
+                          <div className="text-sm text-muted-foreground">
+                            {formatTimeRange(session.started_at, session.ended_at)}
+                          </div>
+                          <div className="min-w-0">
+                            <p className="whitespace-pre-wrap break-words text-sm font-medium">{session.activity}</p>
+                          </div>
+                          <div className="flex flex-wrap gap-1">
+                            <Badge variant="outline" className="w-fit">{formatMinutes(session.rounded_minutes)}</Badge>
+                            {session.recurring_billing_id ? <Badge variant="secondary">fix</Badge> : null}
+                          </div>
+                          <BillingButtons
+                            session={session}
+                            disabled={isPeriodClosed}
+                            loading={loadingId === session.id}
+                            onChange={(value) => setBilling(session.id, value)}
+                          />
+                          <div className="flex gap-1 lg:justify-end">
+                            <Button size="icon" variant="ghost" className="size-8" onClick={() => openSessionEditor(session)}>
+                              <Pencil className="size-4" />
+                              <span className="sr-only">Session bearbeiten</span>
+                            </Button>
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              className="size-8 text-destructive hover:text-destructive"
+                              disabled={deletingId === session.id}
+                              onClick={() => removeSession(session)}
+                            >
+                              <Trash2 className="size-4" />
+                              <span className="sr-only">Session löschen</span>
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
             ))}
-          </div>
+          </Accordion>
 
           {data?.sessions.length === 0 ? (
             <p className="py-8 text-center text-sm text-muted-foreground">Keine Sessions für dieses Ticket im gewählten Filter.</p>