front

app/components/ui/DateRangePicker.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { format } from 'date-fns';
+
+interface DateRangePickerProps {
+  value: {
+    from: Date;
+    to: Date;
+  };
+  onChange: (range: { from: Date; to: Date }) => void;
+}
+
+export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
+  const [from, setFrom] = useState(format(value.from, 'yyyy-MM-dd'));
+  const [to, setTo] = useState(format(value.to, 'yyyy-MM-dd'));
+
+  useEffect(() => {
+    setFrom(format(value.from, 'yyyy-MM-dd'));
+    setTo(format(value.to, 'yyyy-MM-dd'));
+  }, [value]);
+
+  const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFrom = e.target.value;
+    setFrom(newFrom);
+    onChange({
+      from: new Date(newFrom),
+      to: value.to
+    });
+  };
+
+  const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTo = e.target.value;
+    setTo(newTo);
+    onChange({
+      from: value.from,
+      to: new Date(newTo)
+    });
+  };
+
+  return (
+    <div className="flex items-center space-x-4">
+      <div>
+        <label htmlFor="from" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
+          From
+        </label>
+        <input
+          type="date"
+          id="from"
+          value={from}
+          onChange={handleFromChange}
+          max={to}
+          className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
+      <div>
+        <label htmlFor="to" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
+          To
+        </label>
+        <input
+          type="date"
+          id="to"
+          value={to}
+          onChange={handleToChange}
+          min={from}
+          className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
+    </div>
+  );
+}