Merge pull request 'Feature#796_EditExpense : Edit Expense Request' (#282) from Feature#796_EditExpense into Feature_Expense
Reviewed-on: #282 mwrged
This commit is contained in:
commit
eaf49b513d
@ -27,6 +27,7 @@
|
||||
<link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/assets/css/core-extend.css" />
|
||||
<link rel="stylesheet" href="/assets/css/default.css" />
|
||||
<link rel="stylesheet" href="/assets/css/skeleton.css" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
|
||||
|
||||
32
public/assets/css/skeleton.css
vendored
Normal file
32
public/assets/css/skeleton.css
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
/* skeleton.css */
|
||||
.skeleton {
|
||||
background-color: #e2e8f0; /* Tailwind's gray-300 */
|
||||
border-radius: 0.25rem; /* Tailwind's rounded */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; left: -150px;
|
||||
height: 100%;
|
||||
width: 150px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
left: -150px;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
@ -5,9 +5,11 @@ import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
|
||||
const ExpenseList = () => {
|
||||
const { setViewExpense } = useExpenseContext();
|
||||
const { setViewExpense,setManageExpenseModal } = useExpenseContext();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 10;
|
||||
|
||||
@ -21,9 +23,10 @@ const ExpenseList = () => {
|
||||
};
|
||||
|
||||
|
||||
const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
|
||||
if (isInitialLoading) return <div>Loading...</div>;
|
||||
const items = data.data ?? [];
|
||||
const { data, isLoading, isError,isInitialLoading,error,isFetching } = useExpenseList(10, currentPage, filter);
|
||||
if (isInitialLoading ) return <ExpenseTableSkeleton/>;
|
||||
if (isError) return <div>{error}</div>;
|
||||
const items = data?.data ?? [];
|
||||
const totalPages = data?.totalPages ?? 1;
|
||||
const hasMore = currentPage < totalPages;
|
||||
|
||||
@ -125,7 +128,7 @@ const ExpenseList = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading && (
|
||||
{/* {isLoading && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center py-3">
|
||||
Loading...
|
||||
@ -139,7 +142,7 @@ const ExpenseList = () => {
|
||||
No expenses found.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{!isInitialLoading &&
|
||||
items.map((expense) => (
|
||||
@ -170,19 +173,13 @@ const ExpenseList = () => {
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: expense.status?.color || "#e2e3e5",
|
||||
color: "#ffff",
|
||||
padding: "2px 8px",
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}
|
||||
>
|
||||
{expense.status?.name || "Unknown"}
|
||||
|
||||
{expense.status?.displayName || "Unknown"}
|
||||
</span>
|
||||
</td>
|
||||
<td >
|
||||
@ -197,14 +194,12 @@ const ExpenseList = () => {
|
||||
</span>
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
|
||||
onClick={()=>setManageExpenseModal({IsOpen:true,expenseId:expense.id})}
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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" }),
|
||||
|
||||
218
src/components/Expenses/ExpenseSkeleton.jsx
Normal file
218
src/components/Expenses/ExpenseSkeleton.jsx
Normal file
@ -0,0 +1,218 @@
|
||||
import React from "react";
|
||||
|
||||
|
||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
||||
<div
|
||||
className={`skeleton mb-2 ${className}`}
|
||||
style={{
|
||||
height,
|
||||
width,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
|
||||
|
||||
const ExpenseSkeleton = () => {
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<div className="d-flex justify-content-center">
|
||||
<SkeletonLine height={20} width="200px" />
|
||||
</div>
|
||||
|
||||
{[...Array(5)].map((_, idx) => (
|
||||
<div className="row my-2" key={idx}>
|
||||
<div className="col-md-6">
|
||||
<SkeletonLine />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<SkeletonLine />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-12">
|
||||
<SkeletonLine height={60} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-12">
|
||||
<SkeletonLine height={120} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center gap-2 mt-3">
|
||||
<SkeletonLine height={35} width="100px" />
|
||||
<SkeletonLine height={35} width="100px" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseSkeleton;
|
||||
|
||||
|
||||
|
||||
|
||||
export const ExpenseDetailsSkeleton = () => {
|
||||
return (
|
||||
<div className="container px-3">
|
||||
<div className="row mb-3">
|
||||
<div className="d-flex justify-content-center mb-3">
|
||||
<SkeletonLine height={20} width="180px" className="mb-2" />
|
||||
</div>
|
||||
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div className="col-12 col-md-4 mb-3" key={`row-1-${i}`}>
|
||||
<SkeletonLine height={14} className="mb-1" />
|
||||
<SkeletonLine />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div className="col-12 col-md-4 mb-3" key={`row-2-${i}`}>
|
||||
<SkeletonLine height={14} className="mb-1" />
|
||||
<SkeletonLine />
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
|
||||
<div className="col-12 my-2">
|
||||
<SkeletonLine height={14} width="100px" className="mb-2" />
|
||||
{[...Array(2)].map((_, i) => (
|
||||
<div
|
||||
className="list-group-item d-flex align-items-center mb-2"
|
||||
key={i}
|
||||
>
|
||||
<div
|
||||
className="rounded me-2"
|
||||
style={{
|
||||
height: "50px",
|
||||
width: "80px",
|
||||
backgroundColor: "#dcdcdc",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<div className="w-100">
|
||||
<SkeletonLine height={14} width="60%" className="mb-1" />
|
||||
<SkeletonLine height={14} width="20%" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<hr className="divider my-1" />
|
||||
|
||||
<div className="col-12 mb-3">
|
||||
<SkeletonLine height={14} width="80px" className="mb-1" />
|
||||
<SkeletonLine height={60} className="mb-2" />
|
||||
<div className="d-flex gap-2 flex-wrap">
|
||||
{[...Array(2)].map((_, i) => (
|
||||
<SkeletonLine
|
||||
key={i}
|
||||
height={30}
|
||||
width="100px"
|
||||
className="rounded"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
|
||||
<div
|
||||
className={`skeleton ${className}`}
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
export const ExpenseTableSkeleton = ({ rows = 5 }) => {
|
||||
return (
|
||||
<table
|
||||
className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>
|
||||
<div className="text-start ms-6">Date Time</div>
|
||||
</th>
|
||||
<th className="d-none d-sm-table-cell">
|
||||
<div className="text-start ms-5">Expense Type</div>
|
||||
</th>
|
||||
<th className="d-none d-sm-table-cell">
|
||||
<div className="text-start ms-5">Payment Mode</div>
|
||||
</th>
|
||||
<th className="d-none d-sm-table-cell">Paid By</th>
|
||||
<th className="d-none d-md-table-cell">Amount</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{[...Array(rows)].map((_, idx) => (
|
||||
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* Date Time colSpan=2 */}
|
||||
<td colSpan={2} className="sorting_1">
|
||||
<div className="d-flex justify-content-start align-items-center user-name ms-6">
|
||||
<SkeletonCell width="120px" height={18} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Expense Type */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Payment Mode */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Paid By (Avatar + name) */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Amount */}
|
||||
<td className="d-none d-md-table-cell text-end">
|
||||
<SkeletonCell width="60px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Status */}
|
||||
<td>
|
||||
<SkeletonCell width="80px" height={22} className="rounded" />
|
||||
</td>
|
||||
|
||||
{/* Action (icons) */}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
{[...Array(3)].map((__, i) => (
|
||||
<SkeletonCell
|
||||
key={i}
|
||||
width={20}
|
||||
height={20}
|
||||
className="rounded"
|
||||
style={{ display: "inline-block" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
@ -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 <ExpenseSkeleton />;
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<h5 className="m-0">Create New Expense</h5>
|
||||
<h5 className="m-0">
|
||||
{expenseToEdit ? "Update Expense " : "Create New Expense"}
|
||||
</h5>
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row my-2">
|
||||
<div className="col-md-6">
|
||||
@ -248,16 +306,13 @@ const CreateExpense = ({closeModal}) => {
|
||||
) : (
|
||||
employees?.map((emp) => (
|
||||
<option key={emp.id} value={emp.id}>
|
||||
|
||||
{`${emp.firstName} ${emp.lastName} `}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.paidById && (
|
||||
<small className="danger-text">
|
||||
{errors.paidById.message}
|
||||
</small>
|
||||
{errors.paidById && (
|
||||
<small className="danger-text">{errors.paidById.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -392,9 +447,7 @@ const CreateExpense = ({closeModal}) => {
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-12">
|
||||
<label className="form-label ">
|
||||
Upload Bill{" "}
|
||||
</label>
|
||||
<label className="form-label ">Upload Bill </label>
|
||||
|
||||
<div
|
||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||
@ -425,35 +478,52 @@ const CreateExpense = ({closeModal}) => {
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
|
||||
{files.length > 0 && (
|
||||
<div className="d-block">
|
||||
{files.map((file, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
class="d-flex justify-content-between text-start p-1"
|
||||
>
|
||||
<div>
|
||||
<span className="mb-0 text-secondary small d-block">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small d-block">
|
||||
{formatFileSize(file.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
||||
onClick={() => removeFile(idx)}
|
||||
></i>
|
||||
</a>
|
||||
))}
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (expenseToEdit) {
|
||||
return file.isActive;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
className="d-flex justify-content-between text-start p-1"
|
||||
href={file.preSignedUrl || "#"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div>
|
||||
<span className="mb-0 text-secondary small d-block">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small d-block">
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Array.isArray(errors.billAttachments) &&
|
||||
errors.billAttachments.map((fileError, index) => (
|
||||
<div key={index} className="danger-text small mt-1">
|
||||
{fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message}
|
||||
{
|
||||
(fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message ||
|
||||
fileError?.base64Data?.message,
|
||||
fileError?.documentId.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -461,10 +531,19 @@ const CreateExpense = ({closeModal}) => {
|
||||
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
{" "}
|
||||
<button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
|
||||
{isPending ? "Please Wait...":"Submit"}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm mt-3"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
|
||||
<button
|
||||
type="reset"
|
||||
disabled={isPending || createPending}
|
||||
onClick={handleClose}
|
||||
className="btn btn-secondary btn-sm mt-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
@ -473,5 +552,4 @@ const CreateExpense = ({closeModal}) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateExpense;
|
||||
|
||||
export default ManageExpense;
|
||||
@ -5,12 +5,13 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ActionSchema } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
|
||||
const ViewExpense = ({ ExpenseId }) => {
|
||||
const { data, isLoading, isError, error } = useExpense(ExpenseId);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = useExpenseContext();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -36,16 +37,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
MakeAction(Payload);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ minHeight: "300px" }}
|
||||
>
|
||||
<div className="fs-5 text-muted">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isLoading) return <ExpenseDetailsSkeleton/>
|
||||
const handleImageLoad = (id) => {
|
||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||
};
|
||||
@ -59,7 +51,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction Date :
|
||||
@ -70,7 +62,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Expense Type :
|
||||
@ -79,7 +71,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Supplier :
|
||||
@ -88,14 +80,14 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
|
||||
<div className="text-muted">₹ {data.amount}</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Payment Mode :
|
||||
@ -104,7 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Paid By :
|
||||
@ -115,78 +107,72 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-sm-6 col-md-4 mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="col-12 text-start col-md-4 mb-3">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Status :</label>
|
||||
<span
|
||||
className="badge"
|
||||
style={{ backgroundColor: data.status.color }}
|
||||
>
|
||||
{data.status.displayName}
|
||||
|
||||
<span className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
|
||||
{data?.status?.displayName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-sm-6 col-md-4 mb-3">
|
||||
<div className="d-flex">
|
||||
<div className="col-12 text-start d-flex col-md-4 mb-3">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Pre-Approved :
|
||||
</label>
|
||||
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted text-start">{data.project.name}</div>
|
||||
<div className="text-muted text-start">{data?.project?.name}</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Created By :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data.createdBy.firstName} {data.createdBy.lastName}
|
||||
{data?.createdBy?.firstName} {data?.createdBy?.lastName}
|
||||
</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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data.createdAt, true)}
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-start">
|
||||
<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 className="col-12 my-2 text-start ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Attachement :
|
||||
</label>
|
||||
{data.documents?.map((doc) => (
|
||||
<a
|
||||
{data?.documents && data?.documents?.map((doc) => (
|
||||
<div
|
||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||
key={doc.id}
|
||||
>
|
||||
<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" }}
|
||||
>
|
||||
{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] && (
|
||||
@ -194,7 +180,6 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={doc.thumbPreSignedUrl}
|
||||
alt={doc.fileName}
|
||||
@ -216,12 +201,12 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
|
||||
<div className="w-100">
|
||||
<p className="mb-0">{doc.fileName}</p>
|
||||
<small className="mb-0 small">{doc.fileName}</small>
|
||||
<div className="d">
|
||||
<i className="bx bx-cloud-download cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -257,7 +242,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{status.displayName || status.name}
|
||||
{status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -16,18 +16,16 @@ export const useExpenseList = (pageSize, pageNumber, filter) => {
|
||||
};
|
||||
|
||||
export const useExpense = (ExpenseId) => {
|
||||
|
||||
console.log("ExpenseId:", ExpenseId, "Enabled:", ExpenseId !== undefined && ExpenseId !== null);
|
||||
return useQuery({
|
||||
queryKey: ["Expense", ExpenseId],
|
||||
queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
|
||||
queryFn: async () =>
|
||||
await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
|
||||
(res) => res.data
|
||||
),
|
||||
enabled: !!ExpenseId,
|
||||
enabled: !!ExpenseId,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// ---------------------------Mutation---------------------------------------------
|
||||
|
||||
export const useCreateExpnse = (onSuccessCallBack) => {
|
||||
@ -37,8 +35,8 @@ export const useCreateExpnse = (onSuccessCallBack) => {
|
||||
await ExpenseRepository.CreateExpense(payload);
|
||||
},
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
||||
showToast("Expense Created Successfully", "success");
|
||||
queryClient.invalidateQueries({ queryKey: ["expenses"] });
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
@ -50,6 +48,68 @@ export const useCreateExpnse = (onSuccessCallBack) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateExpense = (onSuccessCallBack) => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await ExpenseRepository.UpdateExpense(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (updatedExpense, variables) => {
|
||||
// queryClient.setQueriesData(
|
||||
// {queryKey:['expenses'],exact:true},
|
||||
// (oldData) => {
|
||||
// if (!oldData || !oldData.data) return oldData;
|
||||
|
||||
// const updatedList = oldData.data.map((expense) => {
|
||||
// if (expense.id !== variables.id) return expense;
|
||||
|
||||
// return {
|
||||
// ...expense,
|
||||
// project:
|
||||
// expense.project.id !== updatedExpense.project.id
|
||||
// ? updatedExpense.project
|
||||
// : expense.project,
|
||||
// expensesType:
|
||||
// expense.expensesType.id !== updatedExpense.expensesType.id
|
||||
// ? updatedExpense.expensesType
|
||||
// : expense.expensesType,
|
||||
// paymentMode:
|
||||
// expense.paymentMode.id !== updatedExpense.paymentMode.id
|
||||
// ? updatedExpense.paymentMode
|
||||
// : expense.paymentMode,
|
||||
// paidBy:
|
||||
// expense.paidBy.id !== updatedExpense.paidBy.id
|
||||
// ? updatedExpense.paidBy
|
||||
// : expense.paidBy,
|
||||
// createdBy:
|
||||
// expense.createdBy.id !== updatedExpense.createdBy.id
|
||||
// ? updatedExpense.createdBy
|
||||
// : expense.createdBy,
|
||||
// createdAt: updatedExpense.createdAt,
|
||||
// status: updatedExpense.status,
|
||||
// nextStatus: updatedExpense.nextStatus,
|
||||
// preApproved: updatedExpense.preApproved,
|
||||
// transactionDate: updatedExpense.transactionDate,
|
||||
// amount: updatedExpense.amount,
|
||||
// };
|
||||
// });
|
||||
|
||||
// return {
|
||||
// ...oldData,
|
||||
// data: updatedList,
|
||||
// };
|
||||
// }
|
||||
// );
|
||||
queryClient.removeQueries({queryKey:['Expense', variables.id]});
|
||||
queryClient.invalidateQueries({queryKey:['Expenses']})
|
||||
showToast('Expense updated Successfully', 'success');
|
||||
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useActionOnExpense = (onSuccessCallBack) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import React, { createContext, useContext, useState } from "react";
|
||||
|
||||
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 GlobalModel from "../../components/common/GlobalModel";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import ManageExpense from "../../components/Expenses/ManageExpense";
|
||||
|
||||
export const ExpenseContext = createContext();
|
||||
export const useExpenseContext = () => useContext(ExpenseContext);
|
||||
|
||||
const ExpensePage = () => {
|
||||
const [isNewExpense, setNewExpense] = useState(false);
|
||||
const [ManageExpenseModal, setManageExpenseModal] = useState({
|
||||
IsOpen: null,
|
||||
expenseId: null,
|
||||
});
|
||||
const [viewExpense, setViewExpense] = useState({
|
||||
expenseId: null,
|
||||
view: false,
|
||||
@ -23,6 +26,7 @@ const ExpensePage = () => {
|
||||
|
||||
const contextValue = {
|
||||
setViewExpense,
|
||||
setManageExpenseModal,
|
||||
setDocumentView,
|
||||
};
|
||||
|
||||
@ -58,7 +62,12 @@ const ExpensePage = () => {
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Add New Expense"
|
||||
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>
|
||||
</button>
|
||||
@ -68,14 +77,24 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
|
||||
<ExpenseList />
|
||||
|
||||
{isNewExpense && (
|
||||
{ManageExpenseModal.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen={isNewExpense}
|
||||
isOpen={ManageExpenseModal.IsOpen}
|
||||
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>
|
||||
)}
|
||||
|
||||
@ -98,7 +117,7 @@ const ExpensePage = () => {
|
||||
{ViewDocument.IsOpen && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
m
|
||||
key={ViewDocument.IsOpen ?? "new"}
|
||||
isOpen={ViewDocument.IsOpen}
|
||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||
>
|
||||
|
||||
@ -12,10 +12,11 @@ const ExpenseRepository = {
|
||||
|
||||
GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
|
||||
CreateExpense:(data)=>api.post("/api/Expense/create",data),
|
||||
UpdateExpense:(id)=>api.put(`/api/Expense/edit/${id}`),
|
||||
UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
|
||||
DeleteExpense:(id)=>api.delete(`/api/Expense/edit/${id}`),
|
||||
|
||||
ActionOnExpense:(data)=>api.post('/api/expense/action',data)
|
||||
ActionOnExpense:(data)=>api.post('/api/expense/action',data),
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -3,39 +3,34 @@ export const formatFileSize=(bytes)=> {
|
||||
else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
|
||||
else return (bytes / (1024 * 1024)).toFixed(2) + " MB";
|
||||
}
|
||||
export const getExpenseIcon = (type) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'vendor/supplier payments':
|
||||
return 'bx-briefcase'; // Business-related
|
||||
case 'transport':
|
||||
return 'bx-car'; // Vehicle or logistics
|
||||
case 'compliance & safety':
|
||||
return 'bx-shield-quarter'; // Security/safety
|
||||
case 'mobilization':
|
||||
return 'bx-building-house'; // Setup / site infra
|
||||
case 'procurement':
|
||||
return 'bx-package'; // Box/package/supplies
|
||||
case 'maintenance & utilities':
|
||||
return 'bx-wrench'; // Repair/maintenance
|
||||
case 'travelling':
|
||||
return 'bx-plane'; // Personnel delivery
|
||||
case 'employee welfare':
|
||||
return 'bx-user-heart'; // Welfare / people
|
||||
default:
|
||||
return 'bx-folder'; // Fallback icon
|
||||
export const AppColorconfig = {
|
||||
colors: {
|
||||
primary: '#696cff',
|
||||
secondary: '#8592a3',
|
||||
success: '#71dd37',
|
||||
info: '#03c3ec',
|
||||
warning: '#ffab00',
|
||||
danger: '#ff3e1d',
|
||||
dark: '#233446',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
cardColor: '#fff',
|
||||
bodyBg: '#f5f5f9',
|
||||
bodyColor: '#697a8d',
|
||||
headingColor: '#566a7f',
|
||||
textMuted: '#a1acb8',
|
||||
borderColor: '#eceef1'
|
||||
}
|
||||
};
|
||||
export const getPaymentModeIcon = (mode) => {
|
||||
switch (mode.toLowerCase()) {
|
||||
case 'cash':
|
||||
return 'bx-money'; // Cash/coins
|
||||
case 'upi':
|
||||
return 'bx-mobile-alt'; // Mobile payment
|
||||
case 'cheque':
|
||||
return 'bx-receipt'; // Paper receipt
|
||||
case 'netbanking':
|
||||
return 'bx-globe'; // Online/internet
|
||||
default:
|
||||
return 'bx-credit-card'; // Generic fallback
|
||||
export const getColorNameFromHex = (hex) => {
|
||||
const normalizedHex = hex?.replace(/'/g, '').toLowerCase();
|
||||
const colors = AppColorconfig.colors;
|
||||
|
||||
for (const [name, value] of Object.entries(colors)) {
|
||||
if (value.toLowerCase() === normalizedHex) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
return null; //
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user