mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 10:55:24 +02:00
Refactor ExcelFilter popup UI for a more compact and data-dense experience
This commit is contained in:
Christian Vidal Wolf
+30
-30
@@ -127,42 +127,42 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute left-0 mt-2 w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
|
||||
<div className="bg-slate-950 px-4 py-3 border-b border-slate-800 flex justify-between items-center">
|
||||
<span className="text-xs font-black text-slate-300 uppercase tracking-widest">{title}</span>
|
||||
<div className="absolute left-0 mt-1 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
|
||||
<div className="bg-slate-950 px-3 py-2 border-b border-slate-800 flex justify-between items-center">
|
||||
<span className="text-[10px] font-black text-slate-300 uppercase tracking-widest">{title}</span>
|
||||
<button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-white">
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4 max-h-[80vh] overflow-y-auto custom-scrollbar">
|
||||
<div className="p-3 space-y-3 max-h-[80vh] overflow-y-auto custom-scrollbar">
|
||||
{/* Sort Section */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
|
||||
<div className="flex gap-2">
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
onClick={() => handleSort('asc')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg border text-[10px] font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
>
|
||||
<span className="text-lg">A↓Z</span> Ascendente
|
||||
<span className="text-sm">A↓Z</span> Asc
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort('desc')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg border text-[10px] font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
>
|
||||
<span className="text-lg">Z↓A</span> Descendente
|
||||
<span className="text-sm">Z↓A</span> Desc
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Condition Filter Section */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
|
||||
<div className="space-y-1.5">
|
||||
<select
|
||||
value={operator}
|
||||
onChange={(e) => setOperator(e.target.value as any)}
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1.5 text-[11px] text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<option key={op.value} value={op.value}>{op.label}</option>
|
||||
@@ -174,7 +174,7 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
value={textValue}
|
||||
onChange={(e) => setTextValue(e.target.value)}
|
||||
placeholder="Valor..."
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1.5 text-[11px] text-white focus:outline-none focus:border-indigo-500"
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
@@ -182,9 +182,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
</div>
|
||||
|
||||
{/* List Selection Section */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between items-center mb-0.5">
|
||||
<span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -192,15 +192,15 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
placeholder="Buscar en la lista..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 mb-2"
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-lg px-2 py-1 text-[11px] text-white focus:outline-none focus:border-indigo-500 mb-1.5"
|
||||
/>
|
||||
|
||||
<div className="bg-slate-950 border border-slate-800 rounded-lg p-1 max-h-48 overflow-y-auto custom-scrollbar">
|
||||
<div className="bg-slate-950 border border-slate-800 rounded-lg p-0.5 max-h-40 overflow-y-auto custom-scrollbar">
|
||||
<div
|
||||
onClick={handleToggleSelectAll}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs font-bold text-indigo-400"
|
||||
className="flex items-center gap-1.5 px-1.5 py-1 rounded hover:bg-white/5 cursor-pointer text-[11px] font-bold text-indigo-400"
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
<div className={`w-3 h-3 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
{tempSelectedValues.length === uniqueValues.length && <CheckMark />}
|
||||
</div>
|
||||
(Seleccionar todo)
|
||||
@@ -211,9 +211,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => handleToggleValue(val)}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs text-slate-300"
|
||||
className="flex items-center gap-1.5 px-1.5 py-1 rounded hover:bg-white/5 cursor-pointer text-[11px] text-slate-300"
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
<div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
{isSelected && <CheckMark />}
|
||||
</div>
|
||||
<span className="truncate">{val}</span>
|
||||
@@ -224,18 +224,18 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950 p-4 border-t border-slate-800 flex gap-2">
|
||||
<div className="bg-slate-950 p-3 border-t border-slate-800 flex gap-1.5">
|
||||
<button
|
||||
onClick={handleApply}
|
||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
Aplicar filtro
|
||||
Aplicar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
Borrar filtro
|
||||
Borrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user