Something went wrong Here- {error.message}
+ return (
+ <>
+
+
+
+ ),
+ },
+ {
+ key: "submitted",
+ label: "Submitted",
+ getValue: (e) => formatUTCToLocalTime(e?.createdAt),
+ isAlwaysVisible: true,
+ },
+ {
+ key: "amount",
+ label: "Amount",
+ getValue: (e) => (
+ <>
+ {e?.amount}
+
+ ),
+ isAlwaysVisible: true,
+ align: "text-end",
+ },
+ {
+ key: "status",
+ label: "Status",
+ align: "text-center",
+ getValue: (e) => (
+
+ {e.status?.name || "Unknown"}
+
+ ),
+ },
+ ];
+
+ if (isInitialLoading) return {error.message}
;
+
+ 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 && (
+
+ setIsDeleteModalOpen(false)}
+ loading={isPending}
+ paramData={deletingId}
+ />
+
+ )}
+
+
+
+
+ );
+};
+
+export default ExpenseList;
diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js
new file mode 100644
index 00000000..b1339228
--- /dev/null
+++ b/src/components/Expenses/ExpenseSchema.js
@@ -0,0 +1,166 @@
+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" }),
+ gstNumber :z.string().optional(),
+ 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: "",
+ gstNumber:"",
+ 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,
+};
+
diff --git a/src/components/Expenses/ExpenseSkeleton.jsx b/src/components/Expenses/ExpenseSkeleton.jsx
new file mode 100644
index 00000000..dbe1a5d7
--- /dev/null
+++ b/src/components/Expenses/ExpenseSkeleton.jsx
@@ -0,0 +1,306 @@
+import React from "react";
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+
+);
+
+const ExpenseSkeleton = () => {
+ return (
+
+
+
+
+
+
+ {data?.data?.length > 0 && (
+
+ |
+ {col.label}
+ |
+ )
+ )}
+ + Action + | +
|---|---|
| + + {IsGroupedByDate + ? formatUTCToLocalTime(group) + : group} + + | +|
| + {col.customRender + ? col.customRender(expense) + : col.getValue(expense)} + | + ) + )} +
+
+
+ setViewExpense({
+ expenseId: expense.id,
+ view: true,
+ })
+ }
+ >
+ {canEditExpense(expense) && (
+
+ setManageExpenseModal({
+ IsOpen: true,
+ expenseId: expense.id,
+ })
+ }
+ >
+ )}
+
+ {canDetetExpense(expense) && (
+ {
+ setIsDeleteModalOpen(true);
+ setDeletingId(expense.id);
+ }}
+ >
+ )}
+
+ |
+
| + No Expense Found + | +
+
+ );
+};
+
+export default ExpenseSkeleton;
+
+export const ExpenseDetailsSkeleton = () => {
+ return (
+
+
+
+ {[...Array(5)].map((_, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+const SkeletonCell = ({
+ width = "100%",
+ height = 20,
+ className = "",
+ style = {},
+}) => (
+
+);
+
+export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
+ return (
+
+
+ +
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+ ))}
+
+ {[...Array(6)].map((_, i) => (
+
+
+ ))}
+
+
+
+
+
+ {[...Array(2)].map((_, i) => (
+
+
+ {/* Icon placeholder */}
+
+ {/* Filename placeholder */}
+
+
+ ))}
+ + +
+
+
+ {[...Array(2)].map((_, i) => (
+
+
+
+
+
+
+ );
+};
+
+export const ExpenseFilterSkeleton = () => {
+ return (
+ |
+ Expense Type
+ |
+
+ Payment Mode
+ |
+ Submitted By | +Submitted | +Amount | +Status | +Action | +
|---|---|---|---|---|---|---|
|
+ |
+ ||||||
|
+ |
+
+ {/* Payment Mode */}
+
+ |
+
+ {/* Submitted By (Avatar + name) */}
+
+
+
+ |
+ {/* Submitted */}
+
+ |
+
+ {/* Amount */}
+
+ |
+
+ {/* Status */}
+
+ |
+
+ {/* Action */}
+
+
+ {[...Array(3)].map((__, i) => (
+
+ |
+
+ {/* Created Date Label and Skeleton */}
+
+ );
+};
diff --git a/src/components/Expenses/ExpenseStatusLogs.jsx b/src/components/Expenses/ExpenseStatusLogs.jsx
new file mode 100644
index 00000000..575508db
--- /dev/null
+++ b/src/components/Expenses/ExpenseStatusLogs.jsx
@@ -0,0 +1,68 @@
+import { useState,useMemo } from "react";
+import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+
+const ExpenseStatusLogs = ({ data }) => {
+ const [visibleCount, setVisibleCount] = useState(4);
+
+ const sortedLogs = useMemo(() => {
+ if (!data?.expenseLogs) return [];
+ return [...data.expenseLogs].sort(
+ (a, b) => new Date(b.updateAt) - new Date(a.updateAt)
+ );
+ }, [data?.expenseLogs]);
+
+ const logsToShow = sortedLogs.slice(0, visibleCount);
+
+ const handleShowMore = () => {
+ setVisibleCount((prev) => prev + 4);
+ };
+
+ return (
+ <>
+
+
+
+
+ {/* Project Select */}
+
+
+ {/* Buttons */}
+
+
+
+ {/* Submitted By Select */}
+
+
+
+ {/* Paid By Select */}
+
+
+
+ {/* Status Checkboxes */}
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+
+ {logsToShow.map((log) => (
+
+
+ {sortedLogs.length > visibleCount && (
+
+
+ ))}
+
+
+
+
+
+ {`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}
+
+ {log.action}
+
+
+ {formatUTCToLocalTime(log.updateAt,true)}
+
+
+
+ {log.comment}
+
+
+
+
+ )}
+
+ );
+};
+
+
+export default ExpenseStatusLogs;
diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
new file mode 100644
index 00000000..495ebdd9
--- /dev/null
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -0,0 +1,578 @@
+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 || "",
+ gstNumber:data.gstNumber || "",
+ 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
+
+ );
+};
+
+export default ManageExpense;
diff --git a/src/components/Expenses/PreviewDocument.jsx b/src/components/Expenses/PreviewDocument.jsx
new file mode 100644
index 00000000..9c0f5c49
--- /dev/null
+++ b/src/components/Expenses/PreviewDocument.jsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+const PreviewDocument = ({ imageUrl }) => {
+ const [loading, setLoading] = useState(true);
+
+ return (
+ + {expenseToEdit ? "Update Expense " : "Create New Expense"} +
+ +
+ {loading && (
+ 
setLoading(false)}
+ />
+
+ );
+};
+
+export default PreviewDocument;
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
new file mode 100644
index 00000000..568b695d
--- /dev/null
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -0,0 +1,466 @@
+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, getIconByFileType } 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, isFetching } = 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
+ Loading...
+
+ )}
+
-
+
+ );
+};
+
+export default ExpensePage;
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 73ef5901..a7695c4d 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -295,12 +295,12 @@ const EmployeeList = () => {
{ViewTeamMember ? (
//
- {/* */}
-
-
+
+ {
+ inputRef.current = el;
+ ref(el);
+ }}
+ readOnly={!allowText}
+ autoComplete="off"
+ />
+
+ {
+ if (inputRef.current && inputRef.current._flatpickr) {
+ inputRef.current._flatpickr.open();
+ }
+ }}
+ >
+
+
);
};
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index e7239c53..1e95ef09 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -1,8 +1,10 @@
import React, { useEffect, useRef } from "react";
-
+import { useController, useFormContext, useWatch } from "react-hook-form";
const DateRangePicker = ({
+ md,
+ sm,
onRangeChange,
- DateDifference = 7,
+ DateDifference = 7,
endDateMode = "yesterday",
}) => {
const inputRef = useRef(null);
@@ -10,33 +12,34 @@ const DateRangePicker = ({
useEffect(() => {
const endDate = new Date();
if (endDateMode === "yesterday") {
- endDate.setDate(endDate.getDate() - 1);
+ endDate.setDate(endDate.getDate() - 1);
}
endDate.setHours(0, 0, 0, 0);
- const startDate = new Date(endDate);
+ const startDate = new Date(endDate);
startDate.setDate(endDate.getDate() - (DateDifference - 1));
startDate.setHours(0, 0, 0, 0);
const fp = flatpickr(inputRef.current, {
mode: "range",
- dateFormat: "Y-m-d",
- altInput: true,
- altFormat: "d-m-Y",
- defaultDate: [startDate, endDate],
- static: true,
+ dateFormat: "Y-m-d",
+ altInput: true,
+ altFormat: "d-m-Y",
+ defaultDate: [startDate, endDate],
+ static: false,
+ // appendTo: document.body,
clickOpens: true,
- maxDate: endDate, // ✅ Disable future dates
+ maxDate: endDate,
onChange: (selectedDates, dateStr) => {
- const [startDateString, endDateString] = dateStr.split(" to ");
+ const [startDateString, endDateString] = dateStr.split(" To ");
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
},
});
onRangeChange?.({
- startDate: startDate.toLocaleDateString("en-CA"),
- endDate: endDate.toLocaleDateString("en-CA"),
+ startDate: startDate.toLocaleDateString("en-CA"),
+ endDate: endDate.toLocaleDateString("en-CA"),
});
return () => {
@@ -45,14 +48,129 @@ const DateRangePicker = ({
}, [onRangeChange, DateDifference, endDateMode]);
return (
-
+
+
+
+
+
);
};
export default DateRangePicker;
+
+
+
+
+
+export const DateRangePicker1 = ({
+ startField = "startDate",
+ endField = "endDate",
+ placeholder = "Select date range",
+ className = "",
+ allowText = false,
+ resetSignal, // <- NEW prop
+ ...rest
+}) => {
+ const inputRef = useRef(null);
+ const { control, setValue, getValues } = useFormContext();
+
+ const {
+ field: { ref },
+ } = useController({ name: startField, control });
+
+ const applyDefaultDates = () => {
+ const today = new Date();
+ const past = new Date();
+ past.setDate(today.getDate() - 6);
+
+ const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+ const formattedStart = format(past);
+ const formattedEnd = format(today);
+
+ setValue(startField, formattedStart, { shouldValidate: true });
+ setValue(endField, formattedEnd, { shouldValidate: true });
+
+ if (inputRef.current?._flatpickr) {
+ inputRef.current._flatpickr.setDate([past, today]);
+ }
+ };
+
+ useEffect(() => {
+ if (!inputRef.current || inputRef.current._flatpickr) return;
+
+ const instance = flatpickr(inputRef.current, {
+ mode: "range",
+ dateFormat: "d-m-Y",
+ allowInput: allowText,
+ onChange: (selectedDates) => {
+ if (selectedDates.length === 2) {
+ const [start, end] = selectedDates;
+ const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+ setValue(startField, format(start), { shouldValidate: true });
+ setValue(endField, format(end), { shouldValidate: true });
+ } else {
+ setValue(startField, "", { shouldValidate: true });
+ setValue(endField, "", { shouldValidate: true });
+ }
+ },
+ ...rest,
+ });
+
+ // Apply default if empty
+ const currentStart = getValues(startField);
+ const currentEnd = getValues(endField);
+ if (!currentStart && !currentEnd) {
+ applyDefaultDates();
+ } else if (currentStart && currentEnd) {
+ instance.setDate([
+ flatpickr.parseDate(currentStart, "d-m-Y"),
+ flatpickr.parseDate(currentEnd, "d-m-Y"),
+ ]);
+ }
+
+ return () => instance.destroy();
+ }, []);
+
+ // Reapply default range on resetSignal change
+ useEffect(() => {
+ if (resetSignal !== undefined) {
+ applyDefaultDates();
+ }
+ }, [resetSignal]);
+
+ const start = getValues(startField);
+ const end = getValues(endField);
+ const formattedValue = start && end ? `${start} To ${end}` : "";
+
+ return (
+
+ {
+ inputRef.current = el;
+ ref(el);
+ }}
+ readOnly={!allowText}
+ autoComplete="off"
+ />
+ inputRef.current?._flatpickr?.open()}
+ >
+
+
+
+ );
+};
diff --git a/src/components/common/EmployeeSearchInput.jsx b/src/components/common/EmployeeSearchInput.jsx
new file mode 100644
index 00000000..f1121e6b
--- /dev/null
+++ b/src/components/common/EmployeeSearchInput.jsx
@@ -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 (
+
+ {
+ setSearch(e.target.value);
+ setShowDropdown(true);
+ onChange("");
+ }}
+ onFocus={() => {
+ if (search) setShowDropdown(true);
+ }}
+ />
+
+ {showDropdown && (employees?.data?.length > 0 || isLoading) && (
+
+ );
+};
+
+export default EmployeeSearchInput;
diff --git a/src/components/common/Error.jsx b/src/components/common/Error.jsx
new file mode 100644
index 00000000..1e44947f
--- /dev/null
+++ b/src/components/common/Error.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Error = ({error,close}) => {
+ console.log(error)
+ return (
+ -
+ {isLoading ? (
+
- + Searching... + + + ) : ( + employees?.data?.map((emp) => ( +
- handleSelect(emp)}
+ >
+ ++
+ + {`${emp?.firstName} ${emp?.lastName}`.trim()} + +
+ ))
+ )}
+
+
+ )
+}
+
+export default Error
\ No newline at end of file
diff --git a/src/components/common/GlobalOffcanvas.jsx b/src/components/common/GlobalOffcanvas.jsx
new file mode 100644
index 00000000..bcca92bb
--- /dev/null
+++ b/src/components/common/GlobalOffcanvas.jsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+import { useFab } from "../../Context/FabContext";
+
+const GlobalOffcanvas = () => {
+ const { offcanvas, setIsOffcanvasOpen } = useFab();
+ const offcanvasRef = useRef();
+
+ useEffect(() => {
+ const el = offcanvasRef.current;
+ const bsOffcanvas = new bootstrap.Offcanvas(el);
+
+ const handleShow = () => setIsOffcanvasOpen(true);
+ const handleHide = () => setIsOffcanvasOpen(false);
+
+ el.addEventListener("show.bs.offcanvas", handleShow);
+ el.addEventListener("hidden.bs.offcanvas", handleHide);
+
+ return () => {
+ el.removeEventListener("show.bs.offcanvas", handleShow);
+ el.removeEventListener("hidden.bs.offcanvas", handleHide);
+ };
+ }, []);
+
+ return (
+ {error.statusCode || error?.response?.status +}
+Internal Server Error
++ {error.message} +
+ close()}> + Go to Home + +
+
+ );
+};
+
+export default GlobalOffcanvas;
diff --git a/src/components/common/OffcanvasTrigger.jsx b/src/components/common/OffcanvasTrigger.jsx
new file mode 100644
index 00000000..3c74fb14
--- /dev/null
+++ b/src/components/common/OffcanvasTrigger.jsx
@@ -0,0 +1,26 @@
+import { createPortal } from "react-dom";
+import { useFab } from "../../Context/FabContext";
+
+const OffcanvasTrigger = () => {
+ const { openOffcanvas, offcanvas, showTrigger } = useFab();
+
+ if (!showTrigger || !offcanvas.content) return null;
+
+ const btn = (
+ openOffcanvas(offcanvas.title, offcanvas.content)}
+ role="button"
+ style={{
+ top: "25%",
+ right: "0%",
+ cursor: "pointer",
+ zIndex: 1056,
+ }}
+ />
+ );
+
+ return createPortal(btn, document.body);
+};
+
+export default OffcanvasTrigger;
diff --git a/src/components/common/Pagination.jsx b/src/components/common/Pagination.jsx
new file mode 100644
index 00000000..5274eddc
--- /dev/null
+++ b/src/components/common/Pagination.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+
+const getPaginationRange = (currentPage, totalPages, delta = 1) => {
+ const range = [];
+ const rangeWithDots = [];
+ let l;
+
+ for (let i = 1; i <= totalPages; i++) {
+ if (
+ i === 1 ||
+ i === totalPages ||
+ (i >= currentPage - delta && i <= currentPage + delta)
+ ) {
+ range.push(i);
+ }
+ }
+
+ for (let i of range) {
+ if (l) {
+ if (i - l === 2) {
+ rangeWithDots.push(l + 1);
+ } else if (i - l !== 1) {
+ rangeWithDots.push("...");
+ }
+ }
+ rangeWithDots.push(i);
+ l = i;
+ }
+
+ return rangeWithDots;
+};
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+ if (totalPages <= 1) return null;
+
+ const paginationRange = getPaginationRange(currentPage, totalPages);
+
+ return (
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/common/SelectMultiple.jsx b/src/components/common/SelectMultiple.jsx
index 272f8944..3e80b696 100644
--- a/src/components/common/SelectMultiple.jsx
+++ b/src/components/common/SelectMultiple.jsx
@@ -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,96 +59,113 @@ 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());
+ });
- return (
-
+
+ + {offcanvas.title} +
+ +
+ {offcanvas.content ||
+ No content
} +
-
-
-
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
new file mode 100644
index 00000000..a8be4e72
--- /dev/null
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -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",
+ setIsOpen((prev) => !prev)}
- >
- 0
- ? "placeholder-style-selected"
- : "placeholder-style"
- }
- >
-
- {selectedValues.length > 0 ? (
- selectedValues.map((val) => {
- const found = options.find((opt) => opt[valueKey] === val);
- return (
-
- {found ? found[labelKey] : ""}
-
- );
- })
- ) : (
- {placeholder}
- )}
-
-
-
+ const dropdownElement = (
+
+
);
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 65917c3f..d6a3463b 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -27,7 +27,7 @@ const AttendancePage = () => {
const [ShowPending, setShowPending] = useState(false);
const queryClient = useQueryClient();
const loginUser = getCachedProfileData();
- var selectedProject = useSelector((store) => store.localVariables.projectId);
+ const selectedProject = useSelector((store) => store.localVariables.projectId);
const dispatch = useDispatch();
const [attendances, setAttendances] = useState();
@@ -155,28 +155,32 @@ const AttendancePage = () => {
-
+ setSearchText(e.target.value)}
+ className="multi-select-dropdown-search-input"
+ style={{ width: "100%", padding: 4 }}
+ />
- {isOpen && (
-
-
+ {loading ? (
+
+ );
+};
+
+export default ManageExpenseStatus;
diff --git a/src/components/master/ManageExpenseType.jsx b/src/components/master/ManageExpenseType.jsx
new file mode 100644
index 00000000..8f280af5
--- /dev/null
+++ b/src/components/master/ManageExpenseType.jsx
@@ -0,0 +1,113 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ useCreateExpenseType,
+ useUpdateExpenseType,
+} from "../../hooks/masterHook/useMaster";
+
+const ExpnseSchema = z.object({
+ name: z.string().min(1, { message: "Name is required" }),
+ noOfPersonsRequired: z.boolean().default(false),
+ description: z.string().min(1, { message: "Description is required" }),
+});
+
+const ManageExpenseType = ({ data = null, onClose }) => {
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(ExpnseSchema),
+ defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
+ });
+ const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
+ () => onClose?.()
+ );
+ const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
+ onClose?.()
+ );
+
+ const onSubmit = (payload) => {
+ if (data) {
+ UpdateExpenseType({
+ id: data.id,
+ payload: { ...payload, id: data.id },
+ });
+ } else {
+ CreateExpenseType(payload);
+ }
+ };
+
+ useEffect(() => {
+ if (data) {
+ reset({
+ name: data.name ?? "",
+ noOfPersonsRequired: data.noOfPersonsRequired ?? false,
+ description: data.description ?? "",
+ });
+ }
+ }, [data]);
+ return (
+
+ );
+};
+
+export default ManageExpenseType;
diff --git a/src/components/master/ManagePaymentMode.jsx b/src/components/master/ManagePaymentMode.jsx
new file mode 100644
index 00000000..b05856db
--- /dev/null
+++ b/src/components/master/ManagePaymentMode.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCreatePaymentMode, useUpdatePaymentMode } from "../../hooks/masterHook/useMaster";
+
+const ExpnseSchema = z.object({
+ name: z.string().min(1, { message: "Name is required" }),
+ description: z.string().min(1, { message: "Description is required" }),
+});
+
+const ManagePaymentMode = ({ data = null, onClose }) => {
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(ExpnseSchema),
+ defaultValues: { name: "", description: "" },
+ });
+
+ const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
+ onClose?.()
+ );
+ const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.())
+
+ const onSubmit = (payload) => {
+ if(data){
+ UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
+ }else(
+ CreatePaymentMode(payload)
+ )
+
+ };
+
+ useEffect(()=>{
+ if(data){
+ reset({
+ name:data.name ?? "",
+ description:data.description ?? ""
+ })
+ }
+ },[data])
+
+
+ return (
+
+ );
+};
+
+export default ManagePaymentMode;
diff --git a/src/components/master/MasterModal.jsx b/src/components/master/MasterModal.jsx
index 52e22114..0a472727 100644
--- a/src/components/master/MasterModal.jsx
+++ b/src/components/master/MasterModal.jsx
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
-
import CreateRole from "./CreateRole";
import DeleteMaster from "./DeleteMaster";
import EditRole from "./EditRole";
@@ -18,67 +17,45 @@ import CreateContactTag from "./CreateContactTag";
import EditContactCategory from "./EditContactCategory";
import EditContactTag from "./EditContactTag";
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
+import ManageExpenseType from "./ManageExpenseType";
+import ManagePaymentMode from "./ManagePaymentMode";
+import ManageExpenseStatus from "./ManageExpenseStatus";
+
const MasterModal = ({ modaldata, closeModal }) => {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
- // const handleSelectedMasterDeleted = async () =>
- // {
- // debugger
- // const deleteFn = MasterRespository[modaldata.masterType];
- // if (!deleteFn) {
- // showToast(`No delete strategy defined for master type`,"error");
- // return false;
- // }
- // try
- // {
- // const response = await deleteFn( modaldata?.item?.id );
- // const selected_cachedData = getCachedData( modaldata?.masterType );
- // const updated_master = selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
- // cacheData( modaldata?.masterType, updated_master )
-
- // showToast(`${modaldata?.masterType} is deleted successfully`, "success");
- // handleCloseDeleteModal()
-
- // } catch ( error )
- // {
- // const message = error.response.data.message || error.message || "Error occured api during call"
- // showToast(message, "success");
- // }
- // }
-
const handleSelectedMasterDeleted = () => {
- if (!modaldata?.masterType || !modaldata?.item?.id) {
+ const { masterType, item, validateFn } = modaldata || {};
+ if (!masterType || !item?.id) {
showToast("Missing master type or item", "error");
return;
}
+
deleteMasterItem(
- {
- masterType: modaldata.masterType,
- item: modaldata.item,
- validateFn: modaldata.validateFn, // optional
- },
- {
- onSuccess: () => {
- handleCloseDeleteModal();
- },
- }
+ { masterType, item, validateFn },
+ { onSuccess: handleCloseDeleteModal }
);
};
+ const handleCloseDeleteModal = () => {
+ setIsDeleteModalOpen(false);
+ closeModal();
+ };
+
useEffect(() => {
if (modaldata?.modalType === "delete") {
setIsDeleteModalOpen(true);
}
}, [modaldata]);
- const handleCloseDeleteModal = () => {
- setIsDeleteModalOpen(false);
+ if (!modaldata?.modalType) {
closeModal();
- };
+ return null;
+ }
- if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
+ if (modaldata.modalType === "delete" && isDeleteModalOpen) {
return (
,
+ "Edit-Payment Mode":,
+ "Expense Status":,
+ "Edit-Expense Status":
+ };
+
+ return modalComponents[modalType] || null;
+ };
+
+ const isLargeModal = ["Application Role", "Edit-Application Role"].includes(
+ modaldata.modalType
+ );
+
return (
+
+
+ {filteredOptions.map((item) => {
+ const labelVal = getLabel(item);
+ const valueVal = item[valueKey];
+ const isChecked = selectedValues.includes(valueVal);
+
+ return (
+
);
+
+ return (
+ <>
+
setSearchText(e.target.value)}
- className="multi-select-dropdown-search-input"
+ type="checkbox"
+ className="custom-checkbox form-check-input"
+ checked={isChecked}
+ onChange={() => handleCheckboxChange(valueVal)}
+ style={{ marginRight: 8 }}
/>
+
+ );
+ })}
- {filteredOptions.map((item) => {
- const labelVal = item[labelKey];
- const valueVal = item[valueKey];
- const isChecked = selectedValues.includes(valueVal);
-
- return (
-
- handleCheckboxChange(valueVal)}
- />
-
-
- );
- })}
- {!IsLoading && filteredOptions.length === 0 && (
-
-
-
- )}
- {IsLoading && filteredOptions.length === 0 && (
-
-
-
- )}
+ {!IsLoading && filteredOptions.length === 0 && (
+
+
+
+ )}
+ {IsLoading && filteredOptions.length === 0 && (
+
+
)}
+
+
+
+
+ {isOpen && createPortal(dropdownElement, document.body)}
+
+ );
};
export default SelectMultiple;
diff --git a/src/components/master/ManageExpenseStatus.jsx b/src/components/master/ManageExpenseStatus.jsx
new file mode 100644
index 00000000..eccc3bf8
--- /dev/null
+++ b/src/components/master/ManageExpenseStatus.jsx
@@ -0,0 +1,165 @@
+import React, { useEffect } from "react";
+import {
+ useForm,
+ FormProvider,
+} from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import SelectMultiple from "../common/SelectMultiple";
+import { useFeatures } from "../../hooks/useMasterRole";
+import { EXPENSE_MANAGEMENT } from "../../utils/constants";
+import { useCreateExpenseStatus, useUpdateExpenseStatus } from "../../hooks/masterHook/useMaster";
+import { displayName } from "react-quill";
+import { AppColorconfig } from "../../utils/appUtils";
+
+const ExpenseStatusSchema = z.object({
+ name: z.string().min(1, { message: "Name is required" }),
+ displayName: z.string().min(1, { message: "Display Name is required" }),
+ description: z.string().min(1, { message: "Description is required" }),
+ permissionIds: z.array(z.string()).min(1, {
+ message: "At least one permission is required",
+ }),
+ color: z
+ .string()
+ .regex(/^#([0-9A-F]{3}){1,2}$/i, { message: "Invalid hex color" }),
+});
+
+const ManageExpenseStatus = ({data, onClose }) => {
+ const methods = useForm({
+ resolver: zodResolver(ExpenseStatusSchema),
+ defaultValues: {
+ name: "",
+ displayName: "",
+ description: "",
+ permissionIds: [],
+ color: AppColorconfig.colors.primary,
+ },
+ });
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = methods;
+
+ const { masterFeatures, loading } = useFeatures();
+
+ const ExpenseFeature = masterFeatures?.find(
+ (appfeature) => appfeature.id === EXPENSE_MANAGEMENT
+ );
+ const {mutate:CreateExpenseStatus,isPending:isPending} = useCreateExpenseStatus(()=>onClose?.())
+ const {mutate:UpdateExpenseStatus,isPending:Updating} = useUpdateExpenseStatus(()=>onClose?.());
+
+
+
+ const onSubmit = (payload) => {
+ if(data){
+ UpdateExpenseStatus({id:data.id,payload:{...payload,id:data.id}})
+ }else{
+ CreateExpenseStatus(payload)
+ }
+ };
+
+
+ useEffect(()=>{
+ if(data){
+ reset({
+ name:data.name ?? "",
+ displayName:data.displayName ?? "",
+ description:data.description ?? "",
+ permissionIds:data.permissionIds ?? [],
+ color:data.color ?? AppColorconfig.colors.primary
+ })
+ }
+ },[data])
+ return (
+ setIsOpen((prev) => !prev)}
+ style={{ cursor: "pointer" }}
+ >
+ 0 ? "placeholder-style-selected" : "placeholder-style"
+ }
+ >
+
+
+ {selectedValues.length > 0 ? (
+ selectedValues.map((val) => {
+ const found = options.find((opt) => opt[valueKey] === val);
+ const label = found ? getLabel(found) : "";
+ return (
+
+ {label}
+
+ );
+ })
+ ) : (
+ {placeholder}
+ )}
+
+
+
+ Loading...
+ ) : (
+
+ )}
+ {
);
}
+
+ const renderModalContent = () => {
+ const { modalType, item, masterType } = modaldata;
+
+ const modalComponents = {
+ "Application Role":
- {activeTab === "all" && (
-
+
-
- )}
- {activeTab === "logs" && (
-
-
- )}
- {activeTab === "regularization" && DoRegularized && (
-
-
- )}
-
+ {selectedProject ? (
+ <>
+ {activeTab === "all" && (
+
+
+
+ )}
+ {activeTab === "logs" && (
+
+
+ )}
+ {activeTab === "regularization" && DoRegularized && (
+
+
+ )}
+
+ ) : (
+
+ Please Select Project!
+
+ )}
+
+ setManageExpenseModal({ IsOpen: null, expenseId: null })}
+ >
+ setManageExpenseModal({ IsOpen: null, expenseId: null })}
+ />
+
+ )}
+
+ {viewExpense.view && (
+ setViewExpense({ expenseId: null, view: false })}
+ >
+
+ )}
+
+ {ViewDocument.IsOpen && (
+ setDocumentView({ IsOpen: false, Image: null })}
+ >
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setSearchText(e.target.value)}
+ />
+
+
+ {IsCreatedAble && (
+
+ )}
+
+
+
+
+ )}
+
+ {/* Modals */}
+ {ManageExpenseModal.IsOpen && (
+ Access Denied: You don't have permission to perform this action!
+
-
+
{/* Switches: All Employees + Inactive */}
@@ -581,7 +581,7 @@ const EmployeeList = () => {
{item.email ? (
-
+
{item.email}
) : (
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx
index c11f5861..7904e6af 100644
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@@ -1,94 +1,94 @@
import React, { useState, useEffect, useMemo } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import MasterModal from "../../components/master/MasterModal";
-import { mastersList} from "../../data/masters";
+import { mastersList } from "../../data/masters";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"
import MasterTable from "./MasterTable";
import { getCachedData } from "../../slices/apiDataManager";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
-import {useQueryClient} from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
const MasterPage = () => {
-const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
-const [searchTerm, setSearchTerm] = useState('');
-const [filteredResults, setFilteredResults] = useState([]);
-const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+ const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
+ const [searchTerm, setSearchTerm] = useState('');
+ const [filteredResults, setFilteredResults] = useState([]);
+ const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-const dispatch = useDispatch();
-const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
-const queryClient = useQueryClient();
+ const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
+ const dispatch = useDispatch();
+ const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+ const queryClient = useQueryClient();
-const { data: masterData = [], loading, error, RecallApi } = useMaster();
+ const { data: masterData = [], loading, error, RecallApi } = useMaster();
-const openModal = () => setIsCreateModalOpen(true);
+ const openModal = () => setIsCreateModalOpen(true);
-const closeModal = () => {
- setIsCreateModalOpen(false);
- setModalConfig(null);
-
- // Clean up Bootstrap modal manually
- const modalEl = document.getElementById('master-modal');
- modalEl?.classList.remove('show');
- if (modalEl) modalEl.style.display = 'none';
-
- document.body.classList.remove('modal-open');
- document.body.style.overflow = 'auto';
-
- document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
-};
-
-const handleModalData = (modalType, item, masterType = selectedMaster) => {
- setModalConfig({ modalType, item, masterType });
-};
-
-const handleSearch = (e) => {
- const value = e.target.value.toLowerCase();
- setSearchTerm(value);
-
- if (!masterData?.length) return;
-
- const results = masterData.filter((item) =>
- Object.values(item).some(
- (field) => field?.toString().toLowerCase().includes(value)
- )
- );
- setFilteredResults(results);
-};
-const displayData = useMemo(() => {
- if (searchTerm) return filteredResults;
- return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
-}, [searchTerm, filteredResults, selectedMaster, masterData]);
-
-const columns = useMemo(() => {
- if (!displayData?.length) return [];
- return Object.keys(displayData[0]).map((key) => ({
- key,
- label: key.toUpperCase(),
- }));
-}, [displayData]);
-
-useEffect(() => {
- if (modalConfig) openModal();
-}, [modalConfig]);
-
-useEffect(() => {
- return () => {
+ const closeModal = () => {
setIsCreateModalOpen(false);
- closeModal();
+ setModalConfig(null);
+
+ // Clean up Bootstrap modal manually
+ const modalEl = document.getElementById('master-modal');
+ modalEl?.classList.remove('show');
+ if (modalEl) modalEl.style.display = 'none';
+
+ document.body.classList.remove('modal-open');
+ document.body.style.overflow = 'auto';
+
+ document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
};
-}, []);
+
+ const handleModalData = (modalType, item, masterType = selectedMaster) => {
+ setModalConfig({ modalType, item, masterType });
+ };
+
+ const handleSearch = (e) => {
+ const value = e.target.value.toLowerCase();
+ setSearchTerm(value);
+
+ if (!masterData?.length) return;
+
+ const results = masterData.filter((item) =>
+ Object.values(item).some(
+ (field) => field?.toString().toLowerCase().includes(value)
+ )
+ );
+ setFilteredResults(results);
+ };
+ const displayData = useMemo(() => {
+ if (searchTerm) return filteredResults;
+ return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
+ }, [searchTerm, filteredResults, selectedMaster, masterData]);
+
+ const columns = useMemo(() => {
+ if (!displayData?.length) return [];
+ return Object.keys(displayData[0]).map((key) => ({
+ key,
+ label: key.toUpperCase(),
+ }));
+ }, [displayData]);
+
+ useEffect(() => {
+ if (modalConfig) openModal();
+ }, [modalConfig]);
+
+ useEffect(() => {
+ return () => {
+ setIsCreateModalOpen(false);
+ closeModal();
+ };
+ }, []);
return (
<>
{isCreateModalOpen && (
-
@@ -100,7 +100,7 @@ useEffect(() => {
>
-
+
{
>
-
+