From 1df1e34c21ca5b2e57ef73bfded4894c456e79ab Mon Sep 17 00:00:00 2001
From: SylvainP1 <5533467-SylvainP1@users.noreply.replit.com>
Date: Tue, 14 Apr 2026 08:19:30 +0000
Subject: [PATCH] Add optional description field for time entries and improve
 button accessibility

Update API and frontend to include an optional description field for time entries and move the quick entry button to the sidebar for better visibility.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 55837015-10e9-4be9-b857-7f5e6be73772
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 734a5162-3dd4-4103-b626-ee12b22fd002
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1cc377db-7ea0-49f2-97ce-c3e87e0228cc/55837015-10e9-4be9-b857-7f5e6be73772/1SIrmNK
Replit-Helium-Checkpoint-Created: true
---
 artifacts/api-server/src/routes/quickEntry.ts |  6 ++--
 .../cra-app/src/components/layout/layout.tsx  |  6 +---
 .../cra-app/src/components/layout/sidebar.tsx |  7 ++++-
 .../cra-app/src/components/quick-entry.tsx    | 31 ++++++++++++++++---
 .../src/generated/api.schemas.ts              |  1 +
 lib/api-spec/openapi.yaml                     |  3 ++
 lib/api-zod/src/generated/api.ts              |  1 +
 .../src/generated/types/quickAddTimeBody.ts   |  1 +
 lib/db/src/schema/timeEntries.ts              |  3 +-
 9 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/artifacts/api-server/src/routes/quickEntry.ts b/artifacts/api-server/src/routes/quickEntry.ts
index 5e64a89..9257bde 100644
--- a/artifacts/api-server/src/routes/quickEntry.ts
+++ b/artifacts/api-server/src/routes/quickEntry.ts
@@ -15,7 +15,7 @@ router.post("/quick-entry", async (req, res): Promise<void> => {
     return;
   }
 
-  const { projectId, hours, collaborator } = parsed.data;
+  const { projectId, hours, collaborator, description } = parsed.data;
   const rawDate = parsed.data.date;
   const dateStr = rawDate instanceof Date
     ? rawDate.toISOString().split("T")[0]
@@ -87,14 +87,14 @@ router.post("/quick-entry", async (req, res): Promise<void> => {
     } else {
       [entry] = await db
         .update(timeEntriesTable)
-        .set({ hours })
+        .set({ hours, description: description ?? existing.description })
         .where(eq(timeEntriesTable.id, existing.id))
         .returning();
     }
   } else if (hours > 0) {
     [entry] = await db
       .insert(timeEntriesTable)
-      .values({ timesheetLineId: line.id, date: dateStr, hours })
+      .values({ timesheetLineId: line.id, date: dateStr, hours, description: description ?? null })
       .returning();
   } else {
     entry = { id: 0, timesheetLineId: line.id, date: dateStr, hours: 0 };
diff --git a/artifacts/cra-app/src/components/layout/layout.tsx b/artifacts/cra-app/src/components/layout/layout.tsx
index aa42483..31f2c2e 100644
--- a/artifacts/cra-app/src/components/layout/layout.tsx
+++ b/artifacts/cra-app/src/components/layout/layout.tsx
@@ -1,17 +1,13 @@
 import { AppSidebar } from "./sidebar";
-import { QuickEntryButton } from "@/components/quick-entry";
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-screen w-full bg-background overflow-hidden">
       <AppSidebar />
-      <main className="flex-1 flex flex-col min-w-0 overflow-y-auto relative">
+      <main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
         <div className="flex-1 p-8 container mx-auto max-w-7xl">
           {children}
         </div>
-        <div className="fixed bottom-6 right-6 z-50">
-          <QuickEntryButton />
-        </div>
       </main>
     </div>
   );
diff --git a/artifacts/cra-app/src/components/layout/sidebar.tsx b/artifacts/cra-app/src/components/layout/sidebar.tsx
index 21c4484..e4654fa 100644
--- a/artifacts/cra-app/src/components/layout/sidebar.tsx
+++ b/artifacts/cra-app/src/components/layout/sidebar.tsx
@@ -1,6 +1,7 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Clock, FolderKanban, Settings } from "lucide-react";
+import { LayoutDashboard, Clock, FolderKanban, Zap } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { QuickEntryButton } from "@/components/quick-entry";
 
 const navItems = [
   {
@@ -51,6 +52,10 @@ export function AppSidebar() {
             </Link>
           );
         })}
+
+        <div className="pt-3">
+          <QuickEntryButton />
+        </div>
       </nav>
 
       <div className="p-4 border-t border-sidebar-border">
diff --git a/artifacts/cra-app/src/components/quick-entry.tsx b/artifacts/cra-app/src/components/quick-entry.tsx
index 2be13f0..5b5d6e1 100644
--- a/artifacts/cra-app/src/components/quick-entry.tsx
+++ b/artifacts/cra-app/src/components/quick-entry.tsx
@@ -25,6 +25,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/hooks/use-toast";
 import { Zap, Clock, Check } from "lucide-react";
 import { format } from "date-fns";
@@ -38,14 +39,14 @@ export function QuickEntryButton() {
 
   return (
     <>
-      <Button
+      <button
         onClick={() => setOpen(true)}
-        className="gap-2 bg-primary shadow-lg hover:shadow-xl transition-all"
+        className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors cursor-pointer w-full bg-primary/10 text-primary hover:bg-primary/20"
         data-testid="button-quick-entry"
       >
         <Zap className="h-4 w-4" />
         Saisie rapide
-      </Button>
+      </button>
       <QuickEntryDialog open={open} onOpenChange={setOpen} />
     </>
   );
@@ -61,6 +62,7 @@ function QuickEntryDialog({
   const [projectId, setProjectId] = useState<string>("");
   const [date, setDate] = useState(format(new Date(), "yyyy-MM-dd"));
   const [hours, setHours] = useState<number>(1);
+  const [description, setDescription] = useState("");
   const [success, setSuccess] = useState(false);
   const [lastEntry, setLastEntry] = useState<{
     projectName: string;
@@ -92,6 +94,7 @@ function QuickEntryDialog({
           date,
           hours,
           collaborator: COLLABORATOR,
+          description: description.trim() || undefined,
         },
       },
       {
@@ -133,6 +136,7 @@ function QuickEntryDialog({
     setSuccess(false);
     setProjectId("");
     setHours(1);
+    setDescription("");
     setDate(format(new Date(), "yyyy-MM-dd"));
     onOpenChange(false);
   };
@@ -141,6 +145,7 @@ function QuickEntryDialog({
     setSuccess(false);
     setProjectId("");
     setHours(1);
+    setDescription("");
   };
 
   const activeProjects = projects?.filter((p) => p.isActive) ?? [];
@@ -258,9 +263,22 @@ function QuickEntryDialog({
                 </div>
               </div>
 
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Description <span className="text-muted-foreground font-normal">(optionnel)</span>
+                </label>
+                <Textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="Ex: Développement de la page d'accueil, réunion client..."
+                  className="resize-none h-20"
+                  data-testid="input-quick-description"
+                />
+              </div>
+
               {selectedProject && (
                 <div className="bg-muted/50 rounded-lg p-3 text-sm">
-                  <p className="text-muted-foreground">Récapitulatif:</p>
+                  <p className="text-muted-foreground">Récapitulatif :</p>
                   <p className="font-medium mt-1">
                     {hours}h sur{" "}
                     <Badge variant="secondary" className="font-mono text-xs">
@@ -271,6 +289,11 @@ function QuickEntryDialog({
                   <p className="text-muted-foreground capitalize">
                     {formattedDate}
                   </p>
+                  {description.trim() && (
+                    <p className="text-muted-foreground mt-1 italic">
+                      « {description.trim()} »
+                    </p>
+                  )}
                 </div>
               )}
             </div>
diff --git a/lib/api-client-react/src/generated/api.schemas.ts b/lib/api-client-react/src/generated/api.schemas.ts
index 4fc809c..61e6d43 100644
--- a/lib/api-client-react/src/generated/api.schemas.ts
+++ b/lib/api-client-react/src/generated/api.schemas.ts
@@ -181,6 +181,7 @@ export interface QuickAddTimeBody {
   date: string;
   hours: number;
   collaborator: string;
+  description?: string | null;
 }
 
 export interface QuickAddTimeResponse {
diff --git a/lib/api-spec/openapi.yaml b/lib/api-spec/openapi.yaml
index b833045..50552dd 100644
--- a/lib/api-spec/openapi.yaml
+++ b/lib/api-spec/openapi.yaml
@@ -727,6 +727,9 @@ components:
           type: number
         collaborator:
           type: string
+        description:
+          type: string
+          nullable: true
       required:
         - projectId
         - date
diff --git a/lib/api-zod/src/generated/api.ts b/lib/api-zod/src/generated/api.ts
index 538b501..130721a 100644
--- a/lib/api-zod/src/generated/api.ts
+++ b/lib/api-zod/src/generated/api.ts
@@ -265,6 +265,7 @@ export const QuickAddTimeBody = zod.object({
   date: zod.coerce.date(),
   hours: zod.number(),
   collaborator: zod.string(),
+  description: zod.string().nullish(),
 });
 
 export const QuickAddTimeResponse = zod.object({
diff --git a/lib/api-zod/src/generated/types/quickAddTimeBody.ts b/lib/api-zod/src/generated/types/quickAddTimeBody.ts
index fa7655d..7367f7c 100644
--- a/lib/api-zod/src/generated/types/quickAddTimeBody.ts
+++ b/lib/api-zod/src/generated/types/quickAddTimeBody.ts
@@ -11,4 +11,5 @@ export interface QuickAddTimeBody {
   date: Date;
   hours: number;
   collaborator: string;
+  description?: string | null;
 }
diff --git a/lib/db/src/schema/timeEntries.ts b/lib/db/src/schema/timeEntries.ts
index eeb31ae..8c88eec 100644
--- a/lib/db/src/schema/timeEntries.ts
+++ b/lib/db/src/schema/timeEntries.ts
@@ -1,4 +1,4 @@
-import { pgTable, serial, integer, real, date } from "drizzle-orm/pg-core";
+import { pgTable, serial, integer, real, date, text } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import { z } from "zod/v4";
 import { timesheetLinesTable } from "./timesheetLines";
@@ -8,6 +8,7 @@ export const timeEntriesTable = pgTable("time_entries", {
   timesheetLineId: integer("timesheet_line_id").notNull().references(() => timesheetLinesTable.id, { onDelete: "cascade" }),
   date: date("date").notNull(),
   hours: real("hours").notNull().default(0),
+  description: text("description"),
 });
 
 export const insertTimeEntrySchema = createInsertSchema(timeEntriesTable).omit({ id: true });