copy expense feature from Refactore_Expense
This commit is contained in:
parent
1bafecf0ff
commit
4d32d1de16
5
public/assets/vendor/css/core.css
vendored
5
public/assets/vendor/css/core.css
vendored
@ -20473,7 +20473,10 @@ li:not(:first-child) .dropdown-item,
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
/* text-size */
|
||||
.text-tiny{
|
||||
font-size: 13px;
|
||||
}
|
||||
/* rtl:end:remove */
|
||||
.text-primary {
|
||||
--bs-text-opacity: 1;
|
||||
|
||||
197
src/components/Expenses/ExpenseFilterPanel.jsx
Normal file
197
src/components/Expenses/ExpenseFilterPanel.jsx
Normal file
@ -0,0 +1,197 @@
|
||||
import React, { useEffect, useState,useMemo } from "react";
|
||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
||||
|
||||
import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { useSelector } from "react-redux";
|
||||
import moment from "moment";
|
||||
import { useExpenseFilter } from "../../hooks/useExpense";
|
||||
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
||||
|
||||
|
||||
|
||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||
const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
|
||||
|
||||
const groupByList = useMemo(() => [
|
||||
{ id: "transactionDate", name: "Transaction Date" },
|
||||
{ id: "status", name: "Status" },
|
||||
{ id: "paidBy", name: "Paid By" },
|
||||
{ id: "project", name: "Project" },
|
||||
{ id: "paymentMode", name: "Payment Mode" },
|
||||
{ id: "expensesType", name: "Expense Type" },
|
||||
{id: "createdAt",name:"Submitted"}
|
||||
], []);
|
||||
|
||||
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(SearchSchema),
|
||||
defaultValues: defaultFilter,
|
||||
});
|
||||
|
||||
const { control, register, handleSubmit, reset, watch } = methods;
|
||||
const isTransactionDate = watch("isTransactionDate");
|
||||
|
||||
const closePanel = () => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
|
||||
const handleGroupChange = (e) => {
|
||||
const group = groupByList.find((g) => g.id === e.target.value);
|
||||
if (group) setSelectedGroup(group);
|
||||
};
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
onApply({
|
||||
...formData,
|
||||
startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
|
||||
endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
|
||||
});
|
||||
handleGroupBy(selectedGroup.id);
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
reset(defaultFilter);
|
||||
setResetKey((prev) => prev + 1);
|
||||
setSelectedGroup(groupByList[0]);
|
||||
onApply(defaultFilter);
|
||||
handleGroupBy(groupByList[0].id);
|
||||
closePanel();
|
||||
};
|
||||
|
||||
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
||||
if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
|
||||
return (
|
||||
<>
|
||||
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
||||
<div className="mb-3 w-100">
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<label className="form-label me-2">Choose Date:</label>
|
||||
<div className="form-check form-switch m-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="switchOption1"
|
||||
{...register("isTransactionDate")}
|
||||
/>
|
||||
</div>
|
||||
<label className="form-label mb-0 ms-2">
|
||||
{isTransactionDate ? "Submitted": "Transaction" }
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="row g-2">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
label="Projects :"
|
||||
options={data.projects}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="createdByIds"
|
||||
label="Submitted By :"
|
||||
options={data.createdBy}
|
||||
labelKey={(item) => item.name}
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="paidById"
|
||||
label="Paid By :"
|
||||
options={data.paidBy}
|
||||
labelKey={(item) => item.name}
|
||||
valueKey="id"
|
||||
/>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Status :</label>
|
||||
<div className="row flex-wrap">
|
||||
{data?.status
|
||||
?.slice()
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((status) => (
|
||||
<div className="col-6" key={status.id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="statusIds"
|
||||
render={({ field: { value = [], onChange } }) => (
|
||||
<div className="d-flex align-items-center me-3 mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
value={status.id}
|
||||
checked={value.includes(status.id)}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked;
|
||||
onChange(
|
||||
checked
|
||||
? [...value, status.id]
|
||||
: value.filter((v) => v !== status.id)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label className="ms-2 mb-0">{status.name}</label>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-2 text-start ">
|
||||
<label htmlFor="groupBySelect" className="form-label">Group By :</label>
|
||||
<select
|
||||
id="groupBySelect"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedGroup?.id || ""}
|
||||
onChange={handleGroupChange}
|
||||
>
|
||||
{groupByList.map((group) => (
|
||||
<option key={group.id} value={group.id}>
|
||||
{group.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseFilterPanel;
|
||||
321
src/components/Expenses/ExpenseList.jsx
Normal file
321
src/components/Expenses/ExpenseList.jsx
Normal file
@ -0,0 +1,321 @@
|
||||
import React, { useState } from "react";
|
||||
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { APPROVE_EXPENSE, EXPENSE_DRAFT, EXPENSE_REJECTEDBY } from "../../utils/constants";
|
||||
import { getColorNameFromHex, useDebounce } from "../../utils/appUtils";
|
||||
import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
const IsExpenseEditable = useHasUserPermission();
|
||||
const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 20;
|
||||
const debouncedSearch = useDebounce(searchText, 500);
|
||||
|
||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
||||
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
|
||||
pageSize,
|
||||
currentPage,
|
||||
filters,
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setDeletingId(id);
|
||||
DeleteExpense(
|
||||
{ id },
|
||||
{
|
||||
onSettled: () => {
|
||||
setDeletingId(null);
|
||||
setIsDeleteModalOpen(false);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
switch (field) {
|
||||
case "transactionDate":
|
||||
key = item.transactionDate?.split("T")[0];
|
||||
break;
|
||||
case "status":
|
||||
key = item.status?.displayName || "Unknown";
|
||||
break;
|
||||
case "paidBy":
|
||||
key = `${item.paidBy?.firstName ?? ""} ${
|
||||
item.paidBy?.lastName ?? ""
|
||||
}`.trim();
|
||||
break;
|
||||
case "project":
|
||||
key = item.project?.name || "Unknown Project";
|
||||
break;
|
||||
case "paymentMode":
|
||||
key = item.paymentMode?.name || "Unknown Mode";
|
||||
break;
|
||||
case "expensesType":
|
||||
key = item.expensesType?.name || "Unknown Type";
|
||||
break;
|
||||
case "createdAt":
|
||||
key = item.createdAt?.split("T")[0] || "Unknown Type";
|
||||
break;
|
||||
default:
|
||||
key = "Others";
|
||||
}
|
||||
if (!acc[key]) acc[key] = [];
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const expenseColumns = [
|
||||
{
|
||||
key: "expensesType",
|
||||
label: "Expense Type",
|
||||
getValue: (e) => e.expensesType?.name || "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "paymentMode",
|
||||
label: "Payment Mode",
|
||||
getValue: (e) => e.paymentMode?.name || "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "paidBy",
|
||||
label: "Paid By",
|
||||
align: "text-start",
|
||||
getValue: (e) =>
|
||||
`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() ||
|
||||
"N/A",
|
||||
customRender: (e) => (
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={e.paidBy?.firstName}
|
||||
lastName={e.paidBy?.lastName}
|
||||
/>
|
||||
<span>
|
||||
{`${e.paidBy?.firstName ?? ""} ${
|
||||
e.paidBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "submitted",
|
||||
label: "Submitted",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
isAlwaysVisible: true,
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
<i className="bx bx-rupee b-xs"></i> {e?.amount}
|
||||
</>
|
||||
),
|
||||
isAlwaysVisible: true,
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
align: "text-center",
|
||||
getValue: (e) => (
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(e?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{e.status?.name || "Unknown"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error}</div>;
|
||||
|
||||
const grouped = groupBy
|
||||
? groupByField(data?.data ?? [], groupBy)
|
||||
: { All: data?.data ?? [] };
|
||||
const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
|
||||
const canEditExpense = (expense) => {
|
||||
return (
|
||||
(expense.status.id === EXPENSE_DRAFT ||
|
||||
EXPENSE_REJECTEDBY.includes(expense.status.id)) &&
|
||||
expense.createdBy?.id === SelfId
|
||||
);
|
||||
};
|
||||
|
||||
const canDetetExpense = (expense)=>{
|
||||
return (expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId )
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade show`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header="Delete Expense"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleDelete}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isPending}
|
||||
paramData={deletingId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card px-0 px-sm-4">
|
||||
<div
|
||||
className="card-datatable table-responsive "
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`sorting d-table-cell`}
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align}`}>{col.label}</div>
|
||||
</th>
|
||||
)
|
||||
)}
|
||||
<th className="sticky-action-column bg-white text-center">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.keys(grouped).length > 0 ? (
|
||||
Object.entries(grouped).map(([group, expenses]) => (
|
||||
<React.Fragment key={group}>
|
||||
<tr className="tr-group text-dark">
|
||||
<td colSpan={8} className="text-start">
|
||||
<strong>
|
||||
{IsGroupedByDate
|
||||
? formatUTCToLocalTime(group)
|
||||
: group}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{expenses.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
>
|
||||
{col.customRender
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewExpense({
|
||||
expenseId: expense.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
{canEditExpense(expense) && (
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
|
||||
{canDetetExpense(expense) && (
|
||||
<i
|
||||
className="bx bx-trash text-danger cursor-pointer"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="text-center py-4">
|
||||
No Expense Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseList;
|
||||
164
src/components/Expenses/ExpenseSchema.js
Normal file
164
src/components/Expenses/ExpenseSchema.js
Normal file
@ -0,0 +1,164 @@
|
||||
import { z } from "zod";
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
const ALLOWED_TYPES = [
|
||||
"application/pdf",
|
||||
"image/png",
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
];
|
||||
|
||||
export const ExpenseSchema = (expenseTypes) => {
|
||||
return z
|
||||
.object({
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expensesTypeId: z
|
||||
.string()
|
||||
.min(1, { message: "Expense type is required" }),
|
||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||
paidById: z.string().min(1, { message: "Employee name is required" }),
|
||||
transactionDate: z
|
||||
.string()
|
||||
.min(1, { message: "Date is required" })
|
||||
,
|
||||
transactionId: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
location: z.string().min(1, { message: "Location is required" }),
|
||||
supplerName: z.string().min(1, { message: "Supplier name is required" }),
|
||||
amount: z.coerce
|
||||
.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
|
||||
.array(
|
||||
z.object({
|
||||
fileName: z.string().min(1, { message: "Filename 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" }),
|
||||
|
||||
|
||||
})
|
||||
.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"],
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultExpense = {
|
||||
projectId: "",
|
||||
expensesTypeId: "",
|
||||
paymentModeId: "",
|
||||
paidById: "",
|
||||
transactionDate: "",
|
||||
transactionId: "",
|
||||
description: "",
|
||||
location: "",
|
||||
supplerName: "",
|
||||
amount: "",
|
||||
noOfPersons: "",
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
|
||||
export const ExpenseActionScheam = (isReimbursement = false) => {
|
||||
return z
|
||||
.object({
|
||||
comment: z.string().min(1, { message: "Please leave comment" }),
|
||||
statusId: z.string().min(1, { message: "Please select a status" }),
|
||||
reimburseTransactionId: z.string().nullable().optional(),
|
||||
reimburseDate: z.string().nullable().optional(),
|
||||
reimburseById: z.string().nullable().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (isReimbursement) {
|
||||
if (!data.reimburseTransactionId?.trim()) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["reimburseTransactionId"],
|
||||
message: "Reimburse Transaction ID is required",
|
||||
});
|
||||
}
|
||||
if (!data.reimburseDate) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["reimburseDate"],
|
||||
message: "Reimburse Date is required",
|
||||
});
|
||||
}
|
||||
if (!data.reimburseById) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["reimburseById"],
|
||||
message: "Reimburse By is required",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultActionValues = {
|
||||
comment: "",
|
||||
statusId: "",
|
||||
|
||||
reimburseTransactionId: null,
|
||||
reimburseDate: null,
|
||||
reimburseById: null,
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const SearchSchema = z.object({
|
||||
projectIds: z.array(z.string()).optional(),
|
||||
statusIds: z.array(z.string()).optional(),
|
||||
createdByIds: z.array(z.string()).optional(),
|
||||
paidById: z.array(z.string()).optional(),
|
||||
startDate: z.string().optional(),
|
||||
endDate: z.string().optional(),
|
||||
isTransactionDate: z.boolean().default(true),
|
||||
});
|
||||
|
||||
export const defaultFilter = {
|
||||
projectIds: [],
|
||||
statusIds: [],
|
||||
createdByIds: [],
|
||||
paidById: [],
|
||||
isTransactionDate: true,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
};
|
||||
|
||||
283
src/components/Expenses/ExpenseSkeleton.jsx
Normal file
283
src/components/Expenses/ExpenseSkeleton.jsx
Normal file
@ -0,0 +1,283 @@
|
||||
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 = "", style = {} }) => (
|
||||
<div
|
||||
className={`skeleton ${className}`}
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
borderRadius: 4,
|
||||
...style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
|
||||
return (
|
||||
<div className="card px-2">
|
||||
<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 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(groups)].map((_, groupIdx) => (
|
||||
<React.Fragment key={`group-${groupIdx}`}>
|
||||
{/* Fake Date Group Header Row */}
|
||||
<tr className="bg-light">
|
||||
<td colSpan={8}>
|
||||
<SkeletonCell width="150px" height={20} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Rows under this group */}
|
||||
{[...Array(rowsPerGroup)].map((__, rowIdx) => (
|
||||
<tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* 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 */}
|
||||
<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>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const ExpenseFilterSkeleton = () => {
|
||||
return (
|
||||
<div className="p-3 text-start">
|
||||
{/* Created Date Label and Skeleton */}
|
||||
<div className="mb-3 w-100">
|
||||
<SkeletonLine height={14} width="120px" className="mb-1" />
|
||||
<SkeletonLine height={36} />
|
||||
</div>
|
||||
|
||||
<div className="row g-2">
|
||||
{/* Project Select */}
|
||||
<div className="col-12 col-md-4 mb-3">
|
||||
<SkeletonLine height={14} width="80px" className="mb-1" />
|
||||
<SkeletonLine height={36} />
|
||||
</div>
|
||||
|
||||
{/* Submitted By Select */}
|
||||
<div className="col-12 col-md-4 mb-3">
|
||||
<SkeletonLine height={14} width="100px" className="mb-1" />
|
||||
<SkeletonLine height={36} />
|
||||
</div>
|
||||
|
||||
{/* Paid By Select */}
|
||||
<div className="col-12 col-md-4 mb-3">
|
||||
<SkeletonLine height={14} width="70px" className="mb-1" />
|
||||
<SkeletonLine height={36} />
|
||||
</div>
|
||||
|
||||
{/* Status Checkboxes */}
|
||||
<div className="col-12 mb-3">
|
||||
<SkeletonLine height={14} width="80px" className="mb-2" />
|
||||
<div className="d-flex flex-wrap">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div className="d-flex align-items-center me-3 mb-2" key={i}>
|
||||
<div
|
||||
className="form-check-input bg-secondary me-2"
|
||||
style={{
|
||||
height: "16px",
|
||||
width: "16px",
|
||||
borderRadius: "3px",
|
||||
}}
|
||||
/>
|
||||
<SkeletonLine height={14} width="60px" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<SkeletonLine height={30} width="80px" className="rounded" />
|
||||
<SkeletonLine height={30} width="80px" className="rounded" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
64
src/components/Expenses/ExpenseStatusLogs.jsx
Normal file
64
src/components/Expenses/ExpenseStatusLogs.jsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { useState } from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
|
||||
const ExpenseStatusLogs = ({ data }) => {
|
||||
const [visibleCount, setVisibleCount] = useState(4);
|
||||
|
||||
const logsToShow = data?.expenseLogs?.slice(0, visibleCount) || [];
|
||||
|
||||
const handleShowMore = () => {
|
||||
setVisibleCount((prev) => prev + 4);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row g-2">
|
||||
{logsToShow.map((log, index) => (
|
||||
<div
|
||||
key={log.id}
|
||||
className="col-12 d-flex align-items-start mb-2"
|
||||
>
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={log.updatedBy.firstName}
|
||||
lastName={log.updatedBy.lastName}
|
||||
/>
|
||||
|
||||
<div className="flex-grow-1">
|
||||
<div className="d-flex justify-content-start">
|
||||
<div className="text-start">
|
||||
<div >
|
||||
<div className="flex">
|
||||
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
||||
<small className="text-secondary text-tiny ms-2">
|
||||
<em>{log.action}</em>
|
||||
</small>
|
||||
<span className="text-tiny text-secondary d-block small">{formatUTCToLocalTime(log?.updateAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted small mt-1">
|
||||
<span className="small">{log.comment}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{data?.expenseLogs?.length > visibleCount && (
|
||||
<div className="text-center my-1">
|
||||
<button
|
||||
className="btn btn-xs btn-outline-primary"
|
||||
onClick={handleShowMore}
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseStatusLogs;
|
||||
560
src/components/Expenses/ManageExpense.jsx
Normal file
560
src/components/Expenses/ManageExpense.jsx
Normal file
@ -0,0 +1,560 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
|
||||
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,
|
||||
useEmployeesName,
|
||||
useEmployeesNameByProject,
|
||||
} from "../../hooks/useEmployees";
|
||||
import Avatar from "../common/Avatar";
|
||||
import {
|
||||
useCreateExpnse,
|
||||
useExpense,
|
||||
useUpdateExpense,
|
||||
} from "../../hooks/useExpense";
|
||||
import ExpenseSkeleton from "./ExpenseSkeleton";
|
||||
import moment from "moment";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import ErrorPage from "../../pages/ErrorPage";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
error: ExpenseErrorLoad,
|
||||
} = useExpense(expenseToEdit);
|
||||
console.log(data)
|
||||
const [ExpenseType, setExpenseType] = useState();
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
ExpenseTypes,
|
||||
loading: ExpenseLoading,
|
||||
error: ExpenseError,
|
||||
} = useExpenseType();
|
||||
const schema = ExpenseSchema(ExpenseTypes);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
reset,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaultExpense,
|
||||
});
|
||||
|
||||
const selectedproject = watch("projectId");
|
||||
|
||||
const {
|
||||
projectNames,
|
||||
loading: projectLoading,
|
||||
error,
|
||||
isError: isProjectError,
|
||||
} = useProjectName();
|
||||
|
||||
const {
|
||||
PaymentModes,
|
||||
loading: PaymentModeLoading,
|
||||
error: PaymentModeError,
|
||||
} = usePaymentMode();
|
||||
const {
|
||||
ExpenseStatus,
|
||||
loading: StatusLoadding,
|
||||
error: stausError,
|
||||
} = useExpenseStatus();
|
||||
const {
|
||||
data: employees,
|
||||
isLoading: EmpLoading,
|
||||
isError: isEmployeeError,
|
||||
} = useEmployeesNameByProject(selectedproject);
|
||||
const files = watch("billAttachments");
|
||||
const onFileChange = async (e) => {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
if (newFiles.length === 0) return;
|
||||
|
||||
const existingFiles = watch("billAttachments") || [];
|
||||
|
||||
const parsedFiles = await Promise.all(
|
||||
newFiles.map(async (file) => {
|
||||
const base64Data = await toBase64(file);
|
||||
return {
|
||||
fileName: file.name,
|
||||
base64Data,
|
||||
contentType: file.type,
|
||||
fileSize: file.size,
|
||||
description: "",
|
||||
isActive: true,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const combinedFiles = [
|
||||
...existingFiles,
|
||||
...parsedFiles.filter(
|
||||
(newFile) =>
|
||||
!existingFiles.some(
|
||||
(f) =>
|
||||
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
||||
)
|
||||
),
|
||||
];
|
||||
|
||||
setValue("billAttachments", combinedFiles, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
});
|
||||
};
|
||||
|
||||
const toBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
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 });
|
||||
}
|
||||
};
|
||||
|
||||
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 = (fromdata) => {
|
||||
let payload = {
|
||||
...fromdata,
|
||||
transactionDate: moment
|
||||
.utc(fromdata.transactionDate, "DD-MM-YYYY")
|
||||
.toISOString(),
|
||||
};
|
||||
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));
|
||||
}, [ExpenseTypeId]);
|
||||
|
||||
const handleClose = () => {
|
||||
reset();
|
||||
closeModal();
|
||||
};
|
||||
if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
|
||||
return <ExpenseSkeleton />;
|
||||
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<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">
|
||||
<label className="form-label">Select Project</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("projectId")}
|
||||
>
|
||||
<option value="">Select Project</option>
|
||||
{projectLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
projectNames?.map((project) => (
|
||||
<option key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.projectId && (
|
||||
<small className="danger-text">{errors.projectId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="expensesTypeId" className="form-label ">
|
||||
Expense Type
|
||||
</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="expensesTypeId"
|
||||
{...register("expensesTypeId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Type
|
||||
</option>
|
||||
{ExpenseLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
ExpenseTypes?.map((expense) => (
|
||||
<option key={expense.id} value={expense.id}>
|
||||
{expense.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.expensesTypeId && (
|
||||
<small className="danger-text">
|
||||
{errors.expensesTypeId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="paymentModeId" className="form-label ">
|
||||
Payment Mode
|
||||
</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paymentModeId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Mode
|
||||
</option>
|
||||
{PaymentModeLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
PaymentModes?.map((payment) => (
|
||||
<option key={payment.id} value={payment.id}>
|
||||
{payment.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.paymentModeId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentModeId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="paidById" className="form-label ">
|
||||
Paid By
|
||||
</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paidById")}
|
||||
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>
|
||||
{errors.paidById && (
|
||||
<small className="danger-text">{errors.paidById.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="transactionDate" className="form-label ">
|
||||
Transaction Date
|
||||
</label>
|
||||
<DatePicker name="transactionDate" control={control} />
|
||||
|
||||
{errors.transactionDate && (
|
||||
<small className="danger-text">
|
||||
{errors.transactionDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="amount" className="form-label ">
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
{...register("amount", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.amount && (
|
||||
<small className="danger-text">{errors.amount.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="supplerName" className="form-label ">
|
||||
Supplier Name/Transporter Name/Other
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="supplerName"
|
||||
className="form-control form-control-sm"
|
||||
{...register("supplerName")}
|
||||
/>
|
||||
{errors.supplerName && (
|
||||
<small className="danger-text">
|
||||
{errors.supplerName.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="location" className="form-label ">
|
||||
Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
className="form-control form-control-sm"
|
||||
{...register("location")}
|
||||
/>
|
||||
{errors.location && (
|
||||
<small className="danger-text">{errors.location.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row my-2">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="statusId" className="form-label ">
|
||||
TransactionId
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="transactionId"
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
{...register("transactionId")}
|
||||
/>
|
||||
{errors.transactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.transactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{ExpenseType?.noOfPersonsRequired && (
|
||||
<div className="col-md-6">
|
||||
<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 className="col-md-12">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
className="form-control form-control-sm"
|
||||
{...register("description")}
|
||||
rows="2"
|
||||
></textarea>
|
||||
{errors.description && (
|
||||
<small className="danger-text">
|
||||
{errors.description.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2">
|
||||
<div className="col-md-12">
|
||||
<label className="form-label ">Upload Bill </label>
|
||||
|
||||
<div
|
||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => document.getElementById("billAttachments").click()}
|
||||
>
|
||||
<i className="bx bx-cloud-upload d-block bx-lg"></i>
|
||||
<span className="text-muted d-block">
|
||||
Click to select or click here to browse
|
||||
</span>
|
||||
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="billAttachments"
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
multiple
|
||||
style={{ display: "none" }}
|
||||
{...register("billAttachments")}
|
||||
onChange={(e) => {
|
||||
onFileChange(e);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{errors.billAttachments && (
|
||||
<small className="danger-text">
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
<div className="d-block">
|
||||
{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?.base64Data?.message,
|
||||
fileError?.documentId?.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
{" "}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm mt-3"
|
||||
disabled={isPending || createPending}
|
||||
>
|
||||
{isPending || createPending
|
||||
? "Please Wait..."
|
||||
: expenseToEdit
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
disabled={isPending || createPending}
|
||||
onClick={handleClose}
|
||||
className="btn btn-secondary btn-sm mt-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageExpense;
|
||||
28
src/components/Expenses/PreviewDocument.jsx
Normal file
28
src/components/Expenses/PreviewDocument.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
const PreviewDocument = ({ imageUrl }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
|
||||
{loading && (
|
||||
<div className="text-secondary text-center mb-2">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Full View"
|
||||
className="img-fluid"
|
||||
style={{
|
||||
maxHeight: "100vh",
|
||||
objectFit: "contain",
|
||||
display: loading ? "none" : "block",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviewDocument;
|
||||
555
src/components/Expenses/ViewExpense.jsx
Normal file
555
src/components/Expenses/ViewExpense.jsx
Normal file
@ -0,0 +1,555 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import {
|
||||
useActionOnExpense,
|
||||
useExpense,
|
||||
useHasAnyPermission,
|
||||
} from "../../hooks/useExpense";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
EXPENSE_REJECTEDBY,
|
||||
PROCESS_EXPENSE,
|
||||
REVIEW_EXPENSE,
|
||||
} from "../../utils/constants";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Avatar from "../common/Avatar";
|
||||
import Error from "../common/Error";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { useEmployeeRoles, useEmployeesName } from "../../hooks/useEmployees";
|
||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||
import { z } from "zod";
|
||||
import moment from "moment";
|
||||
import ExpenseStatusLogs from "./ExpenseStatusLogs";
|
||||
|
||||
const ViewExpense = ({ ExpenseId }) => {
|
||||
const { data, isLoading, isError, error } = useExpense(ExpenseId);
|
||||
const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
|
||||
const [clickedStatusId, setClickedStatusId] = useState(null);
|
||||
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = useExpenseContext();
|
||||
const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(ActionSchema),
|
||||
defaultValues: defaultActionValues,
|
||||
});
|
||||
|
||||
const userPermissions = useSelector(
|
||||
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||
);
|
||||
const CurrentUser = useSelector(
|
||||
(state) => state?.globalVariables?.loginUser?.employeeInfo
|
||||
);
|
||||
|
||||
const nextStatusWithPermission = useMemo(() => {
|
||||
if (!Array.isArray(data?.nextStatus)) return [];
|
||||
|
||||
return data.nextStatus.filter((status) => {
|
||||
const permissionIds = Array.isArray(status?.permissionIds)
|
||||
? status.permissionIds
|
||||
: [];
|
||||
|
||||
if (permissionIds.length === 0) return true;
|
||||
if (permissionIds.includes(PROCESS_EXPENSE)) {
|
||||
setIsPaymentProcess(true);
|
||||
}
|
||||
return permissionIds.some((id) => userPermissions.includes(id));
|
||||
});
|
||||
}, [data, userPermissions]);
|
||||
|
||||
const IsRejectedExpense = useMemo(() => {
|
||||
return EXPENSE_REJECTEDBY.includes(data?.status?.id);
|
||||
}, [data]);
|
||||
|
||||
const isCreatedBy = useMemo(() => {
|
||||
return data?.createdBy.id === CurrentUser?.id;
|
||||
}, [data, CurrentUser]);
|
||||
|
||||
const { mutate: MakeAction, isPending } = useActionOnExpense(() => {
|
||||
setClickedStatusId(null);
|
||||
reset();
|
||||
});
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const Payload = {
|
||||
...formData,
|
||||
reimburseDate: moment
|
||||
.utc(formData.reimburseDate, "DD-MM-YYYY")
|
||||
.toISOString(),
|
||||
expenseId: ExpenseId,
|
||||
comment: formData.comment,
|
||||
};
|
||||
MakeAction(Payload);
|
||||
};
|
||||
|
||||
if (isLoading) return <ExpenseDetailsSkeleton />;
|
||||
if (isError) return <Error error={error} />;
|
||||
const handleImageLoad = (id) => {
|
||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row mb-3">
|
||||
<div className="col-12 mb-3">
|
||||
<h5 className="fw-semibold">Expense Details</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div className="text-start mb-2">
|
||||
{/* <label className="form-label me-2 mb-0 fw-semibold">
|
||||
Description :
|
||||
</label> */}
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
{/* Row 1 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Transaction Date :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.transactionDate)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Expense Type :
|
||||
</label>
|
||||
<div className="text-muted">{data?.expensesType?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Supplier :
|
||||
</label>
|
||||
<div className="text-muted">{data?.supplerName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">₹ {data.amount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payment Mode :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Paid By :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data?.paidBy?.firstName} {data?.paidBy?.lastName}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Status :
|
||||
</label>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{data?.status?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Pre-Approved :
|
||||
</label>
|
||||
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 6 */}
|
||||
{data.createdBy && (
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.createdBy?.firstName}
|
||||
lastName={data.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.createdBy?.firstName ?? ""} ${
|
||||
data.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* {data.reviewedBy && (
|
||||
<div className="col-md-6 mb-3 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Reviewed By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.reviewedBy?.firstName}
|
||||
lastName={data.reviewedBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.reviewedBy?.firstName ?? ""} ${
|
||||
data.reviewedBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.approvedBy && (
|
||||
<div className="col-md-6 mb-3 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Approved By :{" "}
|
||||
</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.approvedBy?.firstName}
|
||||
lastName={data.approvedBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.approvedBy?.firstName ?? ""} ${
|
||||
data.approvedBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data.processedBy && (
|
||||
<div className="col-md-6 mb-3 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Processed By :{" "}
|
||||
</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.processedBy?.firstName}
|
||||
lastName={data.processedBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.processedBy?.firstName ?? ""} ${
|
||||
data.processedBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</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> */}
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Attachment :</label>
|
||||
|
||||
{data?.documents?.map((doc) => {
|
||||
const getIconByType = (type) => {
|
||||
if (!type) return "bx bx-file";
|
||||
|
||||
if (type.includes("pdf")) return "bxs-file-pdf";
|
||||
if (type.includes("word")) return "bxs-file-doc";
|
||||
if (type.includes("excel") || type.includes("spreadsheet"))
|
||||
return "bxs-file-xls";
|
||||
if (type.includes("image")) return "bxs-file-image";
|
||||
if (type.includes("zip") || type.includes("rar"))
|
||||
return "bxs-file-archive";
|
||||
|
||||
return "bx bx-file";
|
||||
};
|
||||
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||
key={doc.documentId}
|
||||
>
|
||||
<div
|
||||
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
||||
style={{ height: "50px", width: "60px", position: "relative" }}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByType(
|
||||
doc.contentType
|
||||
)} text-primary`}
|
||||
style={{ fontSize: "35px" }}
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div className="w-100">
|
||||
<small className="mb-0 small">{doc.fileName}</small>
|
||||
<div className="d">
|
||||
<a
|
||||
href={doc.preSignedUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bx bx-cloud-download cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<div className="row text-start">
|
||||
<div className="col-md-6 mb-sm-0 mb-2">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction ID :
|
||||
</label>
|
||||
{data.expensesReimburse.reimburseTransactionId || "N/A"}
|
||||
</div>
|
||||
<div className="col-md-6 ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse Date :
|
||||
</label>
|
||||
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<>
|
||||
<div className="col-md-6 d-flex align-items-center">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.expensesReimburse?.reimburseBy?.firstName}
|
||||
lastName={data?.expensesReimburse?.reimburseBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<hr className="divider my-1" />
|
||||
|
||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
||||
<>
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Id </label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("reimburseTransactionId")}
|
||||
/>
|
||||
{errors.reimburseTransactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseTransactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Date </label>
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.transactionDate}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Reimburse By </label>
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="reimburseById"
|
||||
projectId={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 mb-3 text-start">
|
||||
{((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
|
||||
(IsRejectedExpense && isCreatedBy)) && (
|
||||
<>
|
||||
<label className="form-label me-2 mb-0">Comment:</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">
|
||||
{errors.comment.message}
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{nextStatusWithPermission?.length > 0 &&
|
||||
(!IsRejectedExpense || isCreatedBy) && (
|
||||
<div className="text-center flex-wrap gap-2 my-2">
|
||||
{nextStatusWithPermission.map((status, index) => (
|
||||
<button
|
||||
key={status.id || index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClickedStatusId(status.id);
|
||||
setValue("statusId", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
disabled={isPending}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{isPending && clickedStatusId === status.id
|
||||
? "Please Wait..."
|
||||
: status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<ExpenseStatusLogs data={data}/>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewExpense;
|
||||
96
src/components/common/EmployeeSearchInput.jsx
Normal file
96
src/components/common/EmployeeSearchInput.jsx
Normal file
@ -0,0 +1,96 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useEmployeesName } from "../../hooks/useEmployees";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import { useController } from "react-hook-form";
|
||||
import Avatar from "./Avatar";
|
||||
|
||||
|
||||
|
||||
|
||||
const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
|
||||
const {
|
||||
field: { onChange, value, ref },
|
||||
fieldState: { error },
|
||||
} = useController({ name, control });
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const debouncedSearch = useDebounce(search, 500);
|
||||
|
||||
const {
|
||||
data: employees,
|
||||
isLoading,
|
||||
} = useEmployeesName(projectId, debouncedSearch);
|
||||
|
||||
useEffect(() => {
|
||||
if (value && !search) {
|
||||
const found = employees?.data?.find((emp) => emp.id === value);
|
||||
if (found) setSearch(found.firstName + " " + found.lastName);
|
||||
}
|
||||
}, [value, employees]);
|
||||
|
||||
const handleSelect = (employee) => {
|
||||
onChange(employee.id);
|
||||
setSearch(employee.firstName + " " + employee.lastName);
|
||||
setShowDropdown(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
ref={ref}
|
||||
className={`form-control form-control-sm`}
|
||||
placeholder={placeholder}
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
setShowDropdown(true);
|
||||
onChange("");
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (search) setShowDropdown(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
|
||||
<ul
|
||||
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
|
||||
style={{ maxHeight: 200, overflowY: "auto" }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<li className="list-group-item">
|
||||
<a>Searching...</a>
|
||||
|
||||
</li>
|
||||
) : (
|
||||
employees?.data?.map((emp) => (
|
||||
<li
|
||||
key={emp.id}
|
||||
className="list-group-item list-group-item-action py-1 px-1"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => handleSelect(emp)}
|
||||
>
|
||||
<div className="d-flex align-items-center px-0">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-2"
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{error && <small className="danger-text">{error.message}</small>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeSearchInput;
|
||||
20
src/components/common/Error.jsx
Normal file
20
src/components/common/Error.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
|
||||
const Error = ({error,close}) => {
|
||||
console.log(error)
|
||||
return (
|
||||
<div className="container text-center py-5">
|
||||
<h1 className="display-4 fw-bold text-danger">{error.statusCode || error?.response?.status
|
||||
}</h1>
|
||||
<h2 className="mb-3">Internal Server Error</h2>
|
||||
<p className="lead">
|
||||
{error.message}
|
||||
</p>
|
||||
<a href="/" className="btn btn-primary btn-sm mt-3" onClick={()=>close()}>
|
||||
Go to Home
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Error
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { createPortal } from "react-dom";
|
||||
import "./MultiSelectDropdown.css";
|
||||
|
||||
const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = "Select options",
|
||||
labelKey = "name",
|
||||
labelKey = "name", // Can now be a function or a string
|
||||
valueKey = "id",
|
||||
placeholder = "Please select...",
|
||||
IsLoading = false,
|
||||
@ -16,11 +17,18 @@ const SelectMultiple = ({
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const containerRef = useRef(null);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(e.target) &&
|
||||
(!dropdownRef.current || !dropdownRef.current.contains(e.target))
|
||||
) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
@ -28,6 +36,21 @@ const SelectMultiple = ({
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && containerRef.current) {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
setDropdownStyles({
|
||||
top: rect.bottom + window.scrollY,
|
||||
left: rect.left + window.scrollX,
|
||||
width: rect.width,
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const getLabel = (item) => {
|
||||
return typeof labelKey === "function" ? labelKey(item) : item[labelKey];
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (value) => {
|
||||
const updated = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
@ -36,35 +59,98 @@ const SelectMultiple = ({
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = options.filter((item) =>
|
||||
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||
const filteredOptions = options.filter((item) => {
|
||||
const label = getLabel(item);
|
||||
return label?.toLowerCase().includes(searchText.toLowerCase());
|
||||
});
|
||||
|
||||
const dropdownElement = (
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className="multi-select-dropdown-options"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: dropdownStyles.top,
|
||||
left: dropdownStyles.left,
|
||||
width: dropdownStyles.width,
|
||||
zIndex: 9999,
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
||||
borderRadius: 4,
|
||||
maxHeight: 300,
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<div className="multi-select-dropdown-search" style={{ padding: 8 }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
style={{ width: "100%", padding: 4 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = getLabel(item);
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
|
||||
style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="custom-checkbox form-check-input"
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(valueVal)}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<label className="text-secondary">{labelVal}</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
||||
</div>
|
||||
)}
|
||||
{IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
||||
<label className="text-muted">Loading...</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||
<>
|
||||
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
selectedValues.length > 0
|
||||
? "placeholder-style-selected"
|
||||
: "placeholder-style"
|
||||
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
|
||||
}
|
||||
>
|
||||
<div className="selected-badges-container">
|
||||
{selectedValues.length > 0 ? (
|
||||
selectedValues.map((val) => {
|
||||
const found = options.find((opt) => opt[valueKey] === val);
|
||||
const label = found ? getLabel(found) : "";
|
||||
return (
|
||||
<span
|
||||
key={val}
|
||||
className="badge badge-selected-item mx-1 mb-1"
|
||||
>
|
||||
{found ? found[labelKey] : ""}
|
||||
<span key={val} className="badge badge-selected-item mx-1 mb-1">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
@ -75,56 +161,10 @@ const SelectMultiple = ({
|
||||
</span>
|
||||
<i className="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div className="multi-select-dropdown-options">
|
||||
<div className="multi-select-dropdown-search">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = item[labelKey];
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
className={`multi-select-dropdown-option ${
|
||||
isChecked ? "selected" : ""
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="custom-checkbox form-check-input"
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(valueVal)}
|
||||
/>
|
||||
<label className="text-secondary">{labelVal}</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found">
|
||||
<label className="text-muted">
|
||||
Not Found {`'${searchText}'`}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found">
|
||||
<label className="text-muted">Loading...</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isOpen && createPortal(dropdownElement, document.body)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,27 +3,22 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
import { RolesRepository } from "../repositories/MastersRepository";
|
||||
import EmployeeRepository from "../repositories/EmployeeRepository";
|
||||
import ProjectRepository from "../repositories/ProjectRepository";
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
import {useSelector} from "react-redux";
|
||||
import {store} from "../store/store";
|
||||
import {queryClient} from "../layouts/AuthLayout";
|
||||
|
||||
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import { store } from "../store/store";
|
||||
import { queryClient } from "../layouts/AuthLayout";
|
||||
|
||||
// Query ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
export const useAllEmployees = ( showInactive ) =>
|
||||
{
|
||||
export const useAllEmployees = (showInactive) => {
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch, // optional if you want recall functionality
|
||||
} = useQuery({
|
||||
queryKey: ['allEmployee', showInactive],
|
||||
queryKey: ["allEmployee", showInactive],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getAllEmployeeList(showInactive);
|
||||
return res.data;
|
||||
@ -39,9 +34,7 @@ export const useAllEmployees = ( showInactive ) =>
|
||||
};
|
||||
|
||||
// ManageBucket.jsx
|
||||
export const useEmployees = ( selectedProject ) =>
|
||||
{
|
||||
|
||||
export const useEmployees = (selectedProject) => {
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
@ -50,7 +43,9 @@ export const useEmployees = ( selectedProject ) =>
|
||||
} = useQuery({
|
||||
queryKey: ["employeeListByProject", selectedProject],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getEmployeeListByproject(selectedProject);
|
||||
const res = await EmployeeRepository.getEmployeeListByproject(
|
||||
selectedProject
|
||||
);
|
||||
return res.data || res;
|
||||
},
|
||||
enabled: !!selectedProject,
|
||||
@ -72,7 +67,7 @@ export const useEmployeeRoles = (employeeId) => {
|
||||
isLoading: loading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['employeeRoles', employeeId],
|
||||
queryKey: ["employeeRoles", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await RolesRepository.getEmployeeRoles(employeeId);
|
||||
return res.data;
|
||||
@ -95,7 +90,7 @@ export const useEmployeesByProject = (projectId) => {
|
||||
error,
|
||||
refetch: recallProjectEmplloyee,
|
||||
} = useQuery({
|
||||
queryKey: ['projectEmployees', projectId],
|
||||
queryKey: ["projectEmployees", projectId],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getEmployeesByProject(projectId);
|
||||
return res.data;
|
||||
@ -112,13 +107,14 @@ export const useEmployeesByProject = (projectId) => {
|
||||
};
|
||||
|
||||
// EmployeeList.jsx
|
||||
export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
|
||||
showInactive) => {
|
||||
|
||||
|
||||
export const useEmployeesAllOrByProjectId = (
|
||||
showAllEmployees,
|
||||
projectId,
|
||||
showInactive
|
||||
) => {
|
||||
const queryKey = showAllEmployees
|
||||
? ['allEmployees', showInactive]
|
||||
: ['projectEmployees', projectId, showInactive];
|
||||
? ["allEmployees", showInactive]
|
||||
: ["projectEmployees", projectId, showInactive];
|
||||
|
||||
const queryFn = async () => {
|
||||
if (showAllEmployees) {
|
||||
@ -139,7 +135,8 @@ export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
|
||||
} = useQuery({
|
||||
queryKey,
|
||||
queryFn,
|
||||
enabled:typeof showInactive === "boolean" && (showAllEmployees || !!projectId),
|
||||
enabled:
|
||||
typeof showInactive === "boolean" && (showAllEmployees || !!projectId),
|
||||
});
|
||||
|
||||
return {
|
||||
@ -151,16 +148,15 @@ export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
|
||||
};
|
||||
|
||||
// ManageEmployee.jsx
|
||||
export const useEmployeeProfile = ( employeeId ) =>
|
||||
{
|
||||
export const useEmployeeProfile = (employeeId) => {
|
||||
const isEnabled = !!employeeId;
|
||||
const {
|
||||
data = null,
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['employeeProfile', employeeId],
|
||||
queryKey: ["employeeProfile", employeeId],
|
||||
queryFn: async () => {
|
||||
if (!employeeId) return null;
|
||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId);
|
||||
@ -173,47 +169,77 @@ export const useEmployeeProfile = ( employeeId ) =>
|
||||
employee: data,
|
||||
loading,
|
||||
error,
|
||||
refetch
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
export const useEmployeesName = (projectId, search) => {
|
||||
return useQuery({
|
||||
queryKey: ["employees", projectId, search],
|
||||
queryFn: async() => await EmployeeRepository.getEmployeeName(projectId, search),
|
||||
|
||||
staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
|
||||
});
|
||||
};
|
||||
|
||||
export const useEmployeesNameByProject = (projectId) => {
|
||||
return useQuery({
|
||||
queryKey: ["Projectemployees", projectId],
|
||||
queryFn: async () => {
|
||||
const response = await EmployeeRepository.getEmployeeName(projectId);
|
||||
return response?.data || []; // handle undefined/null response
|
||||
},
|
||||
enabled: !!projectId, // only fetch if projectId is truthy
|
||||
staleTime: 5 * 60 * 1000, // cache for 5 minutes
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Mutation------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
export const useUpdateEmployee = () =>
|
||||
{
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
export const useUpdateEmployee = () => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (employeeData) => EmployeeRepository.manageEmployee(employeeData),
|
||||
mutationFn: (employeeData) =>
|
||||
EmployeeRepository.manageEmployee(employeeData),
|
||||
onSuccess: (_, variables) => {
|
||||
const id = variables.id || variables.employeeId;
|
||||
const isAllEmployee = variables.IsAllEmployee;
|
||||
|
||||
// Cache invalidation
|
||||
queryClient.invalidateQueries( {queryKey:[ 'allEmployees'] });
|
||||
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
|
||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
queryClient.removeQueries( {queryKey: [ "empListByProjectAllocated" ]} );
|
||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
||||
queryClient.removeQueries({ queryKey: ["empListByProjectAllocated"] });
|
||||
|
||||
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject']} );
|
||||
showToast( `Employee ${ id ? 'updated' : 'created' } successfully`, 'success' );
|
||||
showToast(
|
||||
`Employee ${id ? "updated" : "created"} successfully`,
|
||||
"success"
|
||||
);
|
||||
},
|
||||
onError: (error) => {
|
||||
const msg = error?.response?.data?.message || error.message || 'Something went wrong';
|
||||
showToast(msg, 'error');
|
||||
const msg =
|
||||
error?.response?.data?.message ||
|
||||
error.message ||
|
||||
"Something went wrong";
|
||||
showToast(msg, "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
|
||||
export const useSuspendEmployee = ({
|
||||
setIsDeleteModalOpen,
|
||||
setemployeeLodaing,
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
return useMutation({
|
||||
mutationFn: (id) => {
|
||||
setemployeeLodaing(true);
|
||||
@ -221,11 +247,11 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
|
||||
},
|
||||
|
||||
onSuccess: () => {
|
||||
|
||||
|
||||
// queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
|
||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["employeeListByProject", selectedProject],
|
||||
});
|
||||
showToast("Employee deleted successfully.", "success");
|
||||
setIsDeleteModalOpen(false);
|
||||
},
|
||||
@ -247,8 +273,11 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
|
||||
|
||||
// Manage Role
|
||||
|
||||
|
||||
export const useUpdateEmployeeRoles = ({ onClose, resetForm, onSuccessCallback } = {}) => {
|
||||
export const useUpdateEmployeeRoles = ({
|
||||
onClose,
|
||||
resetForm,
|
||||
onSuccessCallback,
|
||||
} = {}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
mutationFn: (updates) => RolesRepository.createEmployeeRoles(updates),
|
||||
@ -259,12 +288,14 @@ export const useUpdateEmployeeRoles = ({ onClose, resetForm, onSuccessCallback }
|
||||
onClose?.();
|
||||
onSuccessCallback?.();
|
||||
|
||||
queryClient.invalidateQueries( {queryKey: [ "employeeRoles" ]} );
|
||||
queryClient.invalidateQueries( {queryKey: [ "profile" ]} );
|
||||
queryClient.invalidateQueries({ queryKey: ["employeeRoles"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["profile"] });
|
||||
},
|
||||
onError: (err) => {
|
||||
const message =
|
||||
err?.response?.data?.message || err?.message || "Error occurred while updating roles";
|
||||
err?.response?.data?.message ||
|
||||
err?.message ||
|
||||
"Error occurred while updating roles";
|
||||
showToast(message, "error");
|
||||
},
|
||||
});
|
||||
|
||||
263
src/hooks/useExpense.js
Normal file
263
src/hooks/useExpense.js
Normal file
@ -0,0 +1,263 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import ExpenseRepository from "../repositories/ExpsenseRepository";
|
||||
import showToast from "../services/toastService";
|
||||
import { queryClient } from "../layouts/AuthLayout";
|
||||
import { useSelector } from "react-redux";
|
||||
import moment from "moment";
|
||||
|
||||
// -------------------Query------------------------------------------------------
|
||||
|
||||
const cleanFilter = (filter) => {
|
||||
const cleaned = { ...filter };
|
||||
|
||||
["projectIds", "statusIds", "createdByIds", "paidById"].forEach((key) => {
|
||||
if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
|
||||
delete cleaned[key];
|
||||
}
|
||||
});
|
||||
|
||||
// moment.utc() to get consistent UTC ISO strings
|
||||
if (!cleaned.startDate) {
|
||||
cleaned.startDate = moment.utc().subtract(7, "days").startOf("day").toISOString();
|
||||
}
|
||||
|
||||
if (!cleaned.endDate) {
|
||||
cleaned.endDate = moment.utc().startOf("day").toISOString();
|
||||
}
|
||||
|
||||
return cleaned;
|
||||
};
|
||||
|
||||
|
||||
export const useExpenseList = (
|
||||
pageSize,
|
||||
pageNumber,
|
||||
filter,
|
||||
searchString = ""
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ["Expenses", pageNumber, pageSize, filter, searchString],
|
||||
queryFn: async () => {
|
||||
const cleanedFilter = cleanFilter(filter);
|
||||
const response = await ExpenseRepository.GetExpenseList(
|
||||
pageSize,
|
||||
pageNumber,
|
||||
cleanedFilter,
|
||||
searchString
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
keepPreviousData: true,
|
||||
});
|
||||
};
|
||||
|
||||
export const useExpense = (ExpenseId) => {
|
||||
return useQuery({
|
||||
queryKey: ["Expense", ExpenseId],
|
||||
queryFn: async () =>
|
||||
await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
|
||||
(res) => res.data
|
||||
),
|
||||
enabled: !!ExpenseId,
|
||||
});
|
||||
};
|
||||
|
||||
export const useExpenseFilter = () => {
|
||||
return useQuery({
|
||||
queryKey: ["ExpenseFilter"],
|
||||
queryFn: async () =>
|
||||
await ExpenseRepository.GetExpenseFilter().then((res) => res.data),
|
||||
});
|
||||
};
|
||||
|
||||
// ---------------------------Mutation---------------------------------------------
|
||||
|
||||
export const useCreateExpnse = (onSuccessCallBack) => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
await ExpenseRepository.CreateExpense(payload);
|
||||
},
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
||||
showToast("Expense Created Successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.message || "Something went wrong please try again !",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast("Something went wrong.Please try again later.", "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("Request processed 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
|
||||
),
|
||||
};
|
||||
}
|
||||
);
|
||||
// queryClient.setQueriesData(
|
||||
// { queryKey: ["Expense", updatedExpense.id] },
|
||||
// (oldData) => {
|
||||
// return {
|
||||
// ...oldData,
|
||||
// nextStatus: updatedExpense.nextStatus,
|
||||
// status: updatedExpense.status,
|
||||
// };
|
||||
// }
|
||||
// );
|
||||
queryClient.invalidateQueries({queryKey:["Expense",updatedExpense.id]})
|
||||
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.response.data.message ||
|
||||
"Something went wrong.Please try again later.",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteExpense = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id }) => {
|
||||
const response = await ExpenseRepository.DeleteExpense(id);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.setQueryData(["Expenses"], (oldData) => {
|
||||
if (!oldData || !oldData.data)
|
||||
return queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
||||
|
||||
const updatedList = oldData.data.filter(
|
||||
(expense) => expense.id !== variables.id
|
||||
);
|
||||
|
||||
return {
|
||||
...oldData,
|
||||
data: updatedList,
|
||||
};
|
||||
});
|
||||
|
||||
showToast(data.message || "Expense deleted successfully", "success");
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.message ||
|
||||
error.response.message ||
|
||||
"Something went wrong.Please try again later.",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useHasAnyPermission = (permissionIdsInput) => {
|
||||
const permissions = useSelector((state) => state?.profile?.permissions || []);
|
||||
|
||||
const permissionIds = Array.isArray(permissionIdsInput)
|
||||
? permissionIdsInput
|
||||
: [];
|
||||
|
||||
// No permission needed
|
||||
if (permissionIds.length === 0) return true;
|
||||
|
||||
return permissionIds.some((id) => permissions.includes(id));
|
||||
};
|
||||
@ -14,196 +14,6 @@ import {
|
||||
} from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
|
||||
// export const useProjects = () => {
|
||||
// const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
||||
// const [projects, setProjects] = useState([]);
|
||||
// const [loading, setLoading] = useState(true);
|
||||
// const [error, setError] = useState("");
|
||||
|
||||
// const fetchData = async () => {
|
||||
// const projectIds = loggedUser?.projects || [];
|
||||
|
||||
// const filterProjects = (projectsList) => {
|
||||
// return projectsList
|
||||
// .filter((proj) => projectIds.includes(String(proj.id)))
|
||||
// .sort((a, b) => a?.name?.localeCompare(b.name));
|
||||
// };
|
||||
|
||||
// const projects_cache = getCachedData("projectslist");
|
||||
|
||||
// if (!projects_cache) {
|
||||
// setLoading(true);
|
||||
// try {
|
||||
// const response = await ProjectRepository.getProjectList();
|
||||
// const allProjects = response.data;
|
||||
// const filtered = filterProjects(allProjects);
|
||||
// setProjects(filtered);
|
||||
// cacheData("projectslist", allProjects);
|
||||
// } catch (err) {
|
||||
// setError("Failed to fetch data.");
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// } else {
|
||||
// if (!projects.length) {
|
||||
// const filtered = filterProjects(projects_cache);
|
||||
// setProjects(filtered);
|
||||
// setLoading(false);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
// useEffect(() => {
|
||||
// if (loggedUser) {
|
||||
// fetchData();
|
||||
// }
|
||||
// }, [loggedUser]);
|
||||
|
||||
// return { projects, loading, error, refetch: fetchData };
|
||||
// };
|
||||
|
||||
// export const useEmployeesByProjectAllocated = (selectedProject) => {
|
||||
// const [projectEmployees, setEmployeeList] = useState([]);
|
||||
// const [loading, setLoading] = useState(true);
|
||||
// const [projects, setProjects] = useState([]);
|
||||
|
||||
// const fetchData = async (projectid) => {
|
||||
// try {
|
||||
// let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated");
|
||||
// if (
|
||||
// !EmployeeByProject_Cache ||
|
||||
// !EmployeeByProject_Cache.projectId === projectid
|
||||
// ) {
|
||||
// let response = await ProjectRepository.getProjectAllocation(projectid);
|
||||
// setEmployeeList(response.data);
|
||||
// cacheData("empListByProjectAllocated", {
|
||||
// data: response.data,
|
||||
// projectId: projectid,
|
||||
// });
|
||||
// setLoading(false);
|
||||
// } else {
|
||||
// setEmployeeList(EmployeeByProject_Cache.data);
|
||||
// setLoading(false);
|
||||
// }
|
||||
// } catch (err) {
|
||||
// setError("Failed to fetch data.");
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (selectedProject) {
|
||||
// fetchData(selectedProject);
|
||||
// }
|
||||
// }, [selectedProject]);
|
||||
|
||||
// return { projectEmployees, loading, projects };
|
||||
// };
|
||||
|
||||
// export const useProjectDetails = (projectId) => {
|
||||
// const { profile } = useProfile();
|
||||
// const [projects_Details, setProject_Details] = useState(null);
|
||||
// const [loading, setLoading] = useState(true);
|
||||
// const [error, setError] = useState("");
|
||||
|
||||
// const fetchData = async () => {
|
||||
// setLoading(true);
|
||||
|
||||
// const project_cache = getCachedData("projectInfo");
|
||||
// if (!project_cache || project_cache?.projectId != projectId) {
|
||||
// ProjectRepository.getProjectByprojectId(projectId)
|
||||
// .then((response) => {
|
||||
// setProject_Details(response.data);
|
||||
// cacheData("projectInfo", {
|
||||
// projectId: projectId,
|
||||
// data: response.data,
|
||||
// });
|
||||
// setLoading(false);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error(error);
|
||||
// setError("Failed to fetch data.");
|
||||
// setLoading(false);
|
||||
// });
|
||||
// } else {
|
||||
// setProject_Details(project_cache.data);
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (profile && projectId != undefined) {
|
||||
// fetchData();
|
||||
// }
|
||||
// }, [projectId, profile]);
|
||||
|
||||
// return { projects_Details, loading, error, refetch: fetchData };
|
||||
// };
|
||||
|
||||
// export const useProjectsByEmployee = (employeeId) => {
|
||||
// const [projectList, setProjectList] = useState([]);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [error, setError] = useState("");
|
||||
|
||||
// const fetchProjects = async (id) => {
|
||||
// try {
|
||||
// setLoading(true);
|
||||
// setError(""); // clear previous error
|
||||
// const res = await ProjectRepository.getProjectsByEmployee(id);
|
||||
// setProjectList(res.data);
|
||||
// cacheData("ProjectsByEmployee", { data: res.data, employeeId: id });
|
||||
// setLoading(false);
|
||||
// } catch (err) {
|
||||
// setError(err?.message || "Failed to fetch projects");
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!employeeId) return;
|
||||
|
||||
// const cache_project = getCachedData("ProjectsByEmployee");
|
||||
|
||||
// if (!cache_project?.data || cache_project?.employeeId !== employeeId) {
|
||||
// fetchProjects(employeeId);
|
||||
// } else {
|
||||
// setProjectList(cache_project.data);
|
||||
// }
|
||||
// }, [employeeId]);
|
||||
|
||||
// return {
|
||||
// projectList,
|
||||
// loading,
|
||||
// error,
|
||||
// refetch: fetchProjects,
|
||||
// };
|
||||
// };
|
||||
|
||||
// export const useProjectName = () => {
|
||||
// const [loading, setLoading] = useState(true);
|
||||
// const [projectNames, setProjectName] = useState([]);
|
||||
// const [Error, setError] = useState();
|
||||
// const dispatch = useDispatch();
|
||||
|
||||
// const fetchData = async () => {
|
||||
// try {
|
||||
// let response = await ProjectRepository.projectNameList();
|
||||
// setProjectName(response.data);
|
||||
// cacheData("basicProjectNameList", response.data);
|
||||
// setLoading(false);
|
||||
// if(response.data.length === 1){
|
||||
// dispatch(setProjectId(response.data[0]?.id));
|
||||
// }
|
||||
// } catch (err) {
|
||||
// setError("Failed to fetch data.");
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
// useEffect(() => {
|
||||
// fetchData();
|
||||
// }, []);
|
||||
|
||||
// return { projectNames, loading, Error, fetchData };
|
||||
// };
|
||||
|
||||
// ------------------------------Query-------------------
|
||||
|
||||
@ -313,6 +123,7 @@ export const useProjectName = () => {
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
isError
|
||||
} = useQuery({
|
||||
queryKey: ["basicProjectNameList"],
|
||||
queryFn: async () => {
|
||||
@ -323,7 +134,7 @@ export const useProjectName = () => {
|
||||
showToast(error.message || "Error while Fetching project Name", "error");
|
||||
},
|
||||
});
|
||||
return { projectNames: data, loading: isLoading, Error: error, refetch };
|
||||
return { projectNames: data, loading: isLoading, Error: error, refetch,isError };
|
||||
};
|
||||
|
||||
export const useProjectInfra = (projectId) => {
|
||||
|
||||
195
src/pages/Expense/ExpensePage.jsx
Normal file
195
src/pages/Expense/ExpensePage.jsx
Normal file
@ -0,0 +1,195 @@
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
// Components
|
||||
import ExpenseList from "../../components/Expenses/ExpenseList";
|
||||
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";
|
||||
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
|
||||
|
||||
// Context & Hooks
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
CREATE_EXEPENSE,
|
||||
VIEW_ALL_EXPNESE,
|
||||
VIEW_SELF_EXPENSE,
|
||||
} from "../../utils/constants";
|
||||
|
||||
// Schema & Defaults
|
||||
import {
|
||||
defaultFilter,
|
||||
SearchSchema,
|
||||
} from "../../components/Expenses/ExpenseSchema";
|
||||
|
||||
// Context
|
||||
export const ExpenseContext = createContext();
|
||||
export const useExpenseContext = () => {
|
||||
const context = useContext(ExpenseContext);
|
||||
if (!context) {
|
||||
throw new Error("useExpenseContext must be used within an ExpenseProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
const ExpensePage = () => {
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
const [filters, setFilter] = useState();
|
||||
const [groupBy, setGroupBy] = useState("transactionDate");
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const [ManageExpenseModal, setManageExpenseModal] = useState({
|
||||
IsOpen: null,
|
||||
expenseId: null,
|
||||
});
|
||||
|
||||
const [viewExpense, setViewExpense] = useState({
|
||||
expenseId: null,
|
||||
view: false,
|
||||
});
|
||||
|
||||
const [ViewDocument, setDocumentView] = useState({
|
||||
IsOpen: false,
|
||||
Image: null,
|
||||
});
|
||||
|
||||
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
|
||||
const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
|
||||
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
|
||||
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(SearchSchema),
|
||||
defaultValues: defaultFilter,
|
||||
});
|
||||
|
||||
const { reset } = methods;
|
||||
|
||||
const clearFilter = () => {
|
||||
setFilter(defaultFilter);
|
||||
reset();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Expense Filters",
|
||||
<ExpenseFilterPanel
|
||||
onApply={setFilter}
|
||||
handleGroupBy={setGroupBy}
|
||||
clearFilter={clearFilter}
|
||||
/>
|
||||
);
|
||||
|
||||
return () => {
|
||||
setShowTrigger(false);
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const contextValue = {
|
||||
setViewExpense,
|
||||
setManageExpenseModal,
|
||||
setDocumentView,
|
||||
};
|
||||
|
||||
return (
|
||||
<ExpenseContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Expense" }]} />
|
||||
|
||||
{(IsViewAll || IsViewSelf) ? (
|
||||
<>
|
||||
<div className="card my-3 px-sm-4 px-0">
|
||||
<div className="card-body py-2 px-3">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-6 ">
|
||||
<div className="d-flex align-items-center">
|
||||
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Expense"
|
||||
aria-describedby="search-label"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 me-1 m-sm-0 bg-primary rounded-circle"
|
||||
title="Add New Expense"
|
||||
onClick={() => setManageExpenseModal({ IsOpen: true, expenseId: null })}
|
||||
>
|
||||
<i className="bx bx-plus fs-4 text-white"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ExpenseList filters={filters} groupBy={groupBy} searchText={searchText} />
|
||||
</>
|
||||
) : (
|
||||
<div className="card text-center py-1">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5" />
|
||||
<p>Access Denied: You don't have permission to perform this action!</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
{ManageExpenseModal.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
|
||||
>
|
||||
<ManageExpense
|
||||
key={ManageExpenseModal.expenseId ?? "new"}
|
||||
expenseToEdit={ManageExpenseModal.expenseId}
|
||||
closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{viewExpense.view && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
modalType="top"
|
||||
closeModal={() => setViewExpense({ expenseId: null, view: false })}
|
||||
>
|
||||
<ViewExpense ExpenseId={viewExpense.expenseId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{ViewDocument.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
key={ViewDocument.Image ?? "doc"}
|
||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||
>
|
||||
<PreviewDocument imageUrl={ViewDocument.Image} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
</div>
|
||||
</ExpenseContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpensePage;
|
||||
24
src/repositories/ExpsenseRepository.jsx
Normal file
24
src/repositories/ExpsenseRepository.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { api } from "../utils/axiosClient";
|
||||
|
||||
|
||||
const ExpenseRepository = {
|
||||
GetExpenseList: ( pageSize, pageNumber, filter,searchString ) => {
|
||||
const payloadJsonString = JSON.stringify(filter);
|
||||
|
||||
|
||||
|
||||
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
|
||||
},
|
||||
|
||||
GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
|
||||
CreateExpense:(data)=>api.post("/api/Expense/create",data),
|
||||
UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
|
||||
DeleteExpense:(id)=>api.delete(`/api/Expense/delete/${id}`),
|
||||
|
||||
ActionOnExpense:(data)=>api.post('/api/expense/action',data),
|
||||
|
||||
GetExpenseFilter:()=>api.get('/api/Expense/filter')
|
||||
|
||||
}
|
||||
|
||||
export default ExpenseRepository;
|
||||
Loading…
x
Reference in New Issue
Block a user