Add date range filter with calendar picker for Launch Date and Ready to Order

2026-08-03 21:05:24 +02:00 · 2026-04-14 17:13:47 +02:00
parent 78df66be24
commit a1402316e0
2 changed files with 166 additions and 25 deletions
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { Calendar } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface DateFilterPopoverProps {
+  selectedRange: { start: string; end: string };
+  onRangeChange: (range: { start: string; end: string }) => void;
+  onClose: () => void;
+}
+
+export function DateFilterPopover({ selectedRange, onRangeChange, onClose }: DateFilterPopoverProps) {
+  const [startDate, setStartDate] = useState(selectedRange.start);
+  const [endDate, setEndDate] = useState(selectedRange.end);
+
+  const handleApply = () => {
+    onRangeChange({ start: startDate, end: endDate });
+    onClose();
+  };
+
+  const handleClear = () => {
+    setStartDate('');
+    setEndDate('');
+    onRangeChange({ start: '', end: '' });
+    onClose();
+  };
+
+  const hasValue = startDate || endDate;
+
+  return (
+    <div
+      className="absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-4 flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-100"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="flex items-center gap-2 text-xs font-medium text-slate-400 uppercase tracking-wider">
+        <Calendar className="w-4 h-4" />
+        Filter by Date Range
+      </div>
+
+      <div className="space-y-3">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[10px] text-slate-500 uppercase tracking-wider">From</label>
+          <input
+            type="date"
+            value={startDate}
+            onChange={e => setStartDate(e.target.value)}
+            className="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[10px] text-slate-500 uppercase tracking-wider">To</label>
+          <input
+            type="date"
+            value={endDate}
+            onChange={e => setEndDate(e.target.value)}
+            className="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between pt-3 border-t border-slate-700">
+        <button
+          onClick={handleClear}
+          className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
+        >
+          Clear
+        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-[10px] font-medium text-slate-300 hover:text-white hover:bg-slate-700 rounded transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleApply}
+            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg"
+          >
+            Apply
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}