blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify filter UI, add custom to-from date picker, and ensure all buttons use pointer cursors

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-07 15:18:32 -03:00
parent b048c963dd
commit df5f60e540
4 changed files with 68 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/DateRangePicker.tsx
View File

@@ -38,13 +38,41 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
};
const formatDateForInput = (date: Date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
const parseLocalDate = (value: string) => {
if (!value) return null;
const [year, month, day] = value.split('-');
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
};
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newStart = parseLocalDate(e.target.value);
if (newStart && !isNaN(newStart.getTime())) {
onChange({ ...dateRange, start: newStart });
}
};
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newEnd = parseLocalDate(e.target.value);
if (newEnd && !isNaN(newEnd.getTime())) {
newEnd.setHours(23, 59, 59, 999);
onChange({ ...dateRange, end: newEnd });
}
};
return (
<div className="flex flex-wrap items-center gap-3">
{/* Date Presets Dropdown */}
<div className="relative">
<button
onClick={() => setIsPresetOpen(!isPresetOpen)}
className="flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text"
className="flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
>
<Calendar size={16} className="text-dark-muted shrink-0" />
<span>{formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)}</span>
@@ -54,7 +82,31 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
{isPresetOpen && (
<>
<div className="fixed inset-0 z-10" onClick={() => setIsPresetOpen(false)}></div>
<div className="absolute right-0 mt-2 w-48 bg-dark-card border border-dark-border rounded-xl shadow-xl z-20 py-2 max-h-64 overflow-y-auto">
<div className="absolute right-0 mt-2 w-56 bg-dark-card border border-dark-border rounded-xl shadow-xl z-20 py-2 max-h-[32rem] overflow-y-auto">
<div className="px-4 pb-3 pt-1 border-b border-dark-border mb-2 flex flex-col gap-2">
<span className="text-xs font-bold text-dark-muted uppercase tracking-widest">Período Customizado</span>
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between gap-2">
<span className="text-xs font-medium text-dark-text w-6">De:</span>
<input
type="date"
value={formatDateForInput(dateRange.start)}
onChange={handleStartChange}
className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
/>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-xs font-medium text-dark-text w-6">Até:</span>
<input
type="date"
value={formatDateForInput(dateRange.end)}
onChange={handleEndChange}
className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
/>
</div>
</div>
</div>
<span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
{PRESETS.map((preset) => (
<button
key={preset.label}
@@ -62,7 +114,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
onChange(preset.getRange());
setIsPresetOpen(false);
}}
className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors"
className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors cursor-pointer"
>
{preset.label}
</button>
@@ -77,7 +129,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
<div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
<button
onClick={onManualRefresh}
className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border cursor-pointer"
title="Atualizar Agora"
>
<RefreshCw size={16} className="text-brand-primary" />

2
src/components/Layout.tsx
View File

@@ -117,7 +117,7 @@ const Layout = () => {
<div className="p-4 border-t border-dark-border">
<button
onClick={logout}
className={`w-full flex items-center text-red-500 hover:bg-red-500/10 px-4 py-3 rounded-xl transition-all ${isSidebarCollapsed ? 'justify-center' : 'space-x-3'}`}
className={`w-full flex items-center text-red-500 hover:bg-red-500/10 px-4 py-3 rounded-xl transition-all cursor-pointer ${isSidebarCollapsed ? 'justify-center' : 'space-x-3'}`}
>
<LogOut className="w-5 h-5 shrink-0" />
{!isSidebarCollapsed && <span className="font-medium">Sair</span>}