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

refactor(timesheet): simplify filter bar controls

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-25 19:08:00 +03:30
parent 29eefdea27
commit d53a8a67d7
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/timesheet/TimesheetFilterBar.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { BriefcaseBusiness, CalendarRange, Check, ChevronDown, FolderKanban, Search, SlidersHorizontal, Tag as TagIcon, X } from "lucide-react";
import { BriefcaseBusiness, CalendarRange, Check, FolderKanban, Search, SlidersHorizontal, Tag as TagIcon, X } from "lucide-react";
import type { Project } from "../../api/projects";
import type { Tag } from "../../api/tags";
@@ -290,14 +290,13 @@ export default function TimesheetFilterBar({
}}
disabled={!hasActiveFilters}
aria-label={labels?.clear || "Clear"}
className={`inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm transition sm:w-auto sm:gap-2 sm:px-3 ${
className={`inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm transition ${
hasActiveFilters
? "border-red-200 bg-red-50 text-red-700 hover:border-red-300 hover:bg-red-100 hover:text-red-800 dark:border-red-500/30 dark:bg-red-500/15 dark:text-red-300 dark:hover:border-red-400 dark:hover:bg-red-500/20 dark:hover:text-red-200"
: "border-slate-200 bg-white text-slate-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
}`}
>
<X className="h-4 w-4" />
<span className="hidden sm:inline">{labels?.clear || "Clear"}</span>
</button>
</div>
@@ -306,7 +305,7 @@ export default function TimesheetFilterBar({
{isExpanded && (
<div className="border-t border-slate-200 pt-2 dark:border-slate-800">
<div className="grid gap-2 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,0.9fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)]">
<MiniFilterBlock icon={<CalendarRange className="h-3.5 w-3.5" />} label={labels?.customFrom || "From"}>
<MiniFilterBlock icon={<CalendarRange className="h-3.5 w-3.5" />} label={labels?.customFrom || "From date"}>
<JalaliDatePicker
value={draftFilters.startedAfter}
onChange={(value) => setDraftFilters((current) => ({ ...current, startedAfter: value }))}