added collection permission

src/components/collections/CollectionList.jsx

@@ -1,16 +1,31 @@
 import React, { useState } from "react";
 import { useCollections } from "../../hooks/useCollections";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+import {
+  ADDPAYMENT_COLLECTION,
+  ADMIN_COLLECTION,
+  CREATE_COLLECTION,
+  EDIT_COLLECTION,
+  ITEMS_PER_PAGE,
+  VIEW_COLLECTION,
+} from "../../utils/constants";
 import { formatFigure, localToUtc, useDebounce } from "../../utils/appUtils";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Pagination from "../common/Pagination";
 import { useCollectionContext } from "../../pages/collections/CollectionPage";
 import { CollectionTableSkeleton } from "./CollectionSkeleton";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
 const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
   const [currentPage, setCurrentPage] = useState(1);
-  const selectedProject = useSelectedProject()
+
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
+  const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
+  const canCreate = useHasUserPermission(CREATE_COLLECTION);
+
+  const selectedProject = useSelectedProject();
   const searchDebounce = useDebounce(searchString, 500);
 
   const { data, isLoading, isError, error } = useCollections(
@@ -48,7 +63,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
     },
     {
       key: "invoiceId",
-      label: "Invoice Id",
+      label: "Invoice No",
       getValue: (col) => (
         <span
           className="text-truncate d-inline-block"
@@ -74,7 +89,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
     },
     {
       key: "submittedDate",
-      label: "Submitted Date",
+      label: "Submission Date",
       getValue: (col) => (
         <span
           className="text-truncate d-inline-block"
@@ -100,13 +115,13 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
     },
     {
       key: "amount",
-      label: "Amount",
+      label: "Total Amount",
       getValue: (col) => (
         <span
           className="text-truncate d-inline-block"
           style={{ maxWidth: "200px" }}
         >
-          {formatFigure(col?.basicAmount, {
+          {formatFigure(col?.basicAmount + col?.taxAmount, {
             type: "currency",
             currency: "INR",
           }) ?? 0}
@@ -150,9 +165,11 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                     {col.label}
                   </th>
                 ))}
-                <th className="sticky-action-column bg-white text-center">
+                {(isAdmin ||
-                  Action
+                  canAddPayment ||
-                </th>
+                  canViewCollection ||
+                  canEditCollection ||
+                  canCreate) && <th>Action</th>}
               </tr>
             </thead>
             <tbody>
@@ -164,6 +181,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                         {col.getValue(row)}
                       </td>
                     ))}
+                    {(isAdmin || canAddPayment || canViewCollection) && (
                       <td
                         className="sticky-action-column text-center"
                         style={{ padding: "12px 8px" }}
@@ -187,6 +205,11 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
 
                           <ul className="dropdown-menu dropdown-menu-end">
                             {/* View */}
+                            {(isAdmin ||
+                              canAddPayment ||
+                              canViewCollection ||
+                              canEditCollection ||
+                              canCreate) && (
                               <li>
                                 <a
                                   className="dropdown-item cursor-pointer"
@@ -196,10 +219,13 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                                   <span>View</span>
                                 </a>
                               </li>
+                            )}
 
+                            {/* Only if not completed */}
                             {!row?.markAsCompleted && (
                               <>
                                 {/* Add Payment */}
+                                {(isAdmin || canAddPayment) && (
                                   <li>
                                     <a
                                       className="dropdown-item cursor-pointer"
@@ -214,8 +240,10 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                                       <span>Add Payment</span>
                                     </a>
                                   </li>
+                                )}
 
                                 {/* Mark Payment */}
+                                {isAdmin && (
                                   <li>
                                     <a
                                       className="dropdown-item cursor-pointer"
@@ -230,11 +258,13 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                                       <span>Mark Payment</span>
                                     </a>
                                   </li>
+                                )}
                               </>
                             )}
                           </ul>
                         </div>
                       </td>
+                    )}
                   </tr>
                 ))
               ) : (

src/components/collections/ViewCollection.jsx

@@ -7,9 +7,13 @@ import Avatar from "../common/Avatar";
 import PaymentHistoryTable from "./PaymentHistoryTable";
 import Comment from "./Comment";
 import { CollectionDetailsSkeleton } from "./CollectionSkeleton";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { ADMIN_COLLECTION, EDIT_COLLECTION } from "../../utils/constants";
 
 const ViewCollection = ({ onClose }) => {
   const [activeTab, setActiveTab] = useState("payments");
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
   const { viewCollection, setCollection, setDocumentView } =
     useCollectionContext();
   const { data, isLoading, isError, error } = useCollection(viewCollection);
@@ -45,7 +49,8 @@ const ViewCollection = ({ onClose }) => {
             >
               {data?.isActive ? "Active" : "Inactive"}
             </span>
-            {!data?.receivedInvoicePayments && (
+            {(isAdmin || canEditCollection) &&
+              !data?.receivedInvoicePayments && (
                 <span onClick={handleEdit} className="ms-2 cursor-pointer">
                   <i className="bx bx-edit text-primary bx-sm"></i>
                 </span>
@@ -83,7 +88,7 @@ const ViewCollection = ({ onClose }) => {
         </div>
         <div className="col-md-6">
           <div className="row mb-4 align-items-end">
-            <div className="col-4 fw-semibold">Client Submitted Date:</div>
+            <div className="col-4 fw-semibold">Client Submission Date:</div>
             <div className="col-8">
               {formatUTCToLocalTime(data?.clientSubmitedDate)}
             </div>

src/pages/collections/CollectionPage.jsx

@@ -15,6 +15,14 @@ import AddPayment from "../../components/collections/AddPayment";
 import ViewCollection from "../../components/collections/ViewCollection";
 import ManageCollection from "../../components/collections/ManageCollection";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import {
+  ADDPAYMENT_COLLECTION,
+  ADMIN_COLLECTION,
+  CREATE_COLLECTION,
+  EDIT_COLLECTION,
+  VIEW_COLLECTION,
+} from "../../utils/constants";
 
 const CollectionContext = createContext();
 export const useCollectionContext = () => {
@@ -42,6 +50,11 @@ const CollectionPage = () => {
   });
   const [showPending, setShowPending] = useState(false);
   const [searchText, setSearchText] = useState("");
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
+  const canCreate = useHasUserPermission(CREATE_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
+  const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
   const methods = useForm({
     defaultValues: {
       fromDate: moment().subtract(180, "days").format("DD-MM-YYYY"),
@@ -50,6 +63,7 @@ const CollectionPage = () => {
   });
   const { watch } = methods;
   const [fromDate, toDate] = watch(["fromDate", "toDate"]);
+
   const handleToggleActive = (e) => setShowPending(e.target.checked);
 
   const contextMassager = {
@@ -69,6 +83,11 @@ const CollectionPage = () => {
   };
   return (
     <CollectionContext.Provider value={contextMassager}>
+      {isAdmin ||
+      canAddPayment ||
+      canEditCollection ||
+      canViewCollection ||
+      canCreate ? (
         <div className="container-fluid">
           <Breadcrumb
             data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
@@ -111,16 +130,21 @@ const CollectionPage = () => {
                     className="form-control form-control-sm"
                   />
                 </div>
+                {isAdmin ||
+                  (isCanCreate && (
                     <button
                       className="btn btn-sm btn-primary"
                       type="button"
-                onClick={() => setCollection({ isOpen: true, invoiceId: null })}
+                      onClick={() =>
+                        setCollection({ isOpen: true, invoiceId: null })
+                      }
                     >
                       <i className="bx bx-plus-circle me-2"></i>
                       <span className="d-none d-md-inline-block">
                         Add New Collection
                       </span>
                     </button>
+                  ))}
               </div>
             </div>
           </div>
@@ -136,11 +160,15 @@ const CollectionPage = () => {
             <GlobalModel
               isOpen={makeCollection.isOpen}
               size="lg"
-            closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
+              closeModal={() =>
+                setCollection({ isOpen: false, invoiceId: null })
+              }
             >
               <ManageCollection
                 collectionId={makeCollection?.invoiceId ?? null}
-              onClose={() => setCollection({ isOpen: false, invoiceId: null })}
+                onClose={() =>
+                  setCollection({ isOpen: false, invoiceId: null })
+                }
               />
             </GlobalModel>
           )}
@@ -149,10 +177,14 @@ const CollectionPage = () => {
             <GlobalModel
               size="lg"
               isOpen={addPayment.isOpen}
-            closeModal={() => setAddPayment({ isOpen: false, invoiceId: null })}
+              closeModal={() =>
+                setAddPayment({ isOpen: false, invoiceId: null })
+              }
             >
               <AddPayment
-              onClose={() => setAddPayment({ isOpen: false, invoiceId: null })}
+                onClose={() =>
+                  setAddPayment({ isOpen: false, invoiceId: null })
+                }
               />
             </GlobalModel>
           )}
@@ -188,6 +220,16 @@ const CollectionPage = () => {
             onClose={() => setProcessedPayment(null)}
           />
         </div>
+      ) : (
+        <div className="container-fluid">
+          <div className="card text-center py-1">
+            <i className="fa-solid fa-triangle-exclamation fs-5" />
+            <p>
+              Access Denied: You don't have permission to perform this action !
+            </p>
+          </div>
+        </div>
+      )}
     </CollectionContext.Provider>
   );
 };

src/utils/constants.jsx

@@ -3,7 +3,6 @@ export const DURATION_TIME = 10; // minutes
 export const ITEMS_PER_PAGE = 20;
 export const OTP_EXPIRY_SECONDS = 300; // OTP time
 
-
 export const BASE_URL = process.env.VITE_BASE_URL;
 
 // export const BASE_URL = "https://api.marcoaiot.com";
@@ -50,7 +49,7 @@ export const DIRECTORY_ADMIN = "4286a13b-bb40-4879-8c6d-18e9e393beda";
 export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5";
 
 export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb";
-
+// ========================Finance=========================================================
 // -----------------------Expense----------------------------------------
 export const VIEW_SELF_EXPENSE = "385be49f-8fde-440e-bdbc-3dffeb8dd116";
 
@@ -66,6 +65,16 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
 
 export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
 
+// --------------------------------Collection----------------------------
+
+export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
+export const VIEW_COLLECTION = "c8d7eea5-4033-4aad-9ebe-76de49896830";
+export const CREATE_COLLECTION = "b93141fd-dbd3-4051-8f57-bf25d18e3555";
+export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
+export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
+
+// ==========================================================================================
+
 export const EXPENSE_REJECTEDBY = [
   "d1ee5eec-24b6-4364-8673-a8f859c60729",
   "965eda62-7907-4963-b4a1-657fb0b2724b",
@@ -146,4 +155,3 @@ export const PROJECT_STATUS = [
   },
 ];
 export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
-