Refactor_Expenses #321

Merged
pramod.mahajan merged 249 commits from Refactor_Expenses into hotfix/MasterActivity 2025-08-01 13:14:59 +00:00
9 changed files with 812 additions and 323 deletions
Showing only changes of commit ce66c137aa - Show all commits

View File

@ -1,18 +1,41 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { ExpenseSchema } from "./ExpenseSchema"; import { ExpenseSchema } from "./ExpenseSchema";
import { formatFileSize } from "../../utils/appUtils"; import { formatFileSize } from "../../utils/appUtils";
import { useProjectName } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster, {
useExpenseStatus,
useExpenseType,
usePaymentMode,
} from "../../hooks/masterHook/useMaster";
import {
useEmployeesAllOrByProjectId,
useEmployeesByProject,
} from "../../hooks/useEmployees";
import Avatar from "../common/Avatar";
import { useCreateExpnse } from "../../hooks/useExpense";
const CreateExpense = () => { const CreateExpense = ({closeModal}) => {
const [ExpenseType, setExpenseType] = useState();
const dispatch = useDispatch();
const {
ExpenseTypes,
loading: ExpenseLoading,
error: ExpenseError,
} = useExpenseType();
const schema = ExpenseSchema(ExpenseTypes);
const { const {
register, register,
handleSubmit, handleSubmit,
watch, watch,
setValue, setValue,
reset,
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
resolver: zodResolver(ExpenseSchema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
projectId: "", projectId: "",
expensesTypeId: "", expensesTypeId: "",
@ -25,11 +48,32 @@ const CreateExpense = () => {
supplerName: "", supplerName: "",
amount: "", amount: "",
noOfPersons: "", noOfPersons: "",
statusId: "",
billAttachments: [], billAttachments: [],
}, },
}); });
const selectedproject = watch("projectId");
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const { projectNames, loading: projectLoading, error } = useProjectName();
const {
PaymentModes,
loading: PaymentModeLoading,
error: PaymentModeError,
} = usePaymentMode();
const {
ExpenseStatus,
loading: StatusLoadding,
error: stausError,
} = useExpenseStatus();
const {
employees,
loading: EmpLoading,
error: EmpError,
} = useEmployeesByProject(selectedproject);
const files = watch("billAttachments"); const files = watch("billAttachments");
const onFileChange = async (e) => { const onFileChange = async (e) => {
const newFiles = Array.from(e.target.files); const newFiles = Array.from(e.target.files);
@ -50,21 +94,23 @@ const onFileChange = async (e) => {
}) })
); );
// Avoid duplicates based on file name + size
const combinedFiles = [ const combinedFiles = [
...existingFiles, ...existingFiles,
...parsedFiles.filter( ...parsedFiles.filter(
(newFile) => (newFile) =>
!existingFiles.some( !existingFiles.some(
(f) => f.fileName === newFile.fileName && f.fileSize === newFile.fileSize (f) =>
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
) )
), ),
]; ];
setValue("billAttachments", combinedFiles, { shouldDirty: true, shouldValidate: true }); setValue("billAttachments", combinedFiles, {
shouldDirty: true,
shouldValidate: true,
});
}; };
const toBase64 = (file) => const toBase64 = (file) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
@ -76,82 +122,158 @@ const removeFile = (index) => {
const newFiles = files.filter((_, i) => i !== index); const newFiles = files.filter((_, i) => i !== index);
setValue("billAttachments", newFiles, { shouldValidate: true }); setValue("billAttachments", newFiles, { shouldValidate: true });
}; };
const onSubmit = (data) => {
console.log("Form Data:", data); const {mutate:CreateExpense,isPending} = useCreateExpnse(()=>{
handleClose()
})
const onSubmit = (payload) => {
console.log("Form Data:", payload);
CreateExpense(payload)
}; };
const ExpenseTypeId = watch("expensesTypeId");
useEffect(() => {
setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
}, [ExpenseTypeId]);
const handleClose =()=>{
reset()
closeModal()
}
return ( return (
<div class="container p-3"> <div className="container p-3">
<p class="fw-bold m-0">Create New Expense</p> <h5 className="m-0">Create New Expense</h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}> <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
<div class="row my-2"> <div className="row my-2">
<div class="col-md-6"> <div className="col-md-6">
<label for="projectId" className="form-label "> <label htmlFor="projectId" className="form-label">
Select Project Select Project
</label> </label>
<select class="form-select form-select-sm" id="projectId" required> <select
<option value="">-- Select Project --</option> className="form-select form-select-sm"
<option value="project1">Project A</option> {...register("projectId")}
<option value="project2">Project B</option> >
<option value="">Select Project</option>
{projectLoading ? (
<option>Loading...</option>
) : (
projectNames?.map((project) => (
<option key={project.id} value={project.id}>
{project.name}
</option>
))
)}
</select> </select>
{errors.projectId && (
<small className="danger-text">{errors.projectId.message}</small>
)}
</div> </div>
<div class="col-md-6"> <div className="col-md-6">
<label for="expensesTypeId" className="form-label "> <label for="expensesTypeId" className="form-label ">
Expense Type Expense Type
</label> </label>
<select <select
class="form-select form-select-sm" className="form-select form-select-sm"
id="expensesTypeId" id="expensesTypeId"
required {...register("expensesTypeId")}
> >
<option value="">-- Select Type --</option> <option value="" disabled>
<option value="type1">Travel</option> Select Type
<option value="type2">Meal</option> </option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
ExpenseTypes?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
)}
</select> </select>
{errors.expensesTypeId && (
<small className="danger-text">
{errors.expensesTypeId.message}
</small>
)}
</div> </div>
</div> </div>
<div class="row my-2"> <div className="row my-2">
<div class="col-md-6"> <div className="col-md-6">
<label for="paymentModeId" className="form-label "> <label for="paymentModeId" className="form-label ">
Payment Mode Payment Mode
</label> </label>
<select <select
class="form-select form-select-sm" class="form-select form-select-sm"
id="paymentModeId" id="paymentModeId"
required {...register("paymentModeId")}
> >
<option value="">-- Select Payment Mode --</option> <option value="" disabled>
<option value="cash">Cash</option> Select Mode
<option value="card">Card</option> </option>
{PaymentModeLoading ? (
<option disabled>Loading...</option>
) : (
PaymentModes?.map((payment) => (
<option key={payment.id} value={payment.id}>
{payment.name}
</option>
))
)}
</select> </select>
{errors.paymentModeId && (
<small className="danger-text">
{errors.paymentModeId.message}
</small>
)}
</div> </div>
<div class="col-md-6"> <div className="col-md-6">
<label for="paidById" className="form-label "> <label for="paidById" className="form-label ">
Paid By Paid By
</label> </label>
<input <select
type="text" class="form-select form-select-sm"
id="paidById" id="paymentModeId"
class="form-control form-control-sm" {...register("paidById")}
required disabled={!selectedproject}
/> >
<option value="" disabled>
Select Person
</option>
{EmpLoading ? (
<option disabled>Loading...</option>
) : (
employees?.map((emp) => (
<option key={emp.id} value={emp.id}>
{`${emp.firstName} ${emp.lastName} `}
</option>
))
)}
</select>
</div> </div>
</div> </div>
<div class="row my-2"> <div className="row my-2">
<div class="col-md-6"> <div className="col-md-6">
<label for="transactionDate" className="form-label "> <label for="transactionDate" className="form-label ">
Transaction Date Transaction Date
</label> </label>
<input <input
type="date" type="date"
id="transactionDate" className="form-control form-control-sm"
class="form-control form-control-sm" placeholder="YYYY-MM-DD"
placeholder="DD-MM-YYYY" id="flatpickr-date"
required {...register("transactionDate")}
/> />
{errors.transactionDate && (
<small className="danger-text">
{errors.transactionDate.message}
</small>
)}
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -161,40 +283,36 @@ const removeFile = (index) => {
<input <input
type="number" type="number"
id="amount" id="amount"
class="form-control form-control-sm" className="form-control form-control-sm"
min="1" min="1"
required step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
/> />
{errors.amount && (
<small className="danger-text">{errors.amount.message}</small>
)}
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col-md-6"> <div className="col-md-6">
<label for="noOfPersons" className="form-label "> <label for="supplerName" className="form-label ">
No. of Persons Supplier Name
</label> </label>
<input <input
type="number" type="text"
id="noOfPersons" id="supplerName"
class="form-control form-control-sm" className="form-control form-control-sm"
min="1" {...register("supplerName")}
required
/> />
{errors.supplerName && (
<small className="danger-text">
{errors.supplerName.message}
</small>
)}
</div> </div>
<div class="col-md-6">
<label for="statusId" className="form-label ">
Status
</label>
<select class="form-select form-select-sm" id="statusId" required>
<option value="">-- Select Status --</option>
<option value="approved">Approved</option>
<option value="pending">Pending</option>
</select>
</div>
</div>
<div class="row my-2">
<div class="col-md-6"> <div class="col-md-6">
<label for="location" className="form-label "> <label for="location" className="form-label ">
Location Location
@ -202,33 +320,68 @@ const removeFile = (index) => {
<input <input
type="text" type="text"
id="location" id="location"
class="form-control form-control-sm" className="form-control form-control-sm"
required {...register("location")}
/> />
{errors.location && (
<small className="danger-text">{errors.location.message}</small>
)}
</div> </div>
</div>
<div class="col-md-6"> <div class="row my-2">
<label for="supplerName" className="form-label "> <div className="col-md-6">
Supplier Name <label for="statusId" className="form-label ">
TransactionId
</label> </label>
<input <input
type="text" type="text"
id="supplerName" id="transactionId"
class="form-control form-control-sm" class="form-control form-control-sm"
required min="1"
{...register("transactionId")}
/> />
</div> {errors.transactionId && (
<small className="danger-text">
{errors.transactionId.message}
</small>
)}
</div> </div>
<div class="row my-2"> {ExpenseType?.noOfPersonsRequired && (
<div className="col-md-6">
<label htmlFor="noOfPersons" className="form-label">
No. of Persons
</label>
<input
type="number"
id="noOfPersons"
className="form-control form-control-sm"
{...register("noOfPersons")}
inputMode="numeric"
/>
{errors.noOfPersons && (
<small className="danger-text">
{errors.noOfPersons.message}
</small>
)}
</div>
)}
</div>
<div className="row my-2">
<div class="col-md-12" className="form-label "> <div class="col-md-12" className="form-label ">
<label for="description">Description</label> <label for="description">Description</label>
<textarea <textarea
id="description" id="description"
class="form-control form-control-sm" className="form-control form-control-sm"
{...register("description")}
rows="2" rows="2"
required
></textarea> ></textarea>
{errors.description && (
<small className="danger-text">
{errors.description.message}
</small>
)}
</div> </div>
</div> </div>
@ -236,7 +389,6 @@ const removeFile = (index) => {
<div className="col-md-12"> <div className="col-md-12">
<label className="form-label "> <label className="form-label ">
Upload Bill{" "} Upload Bill{" "}
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
</label> </label>
<div <div
@ -244,10 +396,11 @@ const removeFile = (index) => {
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => document.getElementById("billAttachments").click()} onClick={() => document.getElementById("billAttachments").click()}
> >
<i className="bx bx-cloud-upload d-block"></i> <i className="bx bx-cloud-upload d-block bx-lg"></i>
<span className="text-muted d-block"> <span className="text-muted d-block">
Click to select or click here to browse Click to select or click here to browse
</span> </span>
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
<input <input
type="file" type="file"
@ -258,10 +411,15 @@ const removeFile = (index) => {
{...register("billAttachments")} {...register("billAttachments")}
onChange={(e) => { onChange={(e) => {
onFileChange(e); onFileChange(e);
e.target.value = ""; // this line resets the file input e.target.value = "";
}} }}
/> />
</div> </div>
{errors.billAttachments && (
<small className="danger-text">
{errors.billAttachments.message}
</small>
)}
{files.length > 0 && ( {files.length > 0 && (
<div className="d-block"> <div className="d-block">
@ -271,13 +429,17 @@ const removeFile = (index) => {
class="d-flex justify-content-between text-start p-1" class="d-flex justify-content-between text-start p-1"
> >
<div> <div>
<span className="mb-0 text-secondary small d-block">{file.fileName}</span> <span className="mb-0 text-secondary small d-block">
{file.fileName}
</span>
<span className="text-body-secondary small d-block"> <span className="text-body-secondary small d-block">
{formatFileSize(file.fileSize {formatFileSize(file.fileSize)}
)}
</span> </span>
</div> </div>
<i className='bx bx-trash bx-sm cursor-pointer text-danger' onClick={()=>removeFile(idx)}></i> <i
className="bx bx-trash bx-sm cursor-pointer text-danger"
onClick={() => removeFile(idx)}
></i>
</a> </a>
))} ))}
</div> </div>
@ -285,7 +447,8 @@ const removeFile = (index) => {
{Array.isArray(errors.billAttachments) && {Array.isArray(errors.billAttachments) &&
errors.billAttachments.map((fileError, index) => ( errors.billAttachments.map((fileError, index) => (
<div key={index} className="danger-text small mt-1"> <div key={index} className="danger-text small mt-1">
{fileError?.fileSize?.message || fileError?.contentType?.message} {fileError?.fileSize?.message ||
fileError?.contentType?.message}
</div> </div>
))} ))}
</div> </div>
@ -293,10 +456,10 @@ const removeFile = (index) => {
<div className="d-flex justify-content-center gap-2"> <div className="d-flex justify-content-center gap-2">
{" "} {" "}
<button type="submit" class="btn btn-primary btn-sm mt-3"> <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
Submit {isPending ? "Please Wait...":"Submit"}
</button> </button>
<button type="reset" class="btn btn-secondary btn-sm mt-3"> <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
Cancel Cancel
</button> </button>
</div> </div>
@ -306,3 +469,4 @@ const removeFile = (index) => {
}; };
export default CreateExpense; export default CreateExpense;

View File

@ -1,40 +1,68 @@
import React from 'react' import React, { useState } from "react";
import { useExpenseList } from "../../hooks/useExpense";
import Avatar from "../common/Avatar";
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
const ExpenseList = () => { const ExpenseList = () => {
const { setViewExpense } = useExpenseContext();
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
const filter = {
projectIds: [],
statusIds: [],
createdByIds: [],
paidById: [],
startDate: null,
endDate: null,
};
const { data, isLoading, isError } = useExpenseList(5, currentPage, filter);
if (isLoading) return <div>Loading...</div>;
const items = data ?? [];
const totalPages = data?.totalPages ?? 1;
const hasMore = currentPage < totalPages;
const paginate = (page) => {
if (page >= 1 && page <= totalPages) {
setCurrentPage(page);
}
};
return ( return (
<div className="card "> <div className="card ">
<div className="card-datatable table-responsive"> <div className="card-datatable table-responsive">
<div <div
id="DataTables_Table_0_wrapper" id="DataTables_Table_0_wrapper"
className="dataTables_wrapper dt-bootstrap5 no-footer" className="dataTables_wrapper no-footer"
> >
<table <table
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap" className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
id="DataTables_Table_0" id="DataTables_Table_0"
aria-describedby="DataTables_Table_0_info" aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
> >
<thead> <thead>
<tr className=''> <tr>
<th <th
className="sorting sorting_desc" className="sorting sorting_desc"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="3" colSpan="2"
aria-label="User: activate to sort column ascending" aria-label="Date: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-6">Date</div> <div className="text-start ms-6">Date Time</div>
</th> </th>
<th <th
className="sorting sorting_desc d-sm-table-cell" className="sorting sorting_desc d-none d-sm-table-cell"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="User: activate to sort column ascending" aria-label="Expense Type: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-5">Expense Type</div> <div className="text-start ms-5">Expense Type</div>
@ -45,10 +73,10 @@ const ExpenseList = () => {
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="User: activate to sort column ascending" aria-label="Payment Mode: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ">Payment mode</div> <div className="text-start ms-5">Payment Mode</div>
</th> </th>
<th <th
className="sorting sorting_desc d-none d-sm-table-cell" className="sorting sorting_desc d-none d-sm-table-cell"
@ -56,21 +84,10 @@ const ExpenseList = () => {
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="User: activate to sort column ascending" aria-label="Paid By: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ">Paid By</div> <div className="text-start ms-5">Paid By</div>
</th>
<th
className="sorting"
tabIndex="0"
aria-controls="DataTables_Table_0"
rowSpan="1"
colSpan="1"
aria-label="Billing: activate to sort column ascending"
>
Status
</th> </th>
<th <th
className="sorting d-none d-md-table-cell" className="sorting d-none d-md-table-cell"
@ -78,21 +95,156 @@ const ExpenseList = () => {
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Plan: activate to sort column ascending" aria-label="Amount: activate to sort column ascending"
> >
Amount Amount
</th> </th>
<th
className="sorting"
tabIndex="0"
aria-controls="DataTables_Table_0"
rowSpan="1"
colSpan="1"
aria-label="Status: activate to sort column ascending"
>
Status
</th>
<th
className="sorting"
tabIndex="0"
aria-controls="DataTables_Table_0"
rowSpan="1"
colSpan="1"
aria-label="Status: activate to sort column ascending"
>
Action
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{isLoading && (
<tr>
<td colSpan={7} className="text-center py-3">
Loading...
</td>
</tr>
)}
{!isLoading && items.length === 0 && (
<tr>
<td colSpan={7} className="text-center py-3">
No expenses found.
</td>
</tr>
)}
{!isLoading &&
items.map((expense) => (
<tr key={expense.id} className="odd">
<td className="sorting_1" colSpan={2}>
<div className="d-flex justify-content-start align-items-center user-name ms-6">
<span>{formatUTCToLocalTime(expense.createdAt)}</span>
</div>
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
{expense.expensesType?.name || "N/A"}
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
{expense.paymentMode?.name || "N/A"}
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0 "
firstName={expense.paidBy?.firstName}
lastName={expense.paidBy?.lastName}
/>
<span>
{`${expense.paidBy?.firstName ?? ""} ${
expense.paidBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</td>
<td className="d-none d-md-table-cell">{expense.amount}</td>
<td>
<span
style={{
backgroundColor: expense.status?.color || "#e2e3e5",
color: "#ffff",
padding: "2px 8px",
borderRadius: "0.375rem",
fontSize: "0.75rem",
fontWeight: 500,
}}
>
{expense.status?.name || "Unknown"}
</span>
</td>
<td>
<span
className="cursor-pointer"
onClick={() =>
setViewExpense({ expenseId: expense.id, view: true })
}
>
<i className="bx bx-show "></i>
</span>
</td>
</tr>
))}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> {!isLoading && items.length > 0 && totalPages > 1 && (
</div> <nav aria-label="Page ">
) <ul className="pagination pagination-sm justify-content-end py-1 mx-1">
} <li
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
>
<button
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo;
</button>
</li>
export default ExpenseList {[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(index + 1)}
>
{index + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(currentPage + 1)}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
</div>
);
};
export default ExpenseList;

View File

@ -1,27 +1,36 @@
import { z } from 'zod'; import { z } from "zod";
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = [ const ALLOWED_TYPES = [
'application/pdf', "application/pdf",
'image/png', "image/png",
'image/jpg', "image/jpg",
'image/jpeg', "image/jpeg",
]; ];
export const ExpenseSchema = z.object({
export const ExpenseSchema = (expenseTypes) => {
return z
.object({
projectId: z.string().min(1, { message: "Project is required" }), projectId: z.string().min(1, { message: "Project is required" }),
expensesTypeId: z.string().min(1, { message: "Expense type is required" }), expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
paymentModeId: z.string().min(1, { message: "Payment mode is required" }), paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
paidById: z.string().min(1, { message: "Employee name is required" }), paidById: z.string().min(1, { message: "Employee name is required" }),
transactionDate: z.string().min(1, { message: "Date is required" }), transactionDate: z.string().min(1, { message: "Date is required" }),
transactionId: z.string().optional(), // if optional, else use .min(1) transactionId: z.string().optional(),
description: z.string().min(1, { message: "Description is required" }), description: z.string().min(1, { message: "Description is required" }),
location: z.string().min(1, { message: "Location is required" }), location: z.string().min(1, { message: "Location is required" }),
supplerName: z.string().min(1, { message: "Supplier name is required" }), supplerName: z.string().min(1, { message: "Supplier name is required" }),
amount: z.number().min(1, { message: "Amount must be at least 1" }).max(10000, { message: "Amount must not exceed 10,000" }), amount: z
noOfPersons: z.number().min(1, { message: "1 Employee at least required" }), .coerce
statusId: z.string().min(1, { message: "Please select status" }), .number({ invalid_type_error: "Amount is required and must be a number" })
.min(1, "Amount must be Enter")
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
message: "Amount must have at most 2 decimal places",
}),
noOfPersons: z.coerce
.number()
.optional(),
billAttachments: z billAttachments: z
.array( .array(
z.object({ z.object({
@ -37,30 +46,24 @@ export const ExpenseSchema = z.object({
}) })
) )
.nonempty({ message: "At least one file attachment is required" }), .nonempty({ message: "At least one file attachment is required" }),
})
.refine(
(data) => {
return !data.projectId || (data.paidById && data.paidById.trim() !== "");
},
{
message: "Please select who paid (employee)",
path: ["paidById"],
}
)
.superRefine((data, ctx) => {
const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "No. of Persons is required and must be at least 1",
path: ["noOfPersons"],
}); });
let payload=
{
"projectId": "2618f2ef-2823-11f0-9d9e-bc241163f504",
"expensesTypeId": "dd120bc4-ab0a-45ba-8450-5cd45ff221ca",
"paymentModeId": "ed667353-8eea-4fd1-8750-719405932480",
"paidById": "08dda7d8-014e-443f-858d-a55f4b484bc4",
"transactionDate": "2025-07-12T09:56:54.122Z",
"transactionId": "string",
"description": "string",
"location": "string",
"supplerName": "string",
"amount": 390,
"noOfPersons": 0,
"statusId": "297e0d8f-f668-41b5-bfea-e03b354251c8",
"billAttachments": [
{
"fileName": "string",
"base64Data": "string",
"contentType": "string",
"fileSize": 0,
"description": "string"
}
]
} }
});
};

View File

@ -0,0 +1,14 @@
import React from 'react'
import { useExpense } from '../../hooks/useExpense'
const ViewExpense = ({ExpenseId}) => {
console.log(ExpenseId)
const {} = useExpense(ExpenseId)
return (
<div className='container'>
</div>
)
}
export default ViewExpense

View File

@ -93,6 +93,76 @@ export const useContactTags = () => {
return { contactTags, loading, error }; return { contactTags, loading, error };
}; };
export const useExpenseType =()=>{
const {
data: ExpenseTypes = [],
isLoading: loading,
error,
} = useQuery({
queryKey: ["Expense Type"],
queryFn: async () => {
const res = await MasterRespository.getExpenseType()
return res.data;
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to fetch Expense Type",
"error"
);
},
});
return { ExpenseTypes, loading, error };
}
export const usePaymentMode =()=>{
const {
data: PaymentModes = [],
isLoading: loading,
error,
} = useQuery({
queryKey: ["Payment Mode"],
queryFn: async () => {
const res = await MasterRespository.getPaymentMode()
return res.data;
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to fetch Payment Mode",
"error"
);
},
});
return { PaymentModes, loading, error };
}
export const useExpenseStatus =()=>{
const {
data: ExpenseStatus = [],
isLoading: loading,
error,
} = useQuery({
queryKey: ["Expense Status"],
queryFn: async () => {
const res = await MasterRespository.getExpenseStatus()
return res.data;
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to fetch Expense Status",
"error"
);
},
});
return { ExpenseStatus, loading, error };
}
// ===Application Masters Query================================================= // ===Application Masters Query=================================================
const fetchMasterData = async (masterType) => { const fetchMasterData = async (masterType) => {

View File

@ -1,30 +1,68 @@
import { useMutation } from "@tanstack/react-query" import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import ExpenseRepository from "../repositories/ExpsenseRepository" import ExpenseRepository from "../repositories/ExpsenseRepository"
import showToast from "../services/toastService" import showToast from "../services/toastService"
import { queryClient } from "../layouts/AuthLayout";
// -------------------Query------------------------------------------------------ // -------------------Query------------------------------------------------------
export const useExpenseList = ()=>{ export const useExpenseList=( pageSize, pageNumber, filter ) =>{
return useQuery({
queryKey: ["expenses", pageNumber, pageSize, filter],
queryFn: async() =>
await ExpenseRepository.GetExpenseList( pageSize, pageNumber, filter ).then((res) => res.data),
keepPreviousData: true,
});
} }
export const useExpense =(ExpenseId)=>{
return useQuery({
queryKey:["Expense",ExpenseId],
queryFn:async()=>await ExpenseRepository.GetExpenseDetails(ExpenseId)
})
}
// ---------------------------Mutation--------------------------------------------- // ---------------------------Mutation---------------------------------------------
export const useCreateExpnse =()=>{ export const useCreateExpnse =(onSuccessCallBack)=>{
const queryClient = useQueryClient()
return useMutation({ return useMutation({
mutationFn:(payload)=>{ mutationFn: async(payload)=>{
await ExpenseRepository.CreateExpense(payload) await ExpenseRepository.CreateExpense(payload)
}, },
onSuccess:(_,variables)=>{ onSuccess:(_,variables)=>{
showToast("Expense Created Successfully","success") showToast("Expense Created Successfully","success")
queryClient.invalidateQueries({queryKey:["expenses"]})
if (onSuccessCallBack) onSuccessCallBack();
}, },
onError:(error)=>{ onError:(error)=>{
showToast(error.message || "Something went wrong please try again !","success") showToast(error.message || "Something went wrong please try again !","success")
} }
}) })
} }
const demoExpense = {
projectId: "proj_123",
expensesTypeId: "1", // corresponds to Travel
paymentModeId: "pm_456",
paidById: "emp_789",
transactionDate: "2025-07-21",
transactionId: "TXN-001234",
description: "Taxi fare from airport to hotel",
location: "New York",
supplerName: "City Taxi Service",
amount: 45.50,
noOfPersons: 2,
billAttachments: [
{
fileName: "receipt.pdf",
base64Data: "JVBERi0xLjQKJcfs...", // truncated base64 example string
contentType: "application/pdf",
fileSize: 450000, // less than 5MB
description: "Taxi receipt",
},
],
};

View File

@ -1,20 +1,34 @@
import React, { useState } from "react"; import React, { createContext, useContext, useState } from "react";
import ExpenseList from "../../components/Expenses/ExpenseList"; import ExpenseList from "../../components/Expenses/ExpenseList";
import CreateExpense from "../../components/Expenses/CreateExpense";
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 CreateExpense from "../../components/Expenses/createExpense";
export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext);
const ExpensePage = () => { const ExpensePage = () => {
const[IsNewExpen,setNewExpense] = useState(false) const [isNewExpense, setNewExpense] = useState(false);
const [viewExpense, setViewExpense] = useState({
expenseId: null,
view: false,
});
const contextValue = {
setViewExpense,
};
return ( return (
<ExpenseContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
<Breadcrumb <Breadcrumb
data={[ data={[
{ label: "Home", link: "/" }, { label: "Home", link: "/" },
{ label: "Expense", link: null }, { label: "Expense", link: null },
]} ]}
></Breadcrumb> />
<div className="card my-1 text-start px-0"> <div className="card my-1 text-start px-0">
<div className="card-body py-1 px-1"> <div className="card-body py-1 px-1">
<div className="row"> <div className="row">
@ -27,23 +41,50 @@ const ExpensePage = () => {
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
/> />
</label> </label>
<i class='bx bx-slider-alt'></i> <i className="bx bx-slider-alt ms-2"></i>
</div> </div>
<div className="col-7 col-sm-8 text-end gap-2"> <div className="col-7 col-sm-8 text-end gap-2">
<button
<button type="button" className="btn btn-sm btn-primary me-2" onClick={()=>setNewExpense(true)}> type="button"
<span class="icon-base bx bx-plus-circle me-1"></span>Add New className="btn btn-sm btn-primary me-2"
onClick={() => setNewExpense(true)}
>
<span className="icon-base bx bx-plus-circle me-1"></span>
Add New
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ExpenseList /> <ExpenseList />
<GlobalModel isOpen={IsNewExpen} size="lg" closeModal={()=>setNewExpense(false)}> {isNewExpense && (
<CreateExpense/> <GlobalModel
isOpen={isNewExpense}
size="lg"
closeModal={() => setNewExpense(false)}
>
<CreateExpense closeModal={() => setNewExpense(false)} />
</GlobalModel> </GlobalModel>
)}
{viewExpense.view && (<GlobalModel
isOpen={viewExpense.view}
size="lg"
closeModal={() =>
setViewExpense({
expenseId: null,
view: false,
})
}
>
<ViewExpense ExpenseId={viewExpense.expenseId}/>
</GlobalModel>) }
</div> </div>
</ExpenseContext.Provider>
); );
}; };

View File

@ -2,9 +2,16 @@ import { api } from "../utils/axiosClient";
const ExpenseRepository = { const ExpenseRepository = {
GetExpenseList:()=>api.get("/api/expanse/list"), GetExpenseList: ( pageSize, pageNumber, filter ) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}`);
},
GetExpenseDetails:(id)=>api.get(`/api/Expanse/details/${id}`), GetExpenseDetails:(id)=>api.get(`/api/Expanse/details/${id}`),
CreateExpense:(data)=>api.post("/api/Expanse/create",data), CreateExpense:(data)=>api.post("/api/Expense/create",data),
UpdateExpense:(id)=>api.put(`/api/Expanse/edit/${id}`), UpdateExpense:(id)=>api.put(`/api/Expanse/edit/${id}`),
DeleteExpense:(id)=>api.delete(`/api/Expanse/edit/${id}`) DeleteExpense:(id)=>api.delete(`/api/Expanse/edit/${id}`)

View File

@ -68,7 +68,7 @@ export const formatNumber = (num) => {
return Number.isInteger(num) ? num : num.toFixed(2); return Number.isInteger(num) ? num : num.toFixed(2);
}; };
export const formatUTCToLocalTime = (datetime) =>{ export const formatUTCToLocalTime = (datetime) =>{
return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A"); return moment.utc(datetime).local().format("DD MMMM YYYY hh:mm A");
} }
export const getCompletionPercentage = (completedWork, plannedWork)=> { export const getCompletionPercentage = (completedWork, plannedWork)=> {