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

Implement Custom Numeric Filtering (>10, 5-10) for Stock/WOC columns in Weekly Sales

Browse Source
This commit is contained in:
christian.vidal
2026-01-30 19:28:53 +01:00
parent c691d4e9ba
commit 2a199d397e
3 changed files with 89 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/InColumnStockFilter.tsx
+36 -2
View File
@@ -22,7 +22,9 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
icon
}) => {
const [isOpen, setIsOpen] = useState(false);
const [customInput, setCustomInput] = useState('');
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
// Close when clicking outside
useEffect(() => {
@@ -50,6 +52,15 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
setIsOpen(false);
};
const handleCustomAdd = () => {
if (customInput.trim()) {
if (!currentFilters.includes(customInput.trim())) {
onFilterChange([...currentFilters, customInput.trim()]);
}
setCustomInput('');
}
};
return (
<div className="relative inline-block ml-1" ref={containerRef}>
<button
@@ -72,13 +83,36 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
</button>
{isOpen && (
<div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
<div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-1 flex justify-between items-center">
<div className="absolute left-0 mt-2 w-56 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
<div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-2 flex justify-between items-center">
<span>{title}</span>
{currentFilters.length > 0 && (
<button onClick={clearFilters} className="text-indigo-400 hover:text-indigo-300">Clear</button>
)}
</div>
{/* Custom Input */}
<div className="px-2 mb-2 flex gap-1">
<input
ref={inputRef}
type="text"
className="bg-slate-950 border border-slate-700 text-xs text-white rounded px-2 py-1 w-full focus:border-indigo-500 focus:outline-none placeholder:text-slate-600"
placeholder="e.g. >10, 50-100"
value={customInput}
onChange={(e) => setCustomInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') handleCustomAdd();
e.stopPropagation(); // Prevent grid row clicks if any
}}
autoFocus
/>
<button
onClick={handleCustomAdd}
className="bg-indigo-600 hover:bg-indigo-500 text-white px-2 rounded text-xs font-bold"
>
+
</button>
</div>
{options.map(option => {
const isSelected = currentFilters.includes(option);
return (