added collection permission

This commit is contained in:
pramod.mahajan 2025-10-17 10:18:11 +05:30
parent 6e89fbd680
commit 4c059afb72
4 changed files with 278 additions and 193 deletions

View File

@ -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">
Action
</th>
{(isAdmin ||
canAddPayment ||
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>
))
) : (

View File

@ -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>

View File

@ -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>
);
};

View File

@ -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";