here Change Date picker to Range Picker

src/Pages/Reports/TipAmountSettlement/TipAmountSettlementList.jsx

@@ -27,6 +27,7 @@ import { WaiterNames } from '../../../Features/Reports/Reports';
 import { Messages } from '../../../Components/Notifications/Messages';
 import FormHeader from '../../PageComponents/FormHeader';
 import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage';
+const { RangePicker } = DatePicker;
 
 const subDirectory = import.meta.env.BASE_URL;
 const { Option } = Select;
@@ -229,11 +230,9 @@ const TipAmountSettlementList = () => {
   };
 
   useEffect(() => {
-    // Set today's date for fromDate and toDate in the form
     const today = dayjs();
     form.setFieldsValue({
-      fromDate: today,
-      toDate: today,
+      dateRange: [today, today],
     });
     dispatch(changeBreadCrumb({ items: items }));
     fetchData();
@@ -287,9 +286,9 @@ const TipAmountSettlementList = () => {
     if (values.Employee && values.Employee !== 'all') {
       filtered = filtered.filter((item) => item.Employee === values.Employee);
     }
-    if (values.fromDate && values.toDate) {
-      const from = dayjs(values.fromDate).startOf('day');
-      const to = dayjs(values.toDate).endOf('day');
+    if (values.dateRange && values.dateRange.length === 2) {
+      const from = dayjs(values.dateRange[0]).startOf('day');
+      const to = dayjs(values.dateRange[1]).endOf('day');
       filtered = filtered.filter((item) => {
         const itemDate = dayjs(item.Date, 'DD/MM/YYYY');
         return itemDate.isSameOrAfter(from) && itemDate.isSameOrBefore(to);
@@ -307,7 +306,14 @@ const TipAmountSettlementList = () => {
   };
 
   const onFinish = async (values) => {
-    const { Employee, fromDate, toDate, ...restValues } = values;
+    const { Employee, dateRange, ...restValues } = values;
+    let fromDate = null;
+    let toDate = null;
+    if (dateRange && dateRange.length === 2) {
+      fromDate = dateRange[0];
+      toDate = dateRange[1];
+    }
+
     const data = {
       CompId,
       BranchId,
@@ -320,18 +326,19 @@ const TipAmountSettlementList = () => {
         : {}),
     };
     let response;
-    Employee !== 'all'
-      ? (response = await dispatch(getTipAmountSettlementList(data)).unwrap())
-      : (response = await dispatch(
-          getAllTipAmountSettlementList(data)
-        ).unwrap());
+    if (Employee !== 'all') {
+      response = await dispatch(getTipAmountSettlementList(data)).unwrap();
+    } else {
+      response = await dispatch(getAllTipAmountSettlementList(data)).unwrap();
+    }
+
     if (response?.data?.statusCode === 1) {
       setTableData(response?.data?.data?.[0]?.WaiterDetails);
       const StatusValue = form.getFieldValue('status') === 'toBe' ? 'N' : 'Y';
 
       const employees = response?.data?.data?.[0]?.WaiterDetails ?? [];
 
-      const data =
+      const hasData =
         employees?.some(
           (E) =>
             (StatusValue == 'N' &&
@@ -340,11 +347,10 @@ const TipAmountSettlementList = () => {
               E?.TipsDetails?.some((e) => e?.IsSettled == 'Y'))
         ) ?? false;
 
-      if (data) {
+      if (hasData) {
         setMessageType('success');
         setMessageData(response?.data?.response);
-      }
-      if (!data) {
+      } else {
         setMessageType('error');
         setMessageData('No data Found');
       }
@@ -490,36 +496,19 @@ const TipAmountSettlementList = () => {
                 </Select>
               </Form.Item>
             </Col>
-
               <Col>
                 <Form.Item
-                  name="fromDate"
-                  label="From Date"
+                  name="dateRange"
+                  label="Date Range"
                   style={{ marginBottom: '8px' }}
-                  rules={[{ message: 'Please select from date' }]}
+                  rules={[{ type: 'array', required: true, message: 'Please select date range' }]}
                 >
-                  <DatePicker
-                    format="DD/MM/YYYY"
-                    style={{ width: 140 }}
-                    disabledDate={(current) =>
-                      current && current > dayjs().endOf('day')
-                    }
-                  />
-                </Form.Item>
-              </Col>
-              <Col>
-                <Form.Item
-                  name="toDate"
-                  label="To Date"
-                  style={{ marginBottom: '8px' }}
-                  rules={[{ message: 'Please select to date' }]}
-                >
-                  <DatePicker
-                    format="DD/MM/YYYY"
-                    style={{ width: 140 }}
-                    disabledDate={(current) =>
-                      current && current > dayjs().endOf('day')
-                    }
+                  <RangePicker
+                    format="DD-MM-YYYY"
+                    allowClear
+                    disabledDate={(current) => current && current > dayjs()} 
+                    placeholder={["From Date", "To Date"]}
+                    style={{ width: 280 }}
                   />
                 </Form.Item>
               </Col>