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

Refactor_Expenses #321

Merged
pramod.mahajan merged 249 commits from Refactor_Expenses into hotfix/MasterActivity 2025-08-01 13:14:59 +00:00
Conversation 0 Commits 249 Files Changed 74 +53 -51
3 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 719c916af3 - Show all commits

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

@ -173,7 +173,7 @@ const ExpenseList = () => {
</span> </span>
</div> </div>
</td> </td>
<td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense.amount}</td> <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense?.amount}</td>
<td> <td>
<span <span
className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`} className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}

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

@ -5,12 +5,13 @@ import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { ActionSchema } from "./ExpenseSchema"; import { ActionSchema } from "./ExpenseSchema";
import { useExpenseContext } from "../../pages/Expense/ExpensePage"; import { useExpenseContext } from "../../pages/Expense/ExpensePage";
import { getColorNameFromHex } from "../../utils/appUtils";
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
const ViewExpense = ({ ExpenseId }) => { const ViewExpense = ({ ExpenseId }) => {
const { data, isLoading, isError, error } = useExpense(ExpenseId); const { data, isLoading, isError, error } = useExpense(ExpenseId);
const [imageLoaded, setImageLoaded] = useState({}); const [imageLoaded, setImageLoaded] = useState({});
const { setDocumentView } = useExpenseContext(); const { setDocumentView } = useExpenseContext();
const { const {
register, register,
handleSubmit, handleSubmit,
@ -36,16 +37,7 @@ const ViewExpense = ({ ExpenseId }) => {
MakeAction(Payload); MakeAction(Payload);
}; };
if (isLoading) { if (isLoading) return <ExpenseDetailsSkeleton/>
return (
<div
className="d-flex justify-content-center align-items-center"
style={{ minHeight: "300px" }}
>
<div className="fs-5 text-muted">Loading...</div>
</div>
);
}
const handleImageLoad = (id) => { const handleImageLoad = (id) => {
setImageLoaded((prev) => ({ ...prev, [id]: true })); setImageLoaded((prev) => ({ ...prev, [id]: true }));
}; };
@ -59,7 +51,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
{/* Expense Info Rows */} {/* Expense Info Rows */}
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Transaction Date : Transaction Date :
@ -70,7 +62,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Expense Type : Expense Type :
@ -79,7 +71,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Supplier : Supplier :
@ -88,14 +80,14 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold">Amount :</label> <label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
<div className="text-muted">₹ {data.amount}</div> <div className="text-muted">₹ {data.amount}</div>
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Payment Mode : Payment Mode :
@ -104,7 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Paid By : Paid By :
@ -115,54 +107,48 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 text-start col-md-4 mb-3">
<div className="d-flex align-items-center">
<label className="form-label me-2 mb-0 fw-semibold">Status :</label> <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
<span
className="badge" <span className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
style={{ backgroundColor: data.status.color }} {data?.status?.displayName}
>
{data.status.displayName}
</span> </span>
</div> </div>
</div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 text-start d-flex col-md-4 mb-3">
<div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Pre-Approved : Pre-Approved :
</label> </label>
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div> <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
</div> </div>
</div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Project : Project :
</label> </label>
<div className="text-muted text-start">{data.project.name}</div> <div className="text-muted text-start">{data?.project?.name}</div>
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Created By : Created By :
</label> </label>
<div className="text-muted"> <div className="text-muted">
{data.createdBy.firstName} {data.createdBy.lastName} {data?.createdBy?.firstName} {data?.createdBy?.lastName}
</div> </div>
</div> </div>
</div> </div>
<div className="col-12 col-sm-6 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Created At : Created At :
</label> </label>
<div className="text-muted"> <div className="text-muted">
{formatUTCToLocalTime(data.createdAt, true)} {formatUTCToLocalTime(data?.createdAt, true)}
</div> </div>
</div> </div>
</div> </div>
@ -170,23 +156,23 @@ const ViewExpense = ({ ExpenseId }) => {
<div className="text-start"> <div className="text-start">
<label className="form-label me-2 mb-0 fw-semibold">Description:</label> <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
<div className="text-muted">{data.description}</div> <div className="text-muted">{data?.description}</div>
</div> </div>
<div className="col-12 my-2 text-start "> <div className="col-12 my-2 text-start ">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Attachement : Attachement :
</label> </label>
{data.documents?.map((doc) => ( {data?.documents && data?.documents?.map((doc) => (
<a <div
className="list-group-item list-group-item-action d-flex align-items-center" className="list-group-item list-group-item-action d-flex align-items-center"
key={doc.id} key={doc.id}
> >
<div <div
className="rounded me-3 d-flex align-items-center justify-content-center" className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
style={{ height: "50px", width: "80px", position: "relative" }} style={{ height: "50px", width: "80px", position: "relative" }}
> >
{doc.contentType === "application/pdf" ? ( {doc.contentType === "application/pdf" ? (
<i className="bx bxs-file-pdf"></i> <div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
) : ( ) : (
<> <>
{!imageLoaded[doc.id] && ( {!imageLoaded[doc.id] && (
@ -194,7 +180,6 @@ const ViewExpense = ({ ExpenseId }) => {
Loading... Loading...
</div> </div>
)} )}
<img <img
src={doc.thumbPreSignedUrl} src={doc.thumbPreSignedUrl}
alt={doc.fileName} alt={doc.fileName}
@ -216,12 +201,12 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
<div className="w-100"> <div className="w-100">
<p className="mb-0">{doc.fileName}</p> <small className="mb-0 small">{doc.fileName}</small>
<div className="d"> <div className="d">
<i className="bx bx-cloud-download cursor-pointer"></i> <i className="bx bx-cloud-download cursor-pointer"></i>
</div> </div>
</div> </div>
</a> </div>
))} ))}
</div> </div>

31
src/pages/Expense/ExpensePage.jsx
View File

@ -5,6 +5,7 @@ import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument"; import PreviewDocument from "../../components/Expenses/PreviewDocument";
import ManageExpense from "../../components/Expenses/ManageExpense";
export const ExpenseContext = createContext(); export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext); export const useExpenseContext = () => useContext(ExpenseContext);
@ -25,6 +26,7 @@ const ExpensePage = () => {
const contextValue = { const contextValue = {
setViewExpense, setViewExpense,
setManageExpenseModal,
setDocumentView, setDocumentView,
}; };
@ -60,7 +62,12 @@ const ExpensePage = () => {
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="Add New Expense" title="Add New Expense"
className={`p-1 me-2 bg-primary rounded-circle `} className={`p-1 me-2 bg-primary rounded-circle `}
onClick={() => setNewExpense(true)} onClick={() =>
setManageExpenseModal({
IsOpen: true,
expenseId: null,
})
}
> >
<i className="bx bx-plus fs-4 text-white"></i> <i className="bx bx-plus fs-4 text-white"></i>
</button> </button>
@ -70,14 +77,24 @@ const ExpensePage = () => {
</div> </div>
<ExpenseList /> <ExpenseList />
{ManageExpenseModal.IsOpen && (
{isNewExpense && (
<GlobalModel <GlobalModel
isOpen={isNewExpense} isOpen={ManageExpenseModal.IsOpen}
size="lg" size="lg"
closeModal={() => setNewExpense(false)} closeModal={() =>
setManageExpenseModal({
IsOpen: null,
expenseId: null,
})
}
> >
<CreateExpense closeModal={() => setNewExpense(false)} /> <ManageExpense
key={ManageExpenseModal.expenseId ?? "new"}
expenseToEdit={ManageExpenseModal.expenseId}
closeModal={() =>
setManageExpenseModal({ IsOpen: null, expenseId: null })
}
/>
</GlobalModel> </GlobalModel>
)} )}
@ -100,7 +117,7 @@ const ExpensePage = () => {
{ViewDocument.IsOpen && ( {ViewDocument.IsOpen && (
<GlobalModel <GlobalModel
size="lg" size="lg"
m key={ViewDocument.IsOpen ?? "new"}
isOpen={ViewDocument.IsOpen} isOpen={ViewDocument.IsOpen}
closeModal={() => setDocumentView({ IsOpen: false, Image: null })} closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
> >