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

src/components/Expenses/ExpenseFilterChips.jsx

@@ -40,24 +40,24 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
     if (!filterChips.length) return null;
 
     return (
-
 <div className="row">
-            <div className="text-start mt-2">
+  <div className="col-12">
-                <strong className="fs-6 ms-2">Filter:</strong>
+    <div className="d-flex flex-wrap align-items-start gap-1 text-start">
-            </div>
-            <div className="col-12 d-flex flex-column text-start text-wrap">
       {filterChips.map((chip) => (
-                    <span
+        <div
           key={chip.key}
-                        className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
+          className="d-flex align-items-center flex-wrap   px-2 py-1 "
+          style={{ fontSize: "0.9rem", maxWidth: "100%" }}
         >
-                        <strong className="me-1">{chip.label}:</strong>
+          {/* Chip Label */}
-                        <div className="d-flex flex-wrap align-items-center">
+          <span className="fw-semibold me-2">{chip.label}:</span>
+
+          {/* Chip Items */}
+          <div className="d-flex flex-wrap align-items-center gap-1">
             {chip.items.map((item) => (
               <span
                 key={item.id}
-                                    className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
+                className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
-                                    style={{ fontSize: "0.8rem" }}
               >
                 <span>{item.name}</span>
                 <button
@@ -73,10 +73,12 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
               </span>
             ))}
           </div>
-                    </span>
+        </div>
       ))}
     </div>
   </div>
+</div>
+
 
 
     );
@@ -85,138 +87,3 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
 export default ExpenseFilterChips;
 
 
-// import React, { useMemo } from "react";
-
-// const ExpenseFilterChips = ({ filters, filterData, removeFilterChip, groupBy }) => {
-//   // Build filter chips
-//   const filterChips = useMemo(() => {
-//     const chips = [];
-
-//     const buildGroup = (ids, list, label, key) => {
-//       if (!ids?.length) return;
-//       const items = ids.map((id) => ({
-//         id,
-//         name: list.find((item) => item.id === id)?.name || id,
-//       }));
-//       chips.push({ key, label, items });
-//     };
-
-//     buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
-//     buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
-//     buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
-//     buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
-//     buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
-
-//     if (filters.startDate || filters.endDate) {
-//       const start = filters.startDate
-//         ? new Date(filters.startDate).toLocaleDateString("en-GB", {
-//             day: "2-digit",
-//             month: "short",
-//             year: "numeric",
-//           })
-//         : "";
-//       const end = filters.endDate
-//         ? new Date(filters.endDate).toLocaleDateString("en-GB", {
-//             day: "2-digit",
-//             month: "short",
-//             year: "numeric",
-//           })
-//         : "";
-//       chips.push({
-//         key: "dateRange",
-//         label: "Date Range",
-//         items: [{ id: "dateRange", name: `${start} - ${end}` }],
-//       });
-//     }
-
-//     return chips;
-//   }, [filters, filterData]);
-
-//   // Prepare groupBy chip
-//   const groupByChip = useMemo(() => {
-//     if (!groupBy) return null;
-
-//     const formattedGroup =
-//       groupBy === "transactionDate"
-//         ? "Transaction Date"
-//         : groupBy === "status"
-//         ? "Status"
-//         : groupBy === "submittedBy"
-//         ? "Submitted By"
-//         : groupBy === "project"
-//         ? "Project"
-//         : groupBy === "paymentMode"
-//         ? "Payment Mode"
-//         : groupBy === "expensesType"
-//         ? "Expense Type"
-//         : groupBy === "createdAt"
-//         ? "Submitted Date"
-//         : "Others";
-
-//     return {
-//       key: "groupBy",
-//       label: "Group By",
-//       items: [{ id: groupBy, name: formattedGroup }],
-//     };
-//   }, [groupBy]);
-
-//   if (!filterChips.length && !groupByChip) return null;
-
-//   return (
-//     <div className="mb-3 d-flex flex-wrap gap-2 align-items-center">
-//       {/* Filters */}
-//       {filterChips.length > 0 && (
-//         <>
-//           <strong>Filters:</strong>
-//           {filterChips.map((chip) => (
-//             <span
-//               key={chip.key}
-//               className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
-//             >
-//               <strong className="me-1">{chip.label}:</strong>
-//               <div className="d-flex flex-wrap align-items-center">
-//                 {chip.items.map((item) => (
-//                   <span
-//                     key={item.id}
-//                     className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
-//                     style={{ fontSize: "0.8rem" }}
-//                   >
-//                     <span>{item.name}</span>
-//                     <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(chip.key, item.id)}
-//                     />
-//                   </span>
-//                 ))}
-//               </div>
-//             </span>
-//           ))}
-//         </>
-//       )}
-
-//       {/* Group By */}
-//       {groupByChip && (
-//         <>
-//           <strong className="ms-2">Group By:</strong>
-//           {groupByChip.items.map((item) => (
-//             <span
-//               key={item.id}
-//               className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
-//               style={{ fontSize: "0.8rem" }}
-//             >
-//               <span>{item.name}</span>
-//             </span>
-//           ))}
-//         </>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default ExpenseFilterChips;

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, {forwardRef, useEffect,useImperativeHandle, useState, useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -15,7 +15,7 @@ import { useExpenseFilter } from "../../hooks/useExpense";
 import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
-const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
+const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
   const { status } = useParams();
   const navigate = useNavigate();
   const selectedProjectId = useSelector(
@@ -77,6 +77,18 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
     if (group) setSelectedGroup(group);
   };
 
+    useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+      }
+    },
+    getValues: methods.getValues, // optional, to read current filter state
+  }));
+
   const onSubmit = (formData) => {
     onApply({
       ...formData,
@@ -280,6 +292,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
       </FormProvider>
     </>
   );
-};
+});
 
 export default ExpenseFilterPanel;

src/components/Expenses/ExpenseList.jsx

@@ -183,7 +183,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     },
   ];
 
-  if (isInitialLoading) return <ExpenseTableSkeleton />;
+  if (isInitialLoading && !data) return <ExpenseTableSkeleton />;
   if (isError) return <div>{error?.message}</div>;
 
   const grouped = groupBy
@@ -305,25 +305,60 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                   })
                                 }
                               ></i>
-                              {canEditExpense(expense) && (
+                              {canDetetExpense(expense) &&
+                                canEditExpense(expense) && (
+                                  <div className="dropdown z-2">
+                                    <button
+                                      type="button"
+                                      className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                                      data-bs-toggle="dropdown"
+                                      aria-expanded="false"
+                                    >
                                       <i
-                                  className="bx bx-edit text-secondary cursor-pointer"
+                                        className="bx bx-dots-vertical-rounded text-muted p-0"
+                                        data-bs-toggle="tooltip"
+                                        data-bs-offset="0,8"
+                                        data-bs-placement="top"
+                                        data-bs-custom-class="tooltip-dark"
+                                        title="More Action"
+                                      ></i>
+                                    </button>
+                                    <ul className="dropdown-menu dropdown-menu-end w-auto">
+                                      {canDetetExpense(expense) && (
+                                        <li
                                           onClick={() =>
                                             setManageExpenseModal({
                                               IsOpen: true,
                                               expenseId: expense.id,
                                             })
                                           }
-                                ></i>
+                                        >
+                                          <a className="dropdown-item px-2 cursor-pointer py-1">
+                                            <i className="bx bx-edit text-primary  bx-xs me-2"></i>
+                                            <span className="align-left ">
+                                              Modify
+                                            </span>
+                                          </a>
+                                        </li>
                                       )}
+
                                       {canDetetExpense(expense) && (
-                                <i
+                                        <li
-                                  className="bx bx-trash text-danger cursor-pointer"
                                           onClick={() => {
                                             setIsDeleteModalOpen(true);
                                             setDeletingId(expense.id);
                                           }}
-                                ></i>
+                                        >
+                                          <a className="dropdown-item  px-2 cursor-pointer py-1">
+                                            <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                                            <span className="align-left">
+                                              Delete
+                                            </span>
+                                          </a>
+                                        </li>
+                                      )}
+                                    </ul>
+                                  </div>
                                 )}
                             </div>
                           </td>

src/components/Layout/Header.jsx

@@ -40,11 +40,11 @@ const Header = () => {
   const isProjectPath = pathname === "/projects";
   const isDirectory = pathname === "/directory";
   const isEmployeeList = pathname === "/employees";
-  const isExpense = pathname === "/expenses";
+  // const isExpense = pathname === "/expenses";
   const isEmployeeProfile = UUID_REGEX.test(pathname);
 
   const hideDropPaths =
-    isDirectory || isEmployeeList || isExpense || isEmployeeProfile;
+    isDirectory || isEmployeeList  || isEmployeeProfile;
 
   const showProjectDropdown = !hideDropPaths;
 

src/pages/Expense/ExpensePage.jsx

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useFormContext } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
 
@@ -39,7 +39,7 @@ const ExpensePage = () => {
   const [filters, setFilters] = useState(defaultFilter);
   const [groupBy, setGroupBy] = useState("transactionDate");
   const [searchText, setSearchText] = useState("");
-
+  const filterPanelRef = useRef();
   const [ManageExpenseModal, setManageExpenseModal] = useState({
     IsOpen: null,
     expenseId: null,
@@ -59,20 +59,15 @@ const ExpensePage = () => {
   const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
   const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
 
+
   const { setOffcanvasContent, setShowTrigger } = useFab();
 
-  const methods = useForm({
+
-    resolver: zodResolver(SearchSchema),
-    defaultValues: defaultFilter,
-  });
-  const { reset } = methods;
 
   const [filterData, setFilterdata] = useState(defaultFilter);
 
-  const clearFilter = () => {
+
-    setFilters(defaultFilter);
+
-    reset();
-  };
 
 
   const removeFilterChip = (key, id) => {
@@ -80,9 +75,12 @@ const ExpensePage = () => {
       const updated = { ...prev };
       if (Array.isArray(updated[key])) {
         updated[key] = updated[key].filter((v) => v !== id);
+        filterPanelRef.current?.resetFieldValue(key, updated[key]);
       } else if (key === "dateRange") {
         updated.startDate = null;
         updated.endDate = null;
+        filterPanelRef.current?.resetFieldValue("startDate", null);
+        filterPanelRef.current?.resetFieldValue("endDate", null);
       }
       return updated;
     });
@@ -94,6 +92,7 @@ const ExpensePage = () => {
       setOffcanvasContent(
         "Expense Filters",
         <ExpenseFilterPanel
+          ref={filterPanelRef}
           onApply={setFilters}
           handleGroupBy={setGroupBy}
           setFilterdata={setFilterdata}
@@ -138,9 +137,7 @@ const ExpensePage = () => {
                   </div>
 
                   <div className="col-6 text-end mt-2 mt-sm-0">
-                    <button className="btn btn-sm" onClick={clearFilter}>
+
-                      Clear
-                    </button>
                     {IsCreatedAble && (
                       <button
                         className="btn btn-sm btn-primary"