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

style: clean header and refine Group By filter dropdown in Grid tab

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-26 16:06:39 +01:00
parent e213ef0d16
commit 83470042b4
2 changed files with 48 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+47 -26
View File
@@ -698,36 +698,57 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
<div className="relative z-30" ref={dimensionRef}>
<button
onClick={() => setShowDimensionMenu(!showDimensionMenu)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all border shadow-sm ${showDimensionMenu ? 'bg-slate-700 text-white border-indigo-500/50 ring-1 ring-indigo-500/30' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-all border shadow-sm ${showDimensionMenu ? 'bg-indigo-600 text-white border-indigo-500 shadow-indigo-500/20' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700 hover:border-slate-600'}`}
>
<span className="text-slate-300">Group By:</span>
<span className="text-white font-bold">{effectiveDimensions.length} Columns</span>
<svg className={`w-4 h-4 text-slate-400 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 4.5v15m6-15v15m-10.5-15h15a2.25 2.25 0 0 1 2.25 2.25v13.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75A2.25 2.25 0 0 1 4.5 4.5Z" />
</svg>
<span>Group By:</span>
<span className={showDimensionMenu ? 'text-indigo-100' : 'text-indigo-400'}>{effectiveDimensions.length} Columns</span>
<svg className={`w-3.5 h-3.5 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180 text-white' : 'text-slate-500'}`} fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
{showDimensionMenu && (
<div className="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl p-2 animate-fade-in z-50">
<div className="px-2 py-1.5 mb-1 border-b border-slate-800">
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Select Columns</span>
<div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-50 ring-1 ring-white/10">
<div className="flex justify-between items-center mb-3 px-1">
<span className="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em]">Select Columns</span>
<button
onClick={() => setSelectedDimensions([])}
className="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 uppercase underline decoration-indigo-500/30 underline-offset-4"
>
Clear All
</button>
</div>
<div className="space-y-1">
{DIMENSION_OPTIONS.map(dim => (
<label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.04] rounded-lg cursor-pointer group transition-all active:scale-[0.98]">
<div className="relative flex items-center">
<input
type="checkbox"
checked={selectedDimensions.includes(dim.value)}
onChange={() => {
if (selectedDimensions.includes(dim.value)) {
setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
} else {
setSelectedDimensions([...selectedDimensions, dim.value]);
}
}}
className="w-4.5 h-4.5 rounded-md border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0 transition-all border-2 cursor-pointer"
/>
</div>
<span className={`text-sm font-semibold transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
{dim.label}
</span>
{selectedDimensions.includes(dim.value) && (
<div className="ml-auto w-1 h-4 bg-indigo-500 rounded-full animate-pulse-slow"></div>
)}
</label>
))}
</div>
<div className="mt-3 pt-3 border-t border-slate-800 px-1">
<p className="text-[10px] text-slate-500 leading-relaxed italic">
The table will automatically refresh when you toggle these options.
</p>
</div>
{DIMENSION_OPTIONS.map(dim => (
<label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.03] rounded-lg cursor-pointer group transition-colors">
<input
type="checkbox"
checked={selectedDimensions.includes(dim.value)}
onChange={() => {
if (selectedDimensions.includes(dim.value)) {
setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
} else {
setSelectedDimensions([...selectedDimensions, dim.value]);
}
}}
className="w-4 h-4 rounded border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 transition-all"
/>
<span className={`text-sm font-medium transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
{dim.label}
</span>
</label>
))}
</div>
)}
</div>