admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

UI changes in Collection forms and Recurring form.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-06 12:23:46 +05:30
parent 4d40b8e149
commit 428f22ea8e
11 changed files with 244 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Expenses/ViewExpense.jsx
View File

@ -526,7 +526,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
<div className="col-12 col-lg-5 col-xl-4"> <div className="col-12 col-lg-5 col-xl-4">
<div className="d-flex align-items-center text-secondary mb-"> <div className="d-flex align-items-center text-secondary mb-4">
<i className="bx bx-time-five me-2"></i>{" "} <i className="bx bx-time-five me-2"></i>{" "}
<p className=" m-0">TimeLine</p> <p className=" m-0">TimeLine</p>
</div> </div>

2
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -253,7 +253,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
<td colSpan={8} className="text-start"> <td colSpan={8} className="text-start">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
{" "} {" "}
<small className="fs-6 py-1"> <small className="fs-6 py-1 ms-1">
{displayField} :{" "} {displayField} :{" "}
</small>{" "} </small>{" "}
<small className="fs-6 ms-3"> <small className="fs-6 ms-3">

2
src/components/PaymentRequest/ViewPaymentRequest.jsx
View File

@ -411,7 +411,7 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
<div className="col-12 col-md-6 text-start mb-1"> <div className="col-12 col-md-6 text-start mb-1">
<label className="form-label">Transaction Date </label> <label className="form-label">Transaction Date </label>
<DatePicker <DatePicker className="w-100"
name="paidAt" name="paidAt"
control={control} control={control}
minDate={data?.createdAt} minDate={data?.createdAt}

49
src/components/collections/CollectionList.jsx
View File

@ -48,19 +48,6 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
}; };
const collectionColumns = [ const collectionColumns = [
{
key: "invoiceDate",
label: "Invoice Date",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatUTCToLocalTime(col.invoiceDate)}
</span>
),
align: "text-start",
},
{ {
key: "invoiceId", key: "invoiceId",
label: "Invoice No", label: "Invoice No",
@ -88,18 +75,33 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
align: "text-start", align: "text-start",
}, },
{ {
key: "submittedDate", key: "invoiceDate",
label: "Submission Date", label: "Invoice Date",
getValue: (col) => ( getValue: (col) => (
<span <span
className="text-truncate d-inline-block" className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }} style={{ maxWidth: "200px" }}
> >
{formatUTCToLocalTime(col.createdAt)} {formatUTCToLocalTime(col.invoiceDate)}
</span> </span>
), ),
align: "text-center", align: "text-start",
}, },
// {
// key: "submittedDate",
// label: "Submission Date",
// getValue: (col) => (
// <span
// className="text-truncate d-inline-block"
// style={{ maxWidth: "200px" }}
// >
// {formatUTCToLocalTime(col.createdAt)}
// </span>
// ),
// align: "text-center",
// },
{ {
key: "expectedSubmittedDate", key: "expectedSubmittedDate",
label: "Expected Payment Date", label: "Expected Payment Date",
@ -145,6 +147,19 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
), ),
align: "text-end", align: "text-end",
}, },
{
key: "status",
label: "Status",
getValue: (col) => (
<span
className={`badge ${col.markAsCompleted ? "bg-label-primary" : "bg-label-danger"
}`}
>
{col.markAsCompleted ? "Active" : "In-active"}
</span>
),
align: "text-center",
},
]; ];
if (isLoading) return <CollectionTableSkeleton />; if (isLoading) return <CollectionTableSkeleton />;

6
src/components/collections/ManageCollection.jsx
View File

@ -227,7 +227,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label required>Invoice Date</Label> <Label required>Invoice Date</Label>
<DatePicker <DatePicker className="w-100"
name="invoiceDate" name="invoiceDate"
control={control} control={control}
maxDate={new Date()} maxDate={new Date()}
@ -240,7 +240,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label required>Expected Payment Date</Label> <Label required>Expected Payment Date</Label>
<DatePicker <DatePicker className="w-100"
name="exceptedPaymentDate" name="exceptedPaymentDate"
control={control} control={control}
minDate={watch("invoiceDate")} minDate={watch("invoiceDate")}
@ -253,7 +253,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label required>Submission Date (Client)</Label> <Label required>Submission Date (Client)</Label>
<DatePicker <DatePicker className="w-100"
name="clientSubmitedDate" name="clientSubmitedDate"
control={control} control={control}
maxDate={new Date()} maxDate={new Date()}

109
src/components/collections/ViewCollection.jsx
View File

@ -29,47 +29,76 @@ const ViewCollection = ({ onClose }) => {
return ( return (
<div className="container p-3"> <div className="container p-3">
<p className="fs-5 fw-semibold">Collection Details</p> <p className="fs-5 fw-semibold">Collection Details</p>
<div className="row text-start ">
<div className="row text-start">
{/* Row 0: Balance Amount + Expected Payment Date */}
<div className="row mb-3 px-2">
{/* Balance Amount */}
<div className="col-md-6 d-flex align-items-center">
<div className="fw-bold fs-6 text-dark me-2 ms-1">Balance Amount :</div>
<div className="fw-bold fs-6 text-dark">
{formatFigure(data?.balanceAmount, {
type: "currency",
currency: "INR",
})}
</div>
</div>
{/* Expected Payment Date */}
<div className="col-md-6 d-flex align-items-center">
<div className="fw-bold fs-6 text-dark me-2 ms-3">Expected Payment Date :</div>
<div className="fw-bold fs-6 text-dark">
{formatUTCToLocalTime(data?.exceptedPaymentDate)}
</div>
</div>
</div>
{/* Project and Status */}
<div className="col-12 mb-3 d-flex justify-content-between"> <div className="col-12 mb-3 d-flex justify-content-between">
<div className="d-flex"> <div className="d-flex">
<label <label
className=" me-2 mb-0 fw-semibold" className="me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "120px" }}
> >
Project : Project :
</label> </label>
<div className="text-muted">{data?.project?.name}</div> <div className="text-muted">{data?.project?.name}</div>
</div> </div>
<div> <div>
{" "}
<span <span
className={`badge bg-label-${ className={`badge bg-label-${data?.markAsCompleted ? "primary" : "danger"}`}
data?.isActive ? "primary" : "danger"
}`}
> >
{data?.isActive ? "Active" : "Inactive"} {data?.markAsCompleted ? "Active" : "Inactive"}
</span> </span>
{(isAdmin || canEditCollection) && {(isAdmin || canEditCollection) &&
!data?.receivedInvoicePayments && ( !data?.receivedInvoicePayments &&
!data?.markAsCompleted && (
<span onClick={handleEdit} className="ms-2 cursor-pointer"> <span onClick={handleEdit} className="ms-2 cursor-pointer">
<i className="bx bx-edit text-primary bx-sm"></i> <i className="bx bx-edit text-primary bx-sm"></i>
</span> </span>
)} )}
</div> </div>
</div> </div>
{/* Title */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-2 text-wrap"> <div className="row mb-2 text-wrap">
<div className="col-4 fw-semibold">Title :</div> <div className="col-4 fw-semibold">Title :</div>
<div className="col-8 text-wrap">{data?.title}</div> <div className="col-8 text-wrap">{data?.title}</div>
</div> </div>
</div> </div>
{/* Invoice Number */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Invoice Number:</div> <div className="col-4 fw-semibold">Invoice Number:</div>
<div className="col-8">{data?.invoiceNumber}</div> <div className="col-8">{data?.invoiceNumber}</div>
</div> </div>
</div> </div>
{/* Row 2: E-Invoice Number + Project */}
{/* E-Invoice Number */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">E-Invoice Number:</div> <div className="col-4 fw-semibold">E-Invoice Number:</div>
@ -77,15 +106,15 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
{/* Row 3: Invoice Date + Client Submitted Date */} {/* Invoice Date */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Invoice Date:</div> <div className="col-4 fw-semibold">Invoice Date:</div>
<div className="col-8"> <div className="col-8">{formatUTCToLocalTime(data?.invoiceDate)}</div>
{formatUTCToLocalTime(data?.invoiceDate)}
</div>
</div> </div>
</div> </div>
{/* Client Submitted Date */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Client Submission Date:</div> <div className="col-4 fw-semibold">Client Submission Date:</div>
@ -94,17 +123,8 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
{/* Row 4: Expected Payment Date + Mark as Completed */}
<div className="col-md-6">
<div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Expected Payment Date:</div>
<div className="col-8">
{formatUTCToLocalTime(data?.exceptedPaymentDate)}
</div>
</div>
</div>
{/* Row 5: Basic Amount + Tax Amount */} {/* Basic Amount */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Basic Amount :</div> <div className="col-4 fw-semibold">Basic Amount :</div>
@ -116,6 +136,8 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
{/* Tax Amount */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Tax Amount :</div> <div className="col-4 fw-semibold">Tax Amount :</div>
@ -127,25 +149,16 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
{/* Row 6: Balance Amount + Created At */}
<div className="col-md-6"> {/* Created At */}
<div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Balance Amount :</div>
<div className="col-8">
{formatFigure(data?.balanceAmount, {
type: "currency",
currency: "INR",
})}
</div>
</div>
</div>
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-end"> <div className="row mb-4 align-items-end">
<div className="col-4 fw-semibold">Created At :</div> <div className="col-4 fw-semibold">Created At :</div>
<div className="col-8">{formatUTCToLocalTime(data?.createdAt)}</div> <div className="col-8">{formatUTCToLocalTime(data?.createdAt)}</div>
</div> </div>
</div> </div>
{/* Row 7: Created By */}
{/* Created By */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row mb-4 align-items-center"> <div className="row mb-4 align-items-center">
<div className="col-4 fw-semibold">Created By :</div> <div className="col-4 fw-semibold">Created By :</div>
@ -161,19 +174,19 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
{/* Description */} {/* Description */}
<div className="col-12 my-1 mb-2"> <div className="col-12 my-1 mb-2">
<div className=" me-2 mb-0 fw-semibold">Description :</div> <div className="me-2 mb-0 fw-semibold">Description :</div>
<div className="text-muted">{data?.description}</div> <div className="text-muted">{data?.description}</div>
</div> </div>
{/* Attachments */}
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className=" me-2 mb-2 fw-semibold">Attachment :</label> <label className="me-2 mb-2 fw-semibold">Attachment :</label>
<div className="d-flex flex-wrap gap-2"> <div className="d-flex flex-wrap gap-2">
{data?.attachments?.map((doc) => { {data?.attachments?.map((doc) => {
const isImage = doc.contentType?.includes("image"); const isImage = doc.contentType?.includes("image");
return ( return (
<div <div
key={doc.documentId} key={doc.documentId}
@ -207,14 +220,12 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
<div className="container px-1"> {/* Tabs Section */}
{/* Tabs Navigation */} <div className="container px-1 mt-4">
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<li className="nav-item"> <li className="nav-item">
<button <button
className={`nav-link ${ className={`nav-link ${activeTab === "payments" ? "active" : ""}`}
activeTab === "payments" ? "active" : ""
}`}
onClick={() => setActiveTab("payments")} onClick={() => setActiveTab("payments")}
type="button" type="button"
> >
@ -223,9 +234,7 @@ const ViewCollection = ({ onClose }) => {
</li> </li>
<li className="nav-item"> <li className="nav-item">
<button <button
className={`nav-link ${ className={`nav-link ${activeTab === "details" ? "active" : ""}`}
activeTab === "details" ? "active" : ""
}`}
onClick={() => setActiveTab("details")} onClick={() => setActiveTab("details")}
type="button" type="button"
> >
@ -235,7 +244,6 @@ const ViewCollection = ({ onClose }) => {
</li> </li>
</ul> </ul>
{/* Tab Content */}
<div className="tab-content px-1 py-0 border-top-0"> <div className="tab-content px-1 py-0 border-top-0">
{activeTab === "payments" && ( {activeTab === "payments" && (
<div className="tab-pane fade show active"> <div className="tab-pane fade show active">
@ -252,6 +260,7 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
); );
}; };

2
src/components/common/DateRangePicker.jsx
View File

@ -178,7 +178,7 @@ export const DateRangePicker1 = ({
<div className={`position-relative ${className} w-max `}> <div className={`position-relative ${className} w-max `}>
<input <input
type="text" type="text"
className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium" className="form-control form-control-sm ps-2 pe-3 me-4 cursor-pointer"
placeholder={placeholder} placeholder={placeholder}
defaultValue={formattedValue} defaultValue={formattedValue}
ref={(el) => { ref={(el) => {

1
src/hooks/useCollections.jsx
View File

@ -84,6 +84,7 @@ export const useMarkedPaymentReceived = (onSuccessCallBack) => {
await CollectionRepository.markPaymentReceived(payload), await CollectionRepository.markPaymentReceived(payload),
onSuccess: async () => { onSuccess: async () => {
client.invalidateQueries({ queryKey: ["collections"] }); client.invalidateQueries({ queryKey: ["collections"] });
client.invalidateQueries({ queryKey: ["collection"] });
showToast("Payment Received marked Successfully", "success"); showToast("Payment Received marked Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack(); if (onSuccessCallBack) onSuccessCallBack();
}, },

4
src/pages/PaymentRequest/PaymentRequestPage.jsx
View File

@ -73,13 +73,13 @@ const PaymentRequestPage = () => {
{/* Top Bar */} {/* Top Bar */}
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-3"> <div className="card-body py-2 px-0">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-6"> <div className="col-6">
<input <input
type="search" type="search"
className="form-control form-control-sm w-auto" className="form-control form-control-sm w-auto"
placeholder="Search Payment Req.." placeholder="Search Payment Request"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />

19
src/pages/RecurringExpense/RecurringExpensePage.jsx
View File

@ -56,13 +56,14 @@ const RecurringExpensePage = () => {
{/* Top Bar */} {/* Top Bar */}
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-1"> <div className="card-body py-2 px-1">
<div className="d-flex flex-wrap align-items-center justify-content-between"> <div className="row align-items-center mb-3">
{/* Left side: Search + Filter */} {/* Left Column: Search + Filter */}
<div className="d-flex align-items-center flex-wrap"> <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
<div className="d-flex align-items-center flex-wrap gap-0">
<input <input
type="search" type="search"
className="form-control form-control-sm w-auto" className="form-control form-control-sm w-25"
placeholder="Search Recurring Expense..." placeholder="Search Recurring Expense"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
@ -93,9 +94,10 @@ const RecurringExpensePage = () => {
</ul> </ul>
</div> </div>
</div> </div>
</div>
{/* Right side: Add Button */} {/* Right Column: Add Button */}
<div className="mt-2 mt-sm-0"> <div className="col-md-4 col-sm-12 text-md-end text-start">
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"
@ -113,6 +115,7 @@ const RecurringExpensePage = () => {
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -150,7 +153,7 @@ const RecurringExpensePage = () => {
} }
recurringId={viewRecurring.recurringId} recurringId={viewRecurring.recurringId}
/> />
<ViewRecurringExpense/> <ViewRecurringExpense />
</GlobalModel> </GlobalModel>
)} )}

46
src/pages/collections/CollectionPage.jsx
View File

@ -87,13 +87,13 @@ const CollectionPage = () => {
canEditCollection === undefined || canEditCollection === undefined ||
canViewCollection === undefined || canViewCollection === undefined ||
canCreate === undefined canCreate === undefined
) { ) {
return <div className="text-center py-5">Checking access...</div>; return <div className="text-center py-5">Checking access...</div>;
} }
if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) { if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) {
return <AccessDenied data={[{ label: "Home", link: "/" }, { label: "Collection" }]} />; return <AccessDenied data={[{ label: "Home", link: "/" }, { label: "Collection" }]} />;
} }
return ( return (
<CollectionContext.Provider value={contextMassager}> <CollectionContext.Provider value={contextMassager}>
<div className="container-fluid"> <div className="container-fluid">
@ -101,15 +101,15 @@ if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !c
data={[{ label: "Home", link: "/" }, { label: "Collection" }]} data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
/> />
<div className="card my-3 py-2 px-sm-4 px-0"> <div className="card my-3 py-2 px-sm-4 px-2">
<div className="row px-3"> <div className="row align-items-center">
<div className="col-12 col-md-3 mb-1"> {/* Left side: Date Picker + Show Pending */}
<div className="col-8 col-md-6 d-flex flex-wrap align-items-center gap-3">
<FormProvider {...methods}> <FormProvider {...methods}>
<DateRangePicker1 howManyDay={180} /> <DateRangePicker1 howManyDay={180} />
</FormProvider> </FormProvider>
</div>
<div className="col-12 col-md-3 d-flex align-items-center gap-2 "> <div className="form-check form-switch d-flex align-items-center mb-0">
<div className="form-check form-switch text-start align-items-center">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@ -119,40 +119,32 @@ if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !c
onChange={(e) => setShowPending(e.target.checked)} onChange={(e) => setShowPending(e.target.checked)}
/> />
<label <label
className="form-check-label ms-0" className="form-check-label ms-2"
htmlFor="inactiveEmployeesCheckbox" htmlFor="inactiveEmployeesCheckbox"
> >
Show Pending Show Completed Collections
</label> </label>
</div> </div>
</div> </div>
<div className="col-12 col-md-6 d-flex justify-content-end gap-4"> {/* Right side: Search + Add Button */}
<div className=" w-md-auto"> <div className="col-4 col-md-6 d-flex justify-content-md-end align-items-center gap-3 mt-3 mt-md-0">
{" "} <div className="w-md-auto flex-grow-1 flex-md-grow-0">
<input <input
type="search" type="search"
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} onChange={(e) => setSearchText(e.target.value)}
placeholder="search Collection" placeholder="Search Collection"
className="form-control form-control-sm" className="form-control form-control-sm"
/> />
</div> </div>
{ (canCreate || isAdmin) && (
<button
className="btn btn-sm btn-primary"
type="button"
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>
)}
{(canCreate || isAdmin) && (<button className="btn btn-sm btn-primary" type="button" 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> </div>
</div> </div>
<CollectionList <CollectionList
fromDate={fromDate} fromDate={fromDate}
toDate={toDate} toDate={toDate}
@ -209,7 +201,7 @@ if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !c
<ConfirmModal <ConfirmModal
type="success" type="success"
header="Payment Successful Received" header="Payment Successful Received"
message="Payment has been recored successfully." message="Payment has been recorded successfully."
isOpen={processedPayment?.isOpen} isOpen={processedPayment?.isOpen}
loading={isPending} loading={isPending}
onSubmit={() => handleMarkedPayment(processedPayment?.invoiceId)} onSubmit={() => handleMarkedPayment(processedPayment?.invoiceId)}