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

Merge pull request 'Feature#794_ActionExpense : Partially Implemented Expense Action' (#279) from Feature#794_ActionExpense into Feature_Expense

Browse Source 
Reviewed-on: #279
Merged
This commit is contained in:
pramod.mahajan 2025-07-22 12:07:15 +00:00
commit 9bbd2dd014
4 changed files with 116 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Expenses/CreateExpense.jsx
View File

@ -254,6 +254,11 @@ const CreateExpense = ({closeModal}) => {
))
)}
</select>
{errors.paidById && (
<small className="danger-text">
{errors.paidById.message}
</small>
)}
</div>
</div>

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

@ -19,9 +19,10 @@ const ExpenseList = () => {
startDate: null,
endDate: null,
};
const { data, isLoading, isError } = useExpenseList(ITEMS_PER_PAGE, currentPage, filter);
if (isLoading) return <div>Loading...</div>;
const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
if (isInitialLoading) return <div>Loading...</div>;
const items = data.data ?? [];
const totalPages = data?.totalPages ?? 1;
const hasMore = currentPage < totalPages;
@ -37,12 +38,13 @@ const ExpenseList = () => {
<div
id="DataTables_Table_0_wrapper"
className="dataTables_wrapper no-footer"
>
<table
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
id="DataTables_Table_0"
aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
id="horizontal-example"
>
<thead>
<tr>
@ -131,7 +133,7 @@ const ExpenseList = () => {
</tr>
)}
{!isLoading && items.length === 0 && (
{!isInitialLoading && items.length === 0 && (
<tr>
<td colSpan={7} className="text-center py-3">
No expenses found.
@ -139,12 +141,12 @@ const ExpenseList = () => {
</tr>
)}
{!isLoading &&
{!isInitialLoading &&
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>
<span>{formatUTCToLocalTime(expense.transactionDate)}</span>
</div>
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
@ -168,7 +170,7 @@ const ExpenseList = () => {
</span>
</div>
</td>
<td className="d-none d-md-table-cell"><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>
<span
style={{
@ -183,22 +185,37 @@ const ExpenseList = () => {
{expense.status?.name || "Unknown"}
</span>
</td>
<td>
<span
<td >
<div className="d-flex justify-content-center align-items-center gap-2">
<span
className="cursor-pointer"
onClick={() =>
setViewExpense({ expenseId: expense, view: true })
}
>
<i className="bx bx-show "></i>
<i className="bx bx-show text-primary "></i>
</span>
<span
className="cursor-pointer"
>
<i className='bx bx-edit bx-sm text-secondary'></i>
</span>
<span
className="cursor-pointer"
>
<i className='bx bx-trash bx-sm text-danger' ></i>
</span>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{!isLoading && items.length > 0 && (
{!isInitialLoading && items.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}

5
src/components/Expenses/ExpenseSchema.js
View File

@ -67,3 +67,8 @@ export const ExpenseSchema = (expenseTypes) => {
}
});
};
export const ActionSchema = z.object({
comment : z.string().min(1,{message:"Please leave comment"}),
selectedStatus: z.string().min(1, { message: "Please select a status" }),
})

133
src/hooks/useExpense.js
View File

@ -1,68 +1,89 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import ExpenseRepository from "../repositories/ExpsenseRepository"
import showToast from "../services/toastService"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import ExpenseRepository from "../repositories/ExpsenseRepository";
import showToast from "../services/toastService";
import { queryClient } from "../layouts/AuthLayout";
// -------------------Query------------------------------------------------------
export const useExpenseList=( pageSize, pageNumber, filter ) =>{
return useQuery({
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),
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)
})
}
};
export const useExpense = (ExpenseId) => {
return useQuery({
queryKey: ["Expense", ExpenseId],
queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId),
});
};
// ---------------------------Mutation---------------------------------------------
export const useCreateExpnse =(onSuccessCallBack)=>{
const queryClient = useQueryClient()
return useMutation({
mutationFn: async(payload)=>{
await ExpenseRepository.CreateExpense(payload)
},
onSuccess:(_,variables)=>{
showToast("Expense Created Successfully","success")
queryClient.invalidateQueries({queryKey:["expenses"]})
if (onSuccessCallBack) onSuccessCallBack();
},
onError:(error)=>{
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",
export const useCreateExpnse = (onSuccessCallBack) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) => {
await ExpenseRepository.CreateExpense(payload);
},
],
onSuccess: (_, variables) => {
showToast("Expense Created Successfully", "success");
queryClient.invalidateQueries({ queryKey: ["expenses"] });
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.message || "Something went wrong please try again !",
"error"
);
},
});
};
export const useActionOnExpense = (onSuccessCallBack) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) => {
const response = await ExpenseRepository.ActionOnExpense(payload);
return response.data;
},
onSuccess: (updatedExpense, variables) => {
showToast("Expense updated successfully", "success");
queryClient.setQueriesData(
{
queryKey: ["expenses"],
exact: false,
},
(oldData) => {
if (!oldData) return oldData;
return {
...oldData,
data: oldData.data.map((item) =>
item.id === updatedExpense.id
? {
...item,
nextStatus: updatedExpense.nextStatus,
status: updatedExpense.status,
}
: item
),
};
}
);
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.message || "Something went wrong, please try again!",
"error"
);
},
});
};