Loading...
;
- const items = data.data ?? [];
+ const { data, isLoading, isError,isInitialLoading,error,isFetching } = useExpenseList(10, currentPage, filter);
+ if (isInitialLoading ) return
- {isLoading && (
+ {/* {isLoading && (
|
Loading...
@@ -139,7 +142,7 @@ const ExpenseList = () => {
No expenses found.
|
- )}
+ )} */}
{!isInitialLoading &&
items.map((expense) => (
@@ -170,19 +173,13 @@ const ExpenseList = () => {
- {expense.amount} |
+ {expense?.amount} |
- {expense.status?.name || "Unknown"}
+
+ {expense.status?.displayName || "Unknown"}
|
@@ -197,14 +194,12 @@ const ExpenseList = () => {
setManageExpenseModal({IsOpen:true,expenseId:expense.id})}
>
-
diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js
index 99b75633..705efe6b 100644
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/src/components/Expenses/ExpenseSchema.js
@@ -35,14 +35,16 @@ export const ExpenseSchema = (expenseTypes) => {
.array(
z.object({
fileName: z.string().min(1, { message: "Filename is required" }),
- base64Data: z.string().min(1, { message: "File data is required" }),
+ base64Data: z.string().nullable(),
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
}),
+ documentId:z.string().optional(),
fileSize: z.number().max(MAX_FILE_SIZE, {
message: "File size must be less than or equal to 5MB",
}),
description: z.string().optional(),
+ isActive:z.boolean().default(true)
})
)
.nonempty({ message: "At least one file attachment is required" }),
@@ -68,6 +70,21 @@ export const ExpenseSchema = (expenseTypes) => {
});
};
+export const defaultExpense = {
+ projectId: "",
+ expensesTypeId: "",
+ paymentModeId: "",
+ paidById: "",
+ transactionDate: "",
+ transactionId: "",
+ description: "",
+ location: "",
+ supplerName: "",
+ amount: "",
+ noOfPersons: "",
+ billAttachments: [],
+ }
+
export const ActionSchema = z.object({
comment : z.string().min(1,{message:"Please leave comment"}),
selectedStatus: z.string().min(1, { message: "Please select a status" }),
diff --git a/src/components/Expenses/ExpenseSkeleton.jsx b/src/components/Expenses/ExpenseSkeleton.jsx
new file mode 100644
index 00000000..904c2e9d
--- /dev/null
+++ b/src/components/Expenses/ExpenseSkeleton.jsx
@@ -0,0 +1,218 @@
+import React from "react";
+
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+
+);
+
+
+const ExpenseSkeleton = () => {
+ return (
+
+
+
+
+
+ {[...Array(5)].map((_, idx) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+
+ ))}
+
+ {[...Array(6)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {[...Array(2)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {[...Array(2)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+ |
+ Date Time
+ |
+
+ Expense Type
+ |
+
+ Payment Mode
+ |
+ Paid By |
+ Amount |
+ Status |
+ Action |
+
+
+
+
+ {[...Array(rows)].map((_, idx) => (
+
+ {/* Date Time colSpan=2 */}
+ |
+
+
+
+ |
+
+ {/* Expense Type */}
+
+
+ |
+
+ {/* Payment Mode */}
+
+
+ |
+
+ {/* Paid By (Avatar + name) */}
+
+
+
+
+
+ |
+
+ {/* Amount */}
+
+
+ |
+
+ {/* Status */}
+
+
+ |
+
+ {/* Action (icons) */}
+
+
+ {[...Array(3)].map((__, i) => (
+
+ ))}
+
+ |
+
+ ))}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/Expenses/CreateExpense.jsx b/src/components/Expenses/ManageExpense.jsx
similarity index 72%
rename from src/components/Expenses/CreateExpense.jsx
rename to src/components/Expenses/ManageExpense.jsx
index cddc79dd..23c13250 100644
--- a/src/components/Expenses/CreateExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -1,7 +1,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
-import { ExpenseSchema } from "./ExpenseSchema";
+import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
import { formatFileSize } from "../../utils/appUtils";
import { useProjectName } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
@@ -16,9 +16,19 @@ import {
useEmployeesByProject,
} from "../../hooks/useEmployees";
import Avatar from "../common/Avatar";
-import { useCreateExpnse } from "../../hooks/useExpense";
+import {
+ useCreateExpnse,
+ useExpense,
+ useUpdateExpense,
+} from "../../hooks/useExpense";
+import ExpenseSkeleton from "./ExpenseSkeleton";
-const CreateExpense = ({closeModal}) => {
+const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
+ const {
+ data,
+ isLoading,
+ error: ExpenseErrorLoad,
+ } = useExpense(expenseToEdit);
const [ExpenseType, setExpenseType] = useState();
const dispatch = useDispatch();
const {
@@ -36,20 +46,7 @@ const CreateExpense = ({closeModal}) => {
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
- defaultValues: {
- projectId: "",
- expensesTypeId: "",
- paymentModeId: "",
- paidById: "",
- transactionDate: "",
- transactionId: "",
- description: "",
- location: "",
- supplerName: "",
- amount: "",
- noOfPersons: "",
- billAttachments: [],
- },
+ defaultValues: defaultExpense,
});
const selectedproject = watch("projectId");
@@ -90,6 +87,7 @@ const CreateExpense = ({closeModal}) => {
contentType: file.type,
fileSize: file.size,
description: "",
+ isActive:true
};
})
);
@@ -115,35 +113,95 @@ const CreateExpense = ({closeModal}) => {
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
- reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix
+ reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = (error) => reject(error);
});
const removeFile = (index) => {
- const newFiles = files.filter((_, i) => i !== index);
- setValue("billAttachments", newFiles, { shouldValidate: true });
+ if (expenseToEdit) {
+ const newFiles = files.map((file, i) => {
+ if (file.documentId !== index) return file;
+ return {
+ ...file,
+ isActive: false,
+ };
+ });
+ setValue("billAttachments", newFiles, { shouldValidate: true });
+ } else {
+ const newFiles = files.filter((_, i) => i !== index);
+ setValue("billAttachments", newFiles, { shouldValidate: true });
+ }
};
- const {mutate:CreateExpense,isPending} = useCreateExpnse(()=>{
+ useEffect(() => {
+ if (expenseToEdit && data) {
+ reset({
+ projectId: data.project.id || "",
+ expensesTypeId: data.expensesType.id || "",
+ paymentModeId: data.paymentMode.id || "",
+ paidById: data.paidBy.id || "",
+ transactionDate: data.transactionDate?.slice(0, 10) || "",
+ transactionId: data.transactionId || "",
+ description: data.description || "",
+ location: data.location || "",
+ supplerName: data.supplerName || "",
+ amount: data.amount || "",
+ noOfPersons: data.noOfPersons || "",
+ billAttachments: data.documents
+ ? data.documents.map((doc) => ({
+ fileName: doc.fileName,
+ base64Data: null,
+ contentType: doc.contentType,
+ documentId: doc.documentId,
+ fileSize: 0,
+ description: "",
+ preSignedUrl: doc.preSignedUrl,
+ isActive: doc.isActive || true,
+ }))
+ : [],
+ });
+ }
+ }, [data, reset, employees]);
+ const { mutate: ExpenseUpdate, isPending } = useUpdateExpense(() =>
handleClose()
- })
+ );
+ const { mutate: CreateExpense, isPending: createPending } = useCreateExpnse(
+ () => {
+ handleClose();
+ }
+ );
const onSubmit = (payload) => {
- console.log("Form Data:", payload);
-
- CreateExpense(payload)
+ if (expenseToEdit) {
+ const editPayload = { ...payload, id: data.id };
+ ExpenseUpdate({ id: data.id, payload: editPayload });
+ } else {
+ CreateExpense(payload);
+ }
};
const ExpenseTypeId = watch("expensesTypeId");
useEffect(() => {
setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
+ return () => reset(defaultExpense);
}, [ExpenseTypeId]);
- const handleClose =()=>{
- reset()
- closeModal()
- }
+ const handleClose = () => {
+ reset();
+ closeModal();
+ };
+ if (
+ EmpLoading ||
+ StatusLoadding ||
+ projectLoading ||
+ ExpenseLoading ||
+ isLoading
+ )
+ return ;
+
return (
- Create New Expense
+
+ {expenseToEdit ? "Update Expense " : "Create New Expense"}
+
|