Adding Date picker chips in Expense and

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -94,6 +94,14 @@ const ExpenseFilterPanel = forwardRef(
           reset({ ...methods.getValues(), [name]: defaultFilter[name] });
         }
       },
+      // --- START FIX: Add resetDateRange method ---
+      resetDateRange: () => {
+        setValue("startDate", null);
+        setValue("endDate", null);
+        // Trigger re-render/reset of the DateRangePicker component
+        setResetKey((prev) => prev + 1);
+      },
+      // --- END FIX ---
       getValues: methods.getValues, // optional, to read current filter state
     }));
 
@@ -176,8 +184,7 @@ const ExpenseFilterPanel = forwardRef(
                 <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
-                      isTransactionDate ? "active btn-primary text-white" : ""
                       }`}
                     onClick={() => setValue("isTransactionDate", true)}
                   >
@@ -185,8 +192,7 @@ const ExpenseFilterPanel = forwardRef(
                   </button>
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
-                      !isTransactionDate ? "active btn-primary text-white" : ""
                       }`}
                     onClick={() => setValue("isTransactionDate", false)}
                   >

src/components/Expenses/ExpenseList.jsx

@@ -167,8 +167,7 @@ const groupByField = (items, field) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-          e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
         <div
@@ -182,8 +181,7 @@ const groupByField = (items, field) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-              e.createdBy?.lastName ?? ""
               }`.trim() || "N/A"}
           </span>
         </div>
@@ -216,8 +214,7 @@ const groupByField = (items, field) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
-            getColorNameFromHex(e?.status?.color) || "secondary"
             }`}
         >
           {e.status?.name || "Unknown"}
@@ -343,23 +340,19 @@ const grouped = isNoGrouping
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell ml-2  ${
+                                  className={`d-table-cell ml-2  ${col.align ?? ""
-                                    col.align ?? ""
                                     } `}
                                 >
                                   <div
-                                    className={`d-flex px-2 ${
+                                    className={`d-flex px-2 ${col.key === "status"
-                                      col.key === "status"
                                         ? "justify-content-center"
                                         : ""
                                       }
-                                 ${
+                                 ${col.key === "amount"
-                                   col.key === "amount"
                                         ? "justify-content-end"
                                         : ""
                                       }
-                                 ${
+                                 ${col.key === "submitted"
-                                   col.key === "submitted"
                                         ? "justify-content-center"
                                         : ""
                                       }
@@ -445,7 +438,18 @@ const grouped = isNoGrouping
                   <tr>
                     <td colSpan={8} className="text-center border-0 ">
                       <div className="py-8">
-                        <p>No Expense Found</p>
+                        <p
+                          className="text-center"
+                          style={{
+                            height: "250px",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                          }}
+                        >
+                          No Expense found
+                        </p>
+
                       </div>
                     </td>
                   </tr>

src/components/PaymentRequest/PaymentRequestFilterChips.jsx

@@ -1,3 +1,4 @@
+import moment from "moment";
 import React, { useMemo } from "react";
 
 const PaymentRequestFilterChips = ({ filters, filterData, removeFilterChip, clearFilter }) => {
@@ -22,6 +23,21 @@ const PaymentRequestFilterChips = ({ filters, filterData, removeFilterChip, clea
         addGroup(filters.projectIds, data.projects, "Projects", "projectIds");
         addGroup(filters.statusIds, data.status, "Status", "statusIds");
 
+        if (filters.startDate || filters.endDate) {
+            const start = filters.startDate ? moment(filters.startDate).format("DD MMM YYYY") : "";
+            const end = filters.endDate ? moment(filters.endDate).format("DD MMM YYYY") : "";
+            chips.push({
+                key: "dateRange",
+                label: "Date",
+                items: [
+                    {
+                        id: "dateRange",
+                        name: start && end ? `${start} to ${end}` : start || end,
+                    },
+                ],
+            });
+        }
+
         return chips;
     }, [filters, filterData]);
 

src/components/PaymentRequest/PaymentRequestFilterPanel.jsx

@@ -76,9 +76,18 @@ const PaymentRequestFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilte
             if (value !== undefined) {
                 setValue(name, value);
             } else {
-                reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+                // NOTE: Using defaultPaymentRequestFilter for clear functionality
+                reset({ ...methods.getValues(), [name]: defaultPaymentRequestFilter[name] });
             }
         },
+        // --- START FIX: Add resetDateRange method ---
+        resetDateRange: () => {
+            setValue("startDate", null);
+            setValue("endDate", null);
+            // Trigger re-render/reset of the DateRangePicker component
+            setResetKey((prev) => prev + 1);
+        },
+        // --- END FIX ---
         getValues: methods.getValues, // optional, to read current filter state
     }));
 
@@ -94,7 +103,7 @@ const PaymentRequestFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilte
             startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
             endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
         });
-        handleGroupBy(selectedGroup.id);
+        // handleGroupBy(selectedGroup.id);
         // closePanel();
     };
 

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -355,8 +355,18 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
               ) : (
                 <tr>
                   <td colSpan={8} className="text-center border-0 ">
-                    <div className="py-8">
+                    <div >
-                      <p>No Request Found</p>
+                      <p
+                        className="text-center"
+                        style={{
+                          height: "250px",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                        }}
+                      >
+                        No data found
+                      </p>
                     </div>
                   </td>
                 </tr>

src/pages/Expense/ExpensePage.jsx

@@ -106,10 +106,13 @@ const ExpensePage = () => {
         updated[key] = updated[key].filter((v) => v !== id);
         filterPanelRef.current?.resetFieldValue(key, updated[key]);
       } else if (key === "dateRange") {
+        // --- START FIX: Use a dedicated function to reset the date range ---
         updated.startDate = null;
         updated.endDate = null;
-        filterPanelRef.current?.resetFieldValue("startDate", null);
+
-        filterPanelRef.current?.resetFieldValue("endDate", null);
+        // Call the new resetDateRange method on the ref
+        filterPanelRef.current?.resetDateRange();
+        // --- END FIX ---
       }
       return updated;
     });

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -71,6 +71,11 @@ const PaymentRequestPage = () => {
       if (Array.isArray(updated[key])) {
         updated[key] = updated[key].filter((v) => v !== id);
         setTimeout(() => updatedRef.current?.resetFieldValue(key, updated[key]), 0);
+      } else if (key === "dateRange") { // Handle date range reset
+        updated.startDate = null;
+        updated.endDate = null;
+        // Call the new resetDateRange method on the ref
+        updatedRef.current?.resetDateRange();
       } else {
         updated[key] = null;
         setTimeout(() => updatedRef.current?.resetFieldValue(key, null), 0);