Make the timesheet grid more compact and fully visible
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
parent
da20453e90
commit
147ae0f4c7
@ -289,9 +289,8 @@ export default function TimesheetDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-xl border shadow-sm flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
{/* Actions bar */}
|
||||
{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">
|
||||
<Plus className="h-4 w-4" />
|
||||
Ajouter un projet
|
||||
@ -302,29 +301,35 @@ export default function TimesheetDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The Grid */}
|
||||
<div className="flex-1 overflow-auto relative">
|
||||
<table className="w-full text-sm text-left border-collapse min-w-max">
|
||||
<thead className="sticky top-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 text-muted-foreground shadow-sm">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<table className="w-full text-xs border-collapse table-fixed">
|
||||
<colgroup>
|
||||
<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>
|
||||
<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
|
||||
</th>
|
||||
{daysArray.map(day => (
|
||||
<th
|
||||
key={day.dateStr}
|
||||
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" : ""
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[10px] uppercase opacity-70">{day.dayName}</span>
|
||||
<span>{day.dayNum}</span>
|
||||
<div className="flex flex-col items-center leading-tight">
|
||||
<span className="text-[9px] uppercase opacity-60">{day.dayName.slice(0, 2)}</span>
|
||||
<span className="text-[11px]">{day.dayNum}</span>
|
||||
</div>
|
||||
</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
|
||||
</th>
|
||||
</tr>
|
||||
@ -332,24 +337,24 @@ export default function TimesheetDetailPage() {
|
||||
<tbody>
|
||||
{!timesheet.lines || timesheet.lines.length === 0 ? (
|
||||
<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.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
timesheet.lines.map(line => (
|
||||
<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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="truncate pr-2">
|
||||
<div className="font-medium truncate" title={line.projectName}>{line.projectName}</div>
|
||||
<div className="text-xs text-muted-foreground">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div>
|
||||
<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 gap-1">
|
||||
<div className="truncate">
|
||||
<div className="font-medium truncate text-xs" title={line.projectName}>{line.projectName}</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div>
|
||||
</div>
|
||||
{isEditable && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
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)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
@ -370,38 +375,36 @@ export default function TimesheetDetailPage() {
|
||||
"p-0 text-center border-r transition-colors select-none",
|
||||
day.isWeekendDay ? "bg-muted/30" : "",
|
||||
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">
|
||||
{val === 0 ? <span className="opacity-0 group-hover:opacity-20">-</span> : val}
|
||||
<div className="flex items-center justify-center h-9 w-full text-xs">
|
||||
{val === 0 ? "" : val}
|
||||
</div>
|
||||
</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 ? (
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary hover:bg-primary/20">
|
||||
{rowTotals[line.id]}h
|
||||
</Badge>
|
||||
<span className="text-primary text-xs font-bold">{rowTotals[line.id]}h</span>
|
||||
) : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</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>
|
||||
<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
|
||||
</td>
|
||||
{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] : ""}
|
||||
</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
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user