apps/CRA-Helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the timesheet grid more compact and fully visible

Browse Source 
Adjust table layout and styling in `timesheet-detail.tsx` to ensure all daily columns are visible without horizontal scrolling, by reducing column width and font sizes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 55837015-10e9-4be9-b857-7f5e6be73772
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0bd07880-9d2c-48df-86e1-9d0c827ee4a5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1cc377db-7ea0-49f2-97ce-c3e87e0228cc/55837015-10e9-4be9-b857-7f5e6be73772/NknTeZP
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
SylvainP1 2026-04-14 08:34:21 +00:00
parent da20453e90
commit 147ae0f4c7
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
artifacts/cra-app/src/pages/timesheet-detail.tsx
View File

@ -289,9 +289,8 @@ export default function TimesheetDetailPage() {
</div> </div>
<div className="bg-card rounded-xl border shadow-sm flex-1 min-h-0 flex flex-col overflow-hidden"> <div className="bg-card rounded-xl border shadow-sm flex-1 min-h-0 flex flex-col overflow-hidden">
{/* Actions bar */}
{isEditable && ( {isEditable && (
<div className="p-4 border-b flex justify-between items-center bg-muted/20 shrink-0"> <div className="px-3 py-2 border-b flex justify-between items-center bg-muted/20 shrink-0">
<Button variant="outline" size="sm" onClick={() => setIsAddingLine(true)} className="gap-2"> <Button variant="outline" size="sm" onClick={() => setIsAddingLine(true)} className="gap-2">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Ajouter un projet Ajouter un projet
@ -302,29 +301,35 @@ export default function TimesheetDetailPage() {
</div> </div>
)} )}
{/* The Grid */} <div className="flex-1 overflow-y-auto">
<div className="flex-1 overflow-auto relative"> <table className="w-full text-xs border-collapse table-fixed">
<table className="w-full text-sm text-left border-collapse min-w-max"> <colgroup>
<thead className="sticky top-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 text-muted-foreground shadow-sm"> <col className="w-[180px]" />
{daysArray.map(day => (
<col key={day.dateStr} />
))}
<col className="w-[48px]" />
</colgroup>
<thead className="sticky top-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 text-muted-foreground">
<tr> <tr>
<th className="sticky left-0 z-30 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 p-3 font-semibold border-b border-r min-w-[250px] shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]"> <th className="sticky left-0 z-30 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 px-2 py-1.5 font-semibold border-b border-r text-left">
Projet Projet
</th> </th>
{daysArray.map(day => ( {daysArray.map(day => (
<th <th
key={day.dateStr} key={day.dateStr}
className={cn( className={cn(
"p-2 font-medium text-center border-b border-r min-w-[40px]", "px-0 py-1 font-medium text-center border-b border-r",
day.isWeekendDay ? "bg-muted/50" : "" day.isWeekendDay ? "bg-muted/50" : ""
)} )}
> >
<div className="flex flex-col items-center"> <div className="flex flex-col items-center leading-tight">
<span className="text-[10px] uppercase opacity-70">{day.dayName}</span> <span className="text-[9px] uppercase opacity-60">{day.dayName.slice(0, 2)}</span>
<span>{day.dayNum}</span> <span className="text-[11px]">{day.dayNum}</span>
</div> </div>
</th> </th>
))} ))}
<th className="p-3 font-semibold border-b text-center sticky right-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]"> <th className="px-1 py-1.5 font-semibold border-b text-center sticky right-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50">
Total Total
</th> </th>
</tr> </tr>
@ -332,24 +337,24 @@ export default function TimesheetDetailPage() {
<tbody> <tbody>
{!timesheet.lines || timesheet.lines.length === 0 ? ( {!timesheet.lines || timesheet.lines.length === 0 ? (
<tr> <tr>
<td colSpan={days + 2} className="p-8 text-center text-muted-foreground"> <td colSpan={days + 2} className="p-8 text-center text-muted-foreground text-sm">
Aucun projet ajouté. Cliquez sur "Ajouter un projet" pour commencer. Aucun projet ajouté. Cliquez sur "Ajouter un projet" pour commencer.
</td> </td>
</tr> </tr>
) : ( ) : (
timesheet.lines.map(line => ( timesheet.lines.map(line => (
<tr key={line.id} className="border-b hover:bg-muted/20 transition-colors group"> <tr key={line.id} className="border-b hover:bg-muted/20 transition-colors group">
<td className="sticky left-0 z-10 bg-card p-3 border-r shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)] group-hover:bg-muted/20"> <td className="sticky left-0 z-10 bg-card px-2 py-1.5 border-r group-hover:bg-muted/20">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-1">
<div className="truncate pr-2"> <div className="truncate">
<div className="font-medium truncate" title={line.projectName}>{line.projectName}</div> <div className="font-medium truncate text-xs" title={line.projectName}>{line.projectName}</div>
<div className="text-xs text-muted-foreground">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div> <div className="text-[10px] text-muted-foreground truncate">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div>
</div> </div>
{isEditable && ( {isEditable && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0" className="h-5 w-5 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0"
onClick={() => handleDeleteLine(line.id)} onClick={() => handleDeleteLine(line.id)}
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
@ -370,38 +375,36 @@ export default function TimesheetDetailPage() {
"p-0 text-center border-r transition-colors select-none", "p-0 text-center border-r transition-colors select-none",
day.isWeekendDay ? "bg-muted/30" : "", day.isWeekendDay ? "bg-muted/30" : "",
isEditable ? "cursor-pointer hover:bg-primary/10" : "", isEditable ? "cursor-pointer hover:bg-primary/10" : "",
val > 0 ? "bg-primary/5 text-primary font-medium" : "" val > 0 ? "bg-primary/5 text-primary font-semibold" : ""
)} )}
> >
<div className="flex items-center justify-center h-12 w-full"> <div className="flex items-center justify-center h-9 w-full text-xs">
{val === 0 ? <span className="opacity-0 group-hover:opacity-20">-</span> : val} {val === 0 ? "" : val}
</div> </div>
</td> </td>
); );
})} })}
<td className="p-3 text-center font-medium bg-card sticky right-0 z-10 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.05)] group-hover:bg-muted/20"> <td className="px-1 py-1.5 text-center font-medium bg-card sticky right-0 z-10 group-hover:bg-muted/20">
{rowTotals[line.id] > 0 ? ( {rowTotals[line.id] > 0 ? (
<Badge variant="secondary" className="bg-primary/10 text-primary hover:bg-primary/20"> <span className="text-primary text-xs font-bold">{rowTotals[line.id]}h</span>
{rowTotals[line.id]}h
</Badge>
) : "-"} ) : "-"}
</td> </td>
</tr> </tr>
)) ))
)} )}
</tbody> </tbody>
<tfoot className="sticky bottom-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 font-medium shadow-[0_-2px_5px_-2px_rgba(0,0,0,0.1)]"> <tfoot className="sticky bottom-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 font-medium">
<tr> <tr>
<td className="sticky left-0 z-30 p-3 border-r text-right shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]"> <td className="sticky left-0 z-30 px-2 py-1.5 border-r border-t text-right text-xs bg-muted/80">
Total du jour Total du jour
</td> </td>
{daysArray.map(day => ( {daysArray.map(day => (
<td key={day.dateStr} className="p-2 text-center border-r"> <td key={day.dateStr} className="px-0 py-1.5 text-center border-r border-t text-xs">
{colTotals[day.dateStr] > 0 ? colTotals[day.dateStr] : ""} {colTotals[day.dateStr] > 0 ? colTotals[day.dateStr] : ""}
</td> </td>
))} ))}
<td className="p-3 text-center text-primary text-lg sticky right-0 z-20 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]"> <td className="px-1 py-1.5 text-center text-primary font-bold border-t sticky right-0 z-20 bg-muted/80">
{grandTotal}h {grandTotal}h
</td> </td>
</tr> </tr>