Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management

2025-12-10 16:33:04 +05:30 · 2025-12-10 16:33:04 +05:30 · b62fc82a9c
commit b62fc82a9c
parent 4253ed71eb 01fc302011
19 changed files with 700 additions and 298 deletions
--- a/src/components/DailyProgressRport/TaskReportFilterChips.jsx
+++ b/src/components/DailyProgressRport/TaskReportFilterChips.jsx
@ -0,0 +1,95 @@
+import React, { useMemo } from "react";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const TaskReportFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData?.data || filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key) => {
+      if (!ids || ids.length === 0) return;
+
+      const items = ids.map((id) => ({
+        id,
+        name: list?.find((i) => i.id === id)?.name || id,
+      }));
+
+      chips.push({ key, label, items });
+    };
+
+    // Building
+    addGroup(filter?.buildingIds, data?.buildings, "Building", "buildingIds");
+
+    // Floor
+    addGroup(filter?.floorIds, data?.floors, "Floor", "floorIds");
+
+    // Activities
+    addGroup(filter?.activityIds, data?.activities, "Activity", "activityIds");
+
+    // Date Range Chips
+    if (filter?.dateFrom || filter?.dateTo) {
+      chips.push({
+        key: "date",
+        label: "Date Range",
+        items: [
+          {
+            id: "date-range",
+            name: `${filter?.dateFrom ? formatUTCToLocalTime(filter.dateFrom) : ""} 
+                   ${filter?.dateTo ? " to " + formatUTCToLocalTime(filter.dateTo) : ""}`,
+          },
+        ],
+      });
+    }
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2 mt-2">
+      {filterChips.map((chipGroup) => (
+        <div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
+          <span className="fw-semibold me-2">{chipGroup.label}:</span>
+
+          {chipGroup.items.map((item) => (
+            <span
+              key={item.id}
+              className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
+            >
+              <span>{item.name}</span>
+
+              {/* If date chip → remove whole date range */}
+              {chipGroup.key === "date" ? (
+                <button
+                  type="button"
+                  className="btn-close btn-close-white btn-sm ms-2"
+                  style={{
+                    filter: "invert(1) grayscale(1)",
+                    opacity: 0.7,
+                    fontSize: "0.6rem",
+                  }}
+                  onClick={() => clearFilter()}
+                />
+              ) : (
+                <button
+                  type="button"
+                  className="btn-close btn-close-white btn-sm ms-2"
+                  style={{
+                    filter: "invert(1) grayscale(1)",
+                    opacity: 0.7,
+                    fontSize: "0.6rem",
+                  }}
+                  onClick={() => removeFilterChip(chipGroup.key, item.id)}
+                />
+              )}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TaskReportFilterChips;
--- a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
+++ b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useCurrentService } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
@ -11,8 +11,9 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
 import { useTaskFilter } from "../../hooks/useTasks";
+import { set } from "date-fns";

-const TaskReportFilterPanel = ({ handleFilter }) => {
+const TaskReportFilterPanel = forwardRef(({ handleFilter, setFilterdata, clearFilter }, ref) => {
  const [resetKey, setResetKey] = useState(0);
  const selectedProject = useSelectedProject();
  const selectedService = useCurrentService();
@ -23,10 +24,42 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
    defaultValues: TaskReportDefaultValue,
  });

+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...TaskReportDefaultValue,
+      buildingIds: TaskReportDefaultValue.buildingIds || [],
+      floorIds: TaskReportDefaultValue.floorIds || [],
+      activityIds: TaskReportDefaultValue.activityIds || [],
+      dateFrom: TaskReportDefaultValue.dateFrom,
+      dateTo: TaskReportDefaultValue.dateTo,
+    };
+  }, [selectedProject]);
+
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        // Fix: Use TaskReportDefaultValue or get current values before setting new ones
+        // reset({ ...methods.getValues(), [name]: TaskReportDefaultValue[name] }); // Updated to use TaskReportDefaultValue
+        setValue(name, TaskReportDefaultValue[name]);
+      }
+    },
+    getValues: methods.getValues,
+    onClear: onClear, // 💡 EXPOSE THE ONCLEAR FUNCTION
+  }));
+
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
  const {
    register,
    reset,
    handleSubmit,
+    setValue,
    formState: { errors },
  } = methods;
  const closePanel = () => {
@ -52,7 +85,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
        <div className="mb-3 w-100">
          <label className="fw-semibold">Choose Date Range:</label>
          <DateRangePicker1
-          className="w-100"
+            className="w-100"
            placeholder="DD-MM-YYYY To DD-MM-YYYY"
            startField="dateFrom"
            endField="dateTo"
@ -105,6 +138,6 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
      </form>
    </FormProvider>
  );
-};
+});

 export default TaskReportFilterPanel;
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@ -17,8 +17,9 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import Pagination from "../common/Pagination";
 import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
 import HoverPopup from "../common/HoverPopup";
+import TaskReportFilterChips from "./TaskReportFilterChips";

-const TaskReportList = () => {
+const TaskReportList = ({ filter, filterData, removeFilterChip, clearFilter }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [filters, setFilters] = useState({
    selectedBuilding: "",
@ -29,7 +30,7 @@ const TaskReportList = () => {
  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);

-  const { service, openModal, closeModal, filter } = useDailyProgrssContext();
+  const { service, openModal, closeModal, filter: contextFilter } = useDailyProgrssContext();
  const selectedProject = useSelectedProject();
  const { projectNames } = useProjectName();

@ -37,7 +38,7 @@ const TaskReportList = () => {
    selectedProject,
    ITEMS_PER_PAGE,
    currentPage,
-    service, filter
+    service, contextFilter
  );

  const ProgrssReportColumn = [
@ -193,124 +194,135 @@ const TaskReportList = () => {
  if (isError) return <div>Loading....</div>;
  return (
    <div>
-      <div className="mt-2 table-responsive text-nowrap">
-        <table className="table">
-          <thead>
-            <tr>
-              <th className="text-start">Activity</th>
-              <th>
-                <span>
-                  Total Pending{" "}
-                  <HoverPopup
-                    id="total_pending_task"
-                    title="Total Pending Task"
-                    content={
-                      <div className="text-wrap" style={{ minWidth: "200px" }}>
-                        This shows the total pending tasks for each activity on that date.
-                      </div>
-                    }
-                  >
-                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                  </HoverPopup>
-                </span>
-              </th>

-              <th>
-                <span>
-                  Reported/Planned{" "}
-                  <HoverPopup
-                    id="reportes_and_planned_task"
-                    title="Reported and Planned Task"
-                    content={
-                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
-                        This shows the reported versus planned tasks for each activity on that date.
-                      </div>
-                    }
-                  >
-                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                  </HoverPopup>
-                </span>
-              </th>
-
-              <th>Assign Date</th>
-              <th>Team</th>
-              <th className="text-center">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {groupedTasks.length === 0 && (
+      <div className="main-content">
+        <div className="col-12 mb-2 mt-2 px-4">
+          <TaskReportFilterChips
+            filter={filter}
+            filterData={filterData}
+            removeFilterChip={removeFilterChip}
+            clearFilter={clearFilter}
+          />
+        </div>
+        <div className="mt-2 table-responsive text-nowrap">
+          <table className="table">
+            <thead>
              <tr>
-                <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
-                  No reports available
-                </td>
-              </tr>
-            )}
+                <th className="text-start">Activity</th>
+                <th>
+                  <span>
+                    Total Pending{" "}
+                    <HoverPopup
+                      id="total_pending_task"
+                      title="Total Pending Task"
+                      content={
+                        <div className="text-wrap" style={{ minWidth: "200px" }}>
+                          This shows the total pending tasks for each activity on that date.
+                        </div>
+                      }
+                    >
+                      <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                    </HoverPopup>
+                  </span>
+                </th>

-            {groupedTasks.map(({ date, tasks }) => (
-              <React.Fragment key={date}>
-                <tr className="table-row-header text-start">
-                  <td colSpan={6}>
-                    <strong>{formatUTCToLocalTime(date)}</strong>
+                <th>
+                  <span>
+                    Reported/Planned{" "}
+                    <HoverPopup
+                      id="reportes_and_planned_task"
+                      title="Reported and Planned Task"
+                      content={
+                        <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                          This shows the reported versus planned tasks for each activity on that date.
+                        </div>
+                      }
+                    >
+                      <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                    </HoverPopup>
+                  </span>
+                </th>
+
+                <th>Assign Date</th>
+                <th>Team</th>
+                <th className="text-center">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {groupedTasks.length === 0 && (
+                <tr>
+                  <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
+                    No reports available
                  </td>
                </tr>
-                {tasks.map((task, idx) => (
-                  <tr key={task.id || idx}>
-                    <td className="flex-wrap text-start">
-                      <div>
-                        {task.workItem.activityMaster?.activityName || "No Activity Name"}
-                      </div>
-                      <div className="text-sm py-2">
-                        {task.workItem.workArea?.floor?.building?.name} ›{" "}
-                        {task.workItem.workArea?.floor?.floorName} ›{" "}
-                        {task.workItem.workArea?.areaName}
-                      </div>
-                    </td>
-                    <td>
-                      {formatNumber(task.workItem.plannedWork)}
-                    </td>
-                    <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
-                    <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                    <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                    <td className="text-center">
-                      <div className="d-flex justify-content-end gap-2">
-                        {ReportTaskRights && !task.reportedDate && (
-                          <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
-                            Report
-                          </button>
-                        )}
-                        {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                          <button
-                            className="btn btn-xs btn-warning"
-                            onClick={() => openModal("comments", { task, isActionAllow: true })}
-                          >
-                            QC
-                          </button>
-                        )}
-                        <button
-                          className="btn btn-xs btn-primary"
-                          onClick={() => openModal("comments", { task, isActionAllow: false })}
-                        >
-                          Comment
-                        </button>
-                      </div>
+              )}
+
+              {groupedTasks.map(({ date, tasks }) => (
+                <React.Fragment key={date}>
+                  <tr className="table-row-header text-start">
+                    <td colSpan={6}>
+                      <strong>{formatUTCToLocalTime(date)}</strong>
                    </td>
                  </tr>
-                ))}
-              </React.Fragment>
-            ))}
-          </tbody>
-        </table>
+                  {tasks.map((task, idx) => (
+                    <tr key={task.id || idx}>
+                      <td className="flex-wrap text-start">
+                        <div>
+                          {task.workItem.activityMaster?.activityName || "No Activity Name"}
+                        </div>
+                        <div className="text-sm py-2">
+                          {task.workItem.workArea?.floor?.building?.name} ›{" "}
+                          {task.workItem.workArea?.floor?.floorName} ›{" "}
+                          {task.workItem.workArea?.areaName}
+                        </div>
+                      </td>
+                      <td>
+                        {formatNumber(task.workItem.plannedWork)}
+                      </td>
+                      <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
+                      <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
+                      <td className="text-center">{renderTeamMembers(task, idx)}</td>
+                      <td className="text-center">
+                        <div className="d-flex justify-content-end gap-2">
+                          {ReportTaskRights && !task.reportedDate && (
+                            <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
+                              Report
+                            </button>
+                          )}
+                          {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
+                            <button
+                              className="btn btn-xs btn-warning"
+                              onClick={() => openModal("comments", { task, isActionAllow: true })}
+                            >
+                              QC
+                            </button>
+                          )}
+                          <button
+                            className="btn btn-xs btn-primary"
+                            onClick={() => openModal("comments", { task, isActionAllow: false })}
+                          >
+                            Comment
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>

-      </div>
-      {
-        data?.data?.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={data.totalPages}
-            onPageChange={paginate}
-          />
-        )
-      }
+        </div>
+        {
+          data?.data?.length > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={data.totalPages}
+              onPageChange={paginate}
+            />
+          )
+        }
+      </div >
    </div >
  );
 };
--- a/src/components/Documents/DocumentFilterPanel.jsx
+++ b/src/components/Documents/DocumentFilterPanel.jsx
@ -59,12 +59,18 @@ const DocumentFilterPanel = forwardRef(
    useImperativeHandle(ref, () => ({
      resetFieldValue: (name, value) => {
        if (value !== undefined) {
-          setValue(name, value);
+          setValue(name, value, { shouldValidate: true, shouldDirty: true });
        } else {
          reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
        }
+
+        if ((name === "startDate" || name === "endDate") && value === null) {
+          setTimeout(() => {
+            setResetKey((prev) => prev + 1);
+          }, 0);
+        }
      },
-      getValues: methods.getValues, // optional, to read current filter state
+      getValues: methods.getValues,
    }));

    //changes
@ -141,6 +147,7 @@ const DocumentFilterPanel = forwardRef(
              defaultRange={false}
              resetSignal={resetKey}
              maxDate={new Date()}
+              className="w-100"
            />
          </div>

--- a/src/components/Documents/Documents.jsx
+++ b/src/components/Documents/Documents.jsx
@ -124,26 +124,27 @@ const Documents = ({ Document_Entity, Entity }) => {
    const updatedFilters = { ...filters };
    if (Array.isArray(updatedFilters[key])) {
      updatedFilters[key] = updatedFilters[key].filter((v) => v !== id);
-      updatedRef.current?.resetFieldValue(key,updatedFilters[key]);
+      updatedRef.current?.resetFieldValue(key, updatedFilters[key]);
    }
    else if (key === "dateRange") {
      updatedFilters.startDate = null;
      updatedFilters.endDate = null;
-      updatedRef.current?.resetFieldValue("startDate",null);
-      updatedRef.current?.resetFieldValue("endDate",null);
+      // These calls correctly tell the DocumentFilterPanel to update its form state:
+      updatedRef.current?.resetFieldValue("startDate", null);
+      updatedRef.current?.resetFieldValue("endDate", null);
    }
    else {
      updatedFilters[key] = null;
    }
    setFilter(updatedFilters);
-   return updatedFilters;
+    return updatedFilters;
  };

  return (
    <DocumentContext.Provider value={contextValues}>
      <div className="mt-2">
        <div className="card page-min-h d-flex p-5">
-          <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
+
          <div className="row align-items-center">
            {/* Search */}
            <div className="d-flex flex-row gap-2 col-12 col-md-8 col-lg-4 mb-md-0 align-items-center mb-2">
@ -194,6 +195,9 @@ const Documents = ({ Document_Entity, Entity }) => {
              )}
            </div>
          </div>
+          <div className="ms-n1">
+            <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
+          </div>
          <DocumentsList
            Document_Entity={DocumentEntity}
            Entity={Entity}
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@ -127,7 +127,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
  const hasAccessAplication = watch("hasApplicationAccess");
  return (
    <>
-      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-2 p-2">
        <div className="text-center">
          <p className="fs-5 fw-semibold">
            {" "}
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/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
    }));

@ -137,13 +145,13 @@ const ExpenseFilterPanel = forwardRef(
            : dynamicDefaultFilter.projectIds || [],
          startDate: dynamicDefaultFilter.startDate
            ? moment
-                .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
-                .toISOString()
+              .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
+              .toISOString()
            : undefined,
          endDate: dynamicDefaultFilter.endDate
            ? moment
-                .utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY")
-                .toISOString()
+              .utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY")
+              .toISOString()
            : undefined,
        };

@ -176,18 +184,16 @@ 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 ${
-                      isTransactionDate ? "active btn-primary text-white" : ""
-                    }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
+                      }`}
                    onClick={() => setValue("isTransactionDate", true)}
                  >
                    Transaction Date
                  </button>
                  <button
                    type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${
-                      !isTransactionDate ? "active btn-primary text-white" : ""
-                    }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
+                      }`}
                    onClick={() => setValue("isTransactionDate", false)}
                  >
                    Submitted Date
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@ -83,64 +83,64 @@ const ExpenseList = ({
    }
  };

-const groupByField = (items, field) => {
-  if (!field || field === "none") {
-    return {
-      All: {
-        key: "All",
-        displayField: "All",
-        items: items || []
+  const groupByField = (items, field) => {
+    if (!field || field === "none") {
+      return {
+        All: {
+          key: "All",
+          displayField: "All",
+          items: items || []
+        }
+      };
+    }
+
+    return items.reduce((acc, item) => {
+      let key;
+      let displayField;
+
+      switch (field) {
+        case "transactionDate":
+          key = formatUTCToLocalTime(item?.transactionDate);
+          displayField = "Transaction Date";
+          break;
+        case "status":
+          key = item?.status?.displayName || "Unknown";
+          displayField = "Status";
+          break;
+        case "submittedBy":
+          key = `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim();
+          displayField = "Submitted By";
+          break;
+        case "project":
+          key = item?.project?.name || "Unknown Project";
+          displayField = "Project";
+          break;
+        case "paymentMode":
+          key = item?.paymentMode?.name || "Unknown Mode";
+          displayField = "Payment Mode";
+          break;
+        case "expenseCategory":
+          key = item?.expenseCategory?.name || "Unknown Type";
+          displayField = "Expense Category";
+          break;
+        case "createdAt":
+          key = item?.createdAt?.split("T")[0] || "Unknown Date";
+          displayField = "Created Date";
+          break;
+        default:
+          key = "Others";
+          displayField = "Others";
      }
-    };
-  }

-  return items.reduce((acc, item) => {
-    let key;
-    let displayField;
+      const groupKey = `${field}_${key}`;
+      if (!acc[groupKey]) {
+        acc[groupKey] = { key, displayField, items: [] };
+      }

-    switch (field) {
-      case "transactionDate":
-        key = formatUTCToLocalTime(item?.transactionDate);
-        displayField = "Transaction Date";
-        break;
-      case "status":
-        key = item?.status?.displayName || "Unknown";
-        displayField = "Status";
-        break;
-      case "submittedBy":
-        key = `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim();
-        displayField = "Submitted By";
-        break;
-      case "project":
-        key = item?.project?.name || "Unknown Project";
-        displayField = "Project";
-        break;
-      case "paymentMode":
-        key = item?.paymentMode?.name || "Unknown Mode";
-        displayField = "Payment Mode";
-        break;
-      case "expenseCategory":
-        key = item?.expenseCategory?.name || "Unknown Type";
-        displayField = "Expense Category";
-        break;
-      case "createdAt":
-        key = item?.createdAt?.split("T")[0] || "Unknown Date";
-        displayField = "Created Date";
-        break;
-      default:
-        key = "Others";
-        displayField = "Others";
-    }
-
-    const groupKey = `${field}_${key}`;
-    if (!acc[groupKey]) {
-      acc[groupKey] = { key, displayField, items: [] };
-    }
-
-    acc[groupKey].items.push(item);
-    return acc;
-  }, {});
-};
+      acc[groupKey].items.push(item);
+      return acc;
+    }, {});
+  };


  const expenseColumns = [
@ -167,9 +167,8 @@ const groupByField = (items, field) => {
      label: "Submitted By",
      align: "text-start",
      getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
-        }`.trim() || "N/A",
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+          }`.trim() || "N/A",
      customRender: (e) => (
        <div
          className="d-flex align-items-center cursor-pointer"
@ -182,9 +181,8 @@ const groupByField = (items, field) => {
            lastName={e.createdBy?.lastName}
          />
          <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
-            }`.trim() || "N/A"}
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+              }`.trim() || "N/A"}
          </span>
        </div>
      ),
@ -216,9 +214,8 @@ const groupByField = (items, field) => {
      align: "text-center",
      getValue: (e) => (
        <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.status?.color) || "secondary"
-          }`}
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
+            }`}
        >
          {e.status?.name || "Unknown"}
        </span>
@ -238,16 +235,16 @@ const groupByField = (items, field) => {
    return <ExpenseTableSkeleton headers={headers} />;
  if (isError) return <div>{error?.message}</div>;

-const isNoGrouping = !groupBy || groupBy === "none";
-const grouped = isNoGrouping
-  ? { All: { key: "All", displayField: "All", items: data?.data ?? [] } }
-  : groupByField(data?.data ?? [], groupBy);
+  const isNoGrouping = !groupBy || groupBy === "none";
+  const grouped = isNoGrouping
+    ? { All: { key: "All", displayField: "All", items: data?.data ?? [] } }
+    : groupByField(data?.data ?? [], groupBy);




  const IsGroupedByDate = [
-    {key:"none",displayField:"None"},
+    { key: "none", displayField: "None" },
    { key: "transactionDate", displayField: "Transaction Date" },
    { key: "createdAt", displayField: "created Date", },
  ]?.includes(groupBy);
@ -343,26 +340,22 @@ const grouped = isNoGrouping
                              (col.isAlwaysVisible || groupBy !== col.key) && (
                                <td
                                  key={col.key}
-                                  className={`d-table-cell ml-2  ${
-                                    col.align ?? ""
-                                  } `}
+                                  className={`d-table-cell ml-2  ${col.align ?? ""
+                                    } `}
                                >
                                  <div
-                                    className={`d-flex px-2 ${
-                                      col.key === "status"
+                                    className={`d-flex px-2 ${col.key === "status"
                                        ? "justify-content-center"
                                        : ""
-                                    }
-                                 ${
-                                   col.key === "amount"
-                                     ? "justify-content-end"
-                                     : ""
-                                 }
-                                 ${
-                                   col.key === "submitted"
-                                     ? "justify-content-center"
-                                     : ""
-                                 }
+                                      }
+                                 ${col.key === "amount"
+                                        ? "justify-content-end"
+                                        : ""
+                                      }
+                                 ${col.key === "submitted"
+                                        ? "justify-content-center"
+                                        : ""
+                                      }
                                 `}
                                  >
                                    {col.customRender
@ -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>
--- a/src/components/PaymentRequest/PaymentRequestFilterChips.jsx
+++ b/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]);

--- a/src/components/PaymentRequest/PaymentRequestFilterPanel.jsx
+++ b/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();
    };

--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/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">
-                      <p>No Request Found</p>
+                    <div >
+                      <p
+                        className="text-center"
+                        style={{
+                          height: "250px",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                        }}
+                      >
+                        No data found
+                      </p>
                    </div>
                  </td>
                </tr>
--- a/src/components/Project/ProjectCard.jsx
+++ b/src/components/Project/ProjectCard.jsx
@ -105,7 +105,7 @@ const ProjectCard = ({ project, isCore = true }) => {
                  >
                    {project?.shortName ? project?.shortName : project?.name}
                  </h5>
-                  <div className="client-info text-body">
+                  <div className="client-info text-body text-start">
                    <span>{project?.shortName ? project?.name : ""}</span>
                  </div>
                </div>
--- a/src/components/Tenant/TenantFilterChips.jsx
+++ b/src/components/Tenant/TenantFilterChips.jsx
@ -0,0 +1,100 @@
+import React, { useMemo } from "react";
+import { TENANT_STATUS, reference } from "../../utils/constants";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const TenantFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key, valueKey = "id") => {
+      if (!ids || ids.length === 0) return;
+
+      const items = ids.map((id) => {
+        const found = list?.find((i) => i[valueKey] === id);
+        return {
+          id,
+          name: found?.name || id,
+        };
+      });
+
+      chips.push({ key, label, items });
+    };
+
+    // Industries
+    addGroup(filter?.industryIds, data, "Industries", "industryIds");
+
+    // References
+    addGroup(filter?.references, reference, "References", "references", "val");
+
+    // Tenant Status
+    addGroup(filter?.tenantStatusIds, TENANT_STATUS, "Status", "tenantStatusIds");
+
+    // Date Range Chip
+    if (filter?.startDate || filter?.endDate) {
+      chips.push({
+        key: "date",
+        label: "Date Range",
+        items: [
+          {
+            id: "date-range",
+            name: `${filter?.startDate ? formatUTCToLocalTime(filter.startDate) : ""}${
+              filter?.endDate ? " to " + formatUTCToLocalTime(filter.endDate) : ""
+            }`,
+          },
+        ],
+      });
+    }
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2 mt-2">
+      {filterChips.map((chipGroup) => (
+        <div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
+          <span className="fw-semibold me-2">{chipGroup.label}:</span>
+
+          {chipGroup.items.map((item) => (
+            <span
+              key={item.id}
+              className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
+            >
+              <span>{item.name}</span>
+
+              {/* Remove Date Range → remove full filter */}
+              {chipGroup.key === "date" ? (
+                <button
+                  type="button"
+                  className="btn-close btn-close-white btn-sm ms-2"
+                  style={{
+                    filter: "invert(1) grayscale(1)",
+                    opacity: 0.7,
+                    fontSize: "0.6rem",
+                  }}
+                  onClick={clearFilter}
+                />
+              ) : (
+                <button
+                  type="button"
+                  className="btn-close btn-close-white btn-sm ms-2"
+                  style={{
+                    filter: "invert(1) grayscale(1)",
+                    opacity: 0.7,
+                    fontSize: "0.6rem",
+                  }}
+                  onClick={() => removeFilterChip(chipGroup.key, item.id)}
+                />
+              )}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TenantFilterChips;
--- a/src/components/Tenant/TenantFilterPanel.jsx
+++ b/src/components/Tenant/TenantFilterPanel.jsx
@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useImperativeHandle, forwardRef, useMemo } from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { defaultFilterValues, filterSchema } from "./TenantSchema";
 import Label from "../common/Label";
@ -10,16 +10,44 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import moment from "moment";
 import { useLocation } from "react-router-dom";

-const TenantFilterPanel = ({ onApply }) => {
+const TenantFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter }, ref) => {
  const [resetKey, setResetKey] = useState(0);

  const methods = useForm({
    resolver: zodResolver(filterSchema),
    defaultValues: defaultFilterValues,
  });
+  const { handleSubmit, reset, setValue } = methods;
+  const { data: industries, isLoading } = useIndustries();
+
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...defaultFilterValues,
+      industryIds: defaultFilterValues.industryIds || [],
+      tenantStatusIds: defaultFilterValues.tenantStatusIds || [],
+      references: defaultFilterValues.references || [],
+      startDate: defaultFilterValues.startDate,
+      endDate: defaultFilterValues.endDate,
+    };
+  }, [defaultFilterValues]);
+
+useImperativeHandle(ref, () => ({
+  resetFieldValue: (name, value) => {
+    setValue(name, value);
+  },
+  resetFields: () => {
+    reset(defaultFilterValues);
+    setResetKey(prev => prev + 1); // reset date picker
+  }
+}));
+
+
+  useEffect(() => {
+    if (industries && setFilterdata) {
+      setFilterdata(industries);
+    }
+  }, [industries, setFilterdata]);

-  const { handleSubmit, reset } = methods;
-  const { data: industries = [], isLoading } = useIndustries();

  const handleClosePanel = useCallback(() => {
    document.querySelector(".offcanvas.show .btn-close")?.click();
@ -32,9 +60,8 @@ const TenantFilterPanel = ({ onApply }) => {
        startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
        endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
      });
-      handleClosePanel();
    },
-    [onApply, handleClosePanel]
+    [onApply]
  );


@ -65,6 +92,7 @@ const TenantFilterPanel = ({ onApply }) => {
              endField="endDate"
              resetSignal={resetKey}
              defaultRange={false}
+              className="w-100"
            />
          </div>
          <div className="text-strat mb-2">
@ -119,6 +147,6 @@ const TenantFilterPanel = ({ onApply }) => {
      </form>
    </FormProvider>
  );
-};
+});

 export default TenantFilterPanel;
--- a/src/components/Tenant/TenantsList.jsx
+++ b/src/components/Tenant/TenantsList.jsx
@ -7,12 +7,14 @@ import Pagination from "../common/Pagination";
 import { TenantTableSkeleton } from "./TenanatSkeleton";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
 import { useNavigate } from "react-router-dom";
+import TenantFilterChips from "./TenantFilterChips";

 const TenantsList = ({
  filters,
  searchText,
  setIsRefetching,
  setRefetchFn,
+  filterData, removeFilterChip, clearFilter
 }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const navigate = useNavigate();
@ -135,54 +137,65 @@ const TenantsList = ({
    );
  return (
    <>
-      <div className=" mt-3">
-        <div className=" text-nowrap table-responsive">
-          <table className="table border-top dataTable text-nowrap">
-            <thead>
-              <tr className="shadow-sm">
-                {TenantColumns.map((col) => (
-                  <th key={col.key} className="sorting d-table-cell">
-                    <div className={col.align}>{col.label}</div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {data?.data.length > 0 ? (
-                data.data.map((tenant) => (
-                  <tr key={tenant.id} style={{ height: "50px" }}>
-                    {TenantColumns.map((col) => (
-                      <td
-                        key={col.key}
-                        className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
-                          }`}
-                      >
-                        {col.customRender
-                          ? col.customRender(tenant)
-                          : col.getValue(tenant)}
-                      </td>
-                    ))}
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td
-                    colSpan={TenantColumns.length + 1}
-                    className="text-center py-4 border-0"
-                  >
-                    No Tenants Found
-                  </td>
+      <div className="main-content">
+        <div className="col-12 mb-2 mt-2 px-4">
+          <TenantFilterChips
+            filter={filters}
+            filterData={filterData}
+            removeFilterChip={removeFilterChip}
+            clearFilter={clearFilter}
+          />
+
+        </div>
+        <div className=" mt-3">
+          <div className=" text-nowrap table-responsive">
+            <table className="table border-top dataTable text-nowrap">
+              <thead>
+                <tr className="shadow-sm">
+                  {TenantColumns.map((col) => (
+                    <th key={col.key} className="sorting d-table-cell">
+                      <div className={col.align}>{col.label}</div>
+                    </th>
+                  ))}
                </tr>
-              )}
-            </tbody>
-          </table>
-          {data?.data?.length > 0 && (
-            <Pagination
-              currentPage={currentPage}
-              totalPages={data.totalPages}
-              onPageChange={paginate}
-            />
-          )}
+              </thead>
+              <tbody>
+                {data?.data.length > 0 ? (
+                  data.data.map((tenant) => (
+                    <tr key={tenant.id} style={{ height: "50px" }}>
+                      {TenantColumns.map((col) => (
+                        <td
+                          key={col.key}
+                          className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
+                            }`}
+                        >
+                          {col.customRender
+                            ? col.customRender(tenant)
+                            : col.getValue(tenant)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td
+                      colSpan={TenantColumns.length + 1}
+                      className="text-center py-4 border-0"
+                    >
+                      No Tenants Found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            {data?.data?.length > 0 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={data.totalPages}
+                onPageChange={paginate}
+              />
+            )}
+          </div>
        </div>
      </div>
    </>
--- a/src/pages/DailyProgressReport/DailyProgrssReport.jsx
+++ b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { useServices } from "../../hooks/masterHook/useMaster";
 import TaskReportList from "../../components/DailyProgressRport/TaskReportList";
@ -13,6 +13,7 @@ import { useSelectedProject } from "../../slices/apiDataManager";
 import SelectField from "../../components/common/Forms/SelectField";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import { useForm } from "react-hook-form";
+import { TaskReportDefaultValue } from "../../components/DailyProgressRport/TaskRportScheam";

 const DailyProgrssContext = createContext();
 export const useDailyProgrssContext = () => {
@ -30,8 +31,9 @@ const DailyProgrssReport = () => {
  const [service, setService] = useState("");
  const [filter, setFilter] = useState('')
  const { setOffcanvasContent, setShowTrigger } = useFab();
+  const updatedRef = useRef();
  const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
-
+  const [filterData, setFilterdata] = useState(null);
  const [modal, setModal] = useState({ type: null, data: null });

  const openModal = (type, data = null) => setModal({ type, data });
@ -49,20 +51,40 @@ const DailyProgrssReport = () => {
      serviceFilter: ""
    }
  });
-
+  const clearFilter = () => {
+    updatedRef.current?.onClear(); 
+};
  const handleFilter = (filterObj) => {
    setFilter(filterObj)
  }

  useEffect(() => {
    setShowTrigger(true);
-    setOffcanvasContent("Report Filter", <TaskReportFilterPanel handleFilter={handleFilter} />);
+    setOffcanvasContent("Report Filter", <TaskReportFilterPanel handleFilter={handleFilter} ref={updatedRef}
+      clearFilter={clearFilter}
+      setFilterdata={setFilterdata} />);

    return () => {
      setShowTrigger(false);
      setOffcanvasContent("", null);
    };
  }, []);
+
+  const handleRemoveChip = (key, id) => {
+    setFilter((prev) => {
+      const updated = { ...prev };
+
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+        setTimeout(() => updatedRef.current?.resetFieldValue(key, updated[key]), 0);
+      } else {
+        updated[key] = null;
+        setTimeout(() => updatedRef.current?.resetFieldValue(key, null), 0);
+      }
+
+      return updated;
+    });
+  };
  return (
    <div className="container-fluid">
      <DailyProgrssContext.Provider value={contextDispatcher}>
@ -97,7 +119,7 @@ const DailyProgrssReport = () => {
          ]}
        />

-        <div className="card card-fullscreen p-5">
+        <div className="card page-min-h p-5">
          {data?.length > 0 && (
            <div className="col-sm-4 col-md-3 col-12 text-start">
              <AppFormController
@ -107,15 +129,15 @@ const DailyProgrssReport = () => {
                render={({ field }) => (
                  <SelectField
                    label="Services"
-                    options={[{ id: "", name: "All Projects" }, ...(data ?? [])]} 
+                    options={[{ id: "", name: "All Projects" }, ...(data ?? [])]}
                    placeholder="Select Service"
-                    labelKey="name"  
+                    labelKey="name"
                    valueKey="id"
                    isLoading={isLoading}
                    value={field.value}
                    onChange={(val) => {
-                      field.onChange(val);  
-                      setService(val);      
+                      field.onChange(val);
+                      setService(val);
                    }}
                    className="m-0"
                  />
@ -125,7 +147,10 @@ const DailyProgrssReport = () => {
          )}

          <div>
-            <TaskReportList />
+            <TaskReportList filter={filter}
+              filterData={filterData}
+              removeFilterChip={handleRemoveChip}
+              clearFilter={clearFilter} />
          </div>
        </div>

--- a/src/pages/Expense/ExpensePage.jsx
+++ b/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;
    });
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/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);
@ -80,9 +85,9 @@ const PaymentRequestPage = () => {
    });
  };

- const handleExport = (type) => {
+  const handleExport = (type) => {
    HandlePaymentRequestExport(type, filters, search, tableRef, setExportLoading);
-};
+  };

  return (
    <PaymentRequestContext.Provider value={contextValue}>
--- a/src/pages/Tenant/TenantPage.jsx
+++ b/src/pages/Tenant/TenantPage.jsx
@ -5,6 +5,7 @@ import React, {
  useContext,
  useCallback,
  useMemo,
+  useRef,
 } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@ -59,6 +60,7 @@ const TenantPage = () => {
  const [refetchFn, setRefetchFn] = useState(null);
  const [filters, setFilters] = useState();

+
  // ---------- Hooks ----------
  const debouncedSearch = useDebounce(searchText, 500);
  const { setOffcanvasContent, setShowTrigger } = useFab();
@ -66,6 +68,9 @@ const TenantPage = () => {
  const isSuperTenant = useHasUserPermission(SUPPER_TENANT);
  const canManageTenants = useHasUserPermission(MANAGE_TENANTS);
  const isSelfTenant = useHasUserPermission(VIEW_TENANTS);
+  const updatedRef = useRef();
+  const [filterData, setFilterdata] = useState(null);
+  const [filter, setFilter] = useState('')

  const methods = useForm({
    resolver: zodResolver(filterSchema),
@ -77,8 +82,18 @@ const TenantPage = () => {
    setFilters(values);
  }, []);

+  const clearFilter = () => {
+    setFilters(defaultFilterValues);           // update active filters
+    updatedRef.current?.resetFields?.();       // reset RHF fields in panel
+  };
+
  const filterPanelElement = useMemo(
-    () => <TenantFilterPanel onApply={handleApplyFilters} />,
+    () => <TenantFilterPanel
+      onApply={handleApplyFilters}
+      ref={updatedRef}
+      clearFilter={clearFilter}
+      setFilterdata={setFilterdata}
+    />,
    [handleApplyFilters]
  );
  // ---------- Fab Filter Panel ----------
@ -112,6 +127,20 @@ const TenantPage = () => {
  // ---------- Context Value ----------
  const contextValue = {};

+  const handleRemoveChip = (key, id) => {
+    setFilters((prev) => {
+      const updated = { ...prev };
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+      } else {
+        updated[key] = null;
+      }
+
+      setTimeout(() => updatedRef.current?.resetFieldValue(key, updated[key]), 0);
+      return updated;
+    });
+  };
+
  return (
    <TenantContext.Provider value={contextValue}>
      <div className="container-fluid">
@ -121,7 +150,7 @@ const TenantPage = () => {
            { label: "Tenant", link: null },
          ]}
        />
-        <div className="card text-center my-4 p-md-5 px-1 py-3 pb-10">
+        <div className="card page-min-h text-center my-4 p-md-5 px-1 py-3 pb-10">
          {/* Super Tenant Actions */}
          {isSuperTenant && (
            <div className="p-0">
@ -157,10 +186,13 @@ const TenantPage = () => {
          {/* Tenant List or Access Denied */}
          {isSuperTenant ? (
            <TenantsList
+              setRefetchFn={setRefetchFn}
+              setIsRefetching={setIsRefetching}
              filters={filters}
              searchText={debouncedSearch}
-              setIsRefetching={setIsRefetching}
-              setRefetchFn={setRefetchFn}
+              filterData={filterData}
+              removeFilterChip={handleRemoveChip}
+              clearFilter={clearFilter}
            />
          ) : !isSelfTenant ? (
            <div className="text-center my-4 p-2">