christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ExcelFilter popup UI for a more compact and data-dense experience

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-02-09 12:16:46 +01:00
parent ee608cd042
commit 96e9583fdb
1 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ExcelFilter.tsx
+30 -30
View File
@@ -127,42 +127,42 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
</button> </button>
{isOpen && ( {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="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-4 py-3 border-b border-slate-800 flex justify-between items-center"> <div className="bg-slate-950 px-3 py-2 border-b border-slate-800 flex justify-between items-center">
<span className="text-xs font-black text-slate-300 uppercase tracking-widest">{title}</span> <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"> <button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-white">
<CloseIcon /> <CloseIcon />
</button> </button>
</div> </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 */} {/* Sort Section */}
<div className="space-y-2"> <div className="space-y-1.5">
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span> <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
<div className="flex gap-2"> <div className="flex gap-1.5">
<button <button
onClick={() => handleSort('asc')} 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>
<button <button
onClick={() => handleSort('desc')} 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> </button>
</div> </div>
</div> </div>
{/* Condition Filter Section */} {/* Condition Filter Section */}
<div className="space-y-2"> <div className="space-y-1.5">
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtro</span> <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
<div className="space-y-2"> <div className="space-y-1.5">
<select <select
value={operator} value={operator}
onChange={(e) => setOperator(e.target.value as any)} 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 => ( {OPERATORS.map(op => (
<option key={op.value} value={op.value}>{op.label}</option> <option key={op.value} value={op.value}>{op.label}</option>
@@ -174,7 +174,7 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
value={textValue} value={textValue}
onChange={(e) => setTextValue(e.target.value)} onChange={(e) => setTextValue(e.target.value)}
placeholder="Valor..." 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 autoFocus
/> />
)} )}
@@ -182,9 +182,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
</div> </div>
{/* List Selection Section */} {/* List Selection Section */}
<div className="space-y-2"> <div className="space-y-1.5">
<div className="flex justify-between items-center mb-1"> <div className="flex justify-between items-center mb-0.5">
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span> <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
</div> </div>
<input <input
@@ -192,15 +192,15 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
placeholder="Buscar en la lista..." placeholder="Buscar en la lista..."
value={searchValue} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} 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 <div
onClick={handleToggleSelectAll} 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 />} {tempSelectedValues.length === uniqueValues.length && <CheckMark />}
</div> </div>
(Seleccionar todo) (Seleccionar todo)
@@ -211,9 +211,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
<div <div
key={val} key={val}
onClick={() => handleToggleValue(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 />} {isSelected && <CheckMark />}
</div> </div>
<span className="truncate">{val}</span> <span className="truncate">{val}</span>
@@ -224,18 +224,18 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
</div> </div>
</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 <button
onClick={handleApply} 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>
<button <button
onClick={handleClear} 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> </button>
</div> </div>
</div> </div>