made sepearte dataPickers

src/components/common/DatePicker.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from "react";
+
+const DatePicker = ({ onDateChange }) => {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const fp = flatpickr(inputRef.current, {
+      dateFormat: "Y-m-d",
+      defaultDate: new Date(),
+      onChange: (selectedDates, dateStr) => {
+        console.log("Selected date:", dateStr);
+        if (onDateChange) {
+          onDateChange(dateStr); // Pass selected date to parent
+        }
+      }
+    });
+
+    return () => {
+      // Cleanup flatpickr instance
+      fp.destroy();
+    };
+  }, [onDateChange]);
+
+  return (
+    <div className="container mt-3">
+      <div className="mb-3">
+        <label htmlFor="flatpickr-single" className="form-label">
+          Select Date
+        </label>
+        <input
+          type="text"
+          id="flatpickr-single"
+          className="form-control"
+          placeholder="YYYY-MM-DD"
+          ref={inputRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;

src/components/common/DateRangePicker.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+
+const DateRangePicker = ({ onRangeChange }) => {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const fp = flatpickr(inputRef.current, {
+        mode: "range",
+        dateFormat: "Y-m-d",
+        static: true, 
+        clickOpens: true, 
+        onChange: (selectedDates, dateStr) => {
+            const [startDate, endDate] = dateStr.split(" to ");
+            onRangeChange?.({ startDate, endDate });
+          }
+      });
+
+    return () => {
+      // Cleanup Flatpickr instance
+      fp.destroy();
+    };
+  }, [onRangeChange]);
+
+  return (
+    <input
+      type="text"
+      className="form-control form-control-sm ms-1"
+      placeholder="From to End"
+      id="flatpickr-range"
+      ref={inputRef}
+    />
+  );
+};
+
+export default DateRangePicker;