Dashboard filtering, automatic tracking, chart rebuild & settings modal #40

Merged
uz1mani merged 28 commits from staging into main 2026-03-07 00:21:04 +00:00
25 changed files with 1224 additions and 676 deletions
Showing only changes of commit b046978256 - Show all commits

View File

@@ -12,19 +12,16 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
if (filters.length === 0) return null
return (
<div className="flex flex-wrap items-center gap-2 mb-4">
<span className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
Filters
</span>
<>
{filters.map((f, i) => (
<button
key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
onClick={() => onRemove(i)}
className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-brand-orange/10 text-brand-orange border border-brand-orange/20 hover:bg-brand-orange/20 transition-colors cursor-pointer group"
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange text-white hover:bg-brand-orange/80 transition-colors cursor-pointer group"
title={`Remove filter: ${filterLabel(f)}`}
>
<span>{filterLabel(f)}</span>
<svg className="w-3 h-3 opacity-60 group-hover:opacity-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-3 h-3 opacity-70 group-hover:opacity-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@@ -32,11 +29,11 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
{filters.length > 1 && (
<button
onClick={onClear}
className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors cursor-pointer"
className="px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
>
Clear all
</button>
)}
</div>
</>
)
}