Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(timesheet): use icon actions for the main timer

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-25 19:07:39 +03:30
parent 679d1cafb6
commit 29eefdea27
1 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/Timesheet.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { CalendarDays, Check, ChevronDown, Clock3, DollarSign, MoreVertical, Pencil, Play, Plus, Tag as TagIcon, Trash2 } from "lucide-react"; import { CalendarDays, Check, ChevronDown, Clock3, DollarSign, MoreVertical, Pencil, Play, Plus, Search, Square, Tag as TagIcon, Trash2 } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { getProjects, type Project } from "../api/projects"; import { getProjects, type Project } from "../api/projects";
@@ -658,10 +658,16 @@ function TagMultiSelect({
{selected && <Check className="h-4 w-4 shrink-0" />} {selected && <Check className="h-4 w-4 shrink-0" />}
</button> </button>
); );
})} })}
</div> {filteredTags.length === 0 && (
)} <div className="px-2 py-3 text-xs text-slate-500 dark:text-slate-400">
</div>, No tags found.
</div>
)}
</div>
</>
)}
</div>,
document.body document.body
) )
)} )}
@@ -2155,23 +2161,40 @@ export default function Timesheet() {
<div className="ms-2 flex shrink-0 items-center gap-2"> <div className="ms-2 flex shrink-0 items-center gap-2">
{runningEntry ? ( {runningEntry ? (
<> <>
<Button variant="destructive" onClick={() => void handleStop(runningEntry)} className="h-12 rounded-md px-5 text-xs font-semibold uppercase"> <Button
{t.timesheet?.stopTimer || "Stop"} variant="destructive"
</Button> size="icon"
<Button onClick={() => void handleStop(runningEntry)}
variant="secondary" className="h-12 w-12 rounded-md"
onClick={openDiscardTimerModal} title={t.timesheet?.stopTimer || "Stop"}
disabled={isDiscardingTimer} aria-label={t.timesheet?.stopTimer || "Stop"}
className="h-12 rounded-md px-5 text-xs font-semibold uppercase" >
> <Square className="h-4 w-4 fill-current" />
{isDiscardingTimer ? "..." : ((t.actions as { discard?: string } | undefined)?.discard || "Discard")} </Button>
</Button> <Button
</> variant="secondary"
) : ( size="icon"
<Button onClick={() => void handleStartTimer()} disabled={isStartingTimer} className="h-12 rounded-md px-5 text-xs font-semibold uppercase"> onClick={openDiscardTimerModal}
{isStartingTimer ? "..." : (t.timesheet?.startTimer || "Start")} disabled={isDiscardingTimer}
</Button> className="h-12 w-12 rounded-md"
)} title={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
aria-label={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
>
{isDiscardingTimer ? "..." : <Trash2 className="h-4 w-4" />}
</Button>
</>
) : (
<Button
onClick={() => void handleStartTimer()}
disabled={isStartingTimer}
size="icon"
className="h-12 w-12 rounded-md"
title={t.timesheet?.startTimer || "Start"}
aria-label={t.timesheet?.startTimer || "Start"}
>
{isStartingTimer ? "..." : <Play className="h-4 w-4 fill-current" />}
</Button>
)}
</div> </div>
</div> </div>