diff --git a/index.html b/index.html index 95db7228..d4749c08 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,8 @@ + + diff --git a/public/assets/vendor/libs/tagify/tagify.css b/public/assets/vendor/libs/tagify/tagify.css index e69154de..9c861220 100644 --- a/public/assets/vendor/libs/tagify/tagify.css +++ b/public/assets/vendor/libs/tagify/tagify.css @@ -725,7 +725,8 @@ transition: none; display: flex; align-items: flex-end; - padding: calc(2px - var(--bs-border-width)) 0.4375rem 0.4231rem !important; + /* padding: calc(2px - var(--bs-border-width)) 0.4375rem 0.4231rem !important; */ + padding: calc(2px - var(--bs-border-width)) 0.4375rem 0.2rem !important; } .fv-plugins-bootstrap5-row-invalid .tagify.form-control { padding: 0 calc(0.4375rem - var(--bs-border-width)) calc(0.4375rem - 2px) !important; diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx index e52e3a50..1a9065bd 100644 --- a/src/components/RecurringExpense/ManageRecurringExpense.jsx +++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx @@ -1,179 +1,232 @@ -import React, { useEffect, useState } from 'react' -import Label from '../common/Label'; -import { Controller, useForm } from 'react-hook-form'; -import { useExpenseCategory, useRecurringStatus } from '../../hooks/masterHook/useMaster'; -import DatePicker from '../common/DatePicker'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema'; -import { FREQUENCY_FOR_RECURRING, INR_CURRENCY_CODE } from '../../utils/constants'; -import { useCurrencies, useProjectName } from '../../hooks/useProjects'; -import { useCreateRecurringExpense, usePayee, useRecurringExpenseDetail, useUpdateRecurringExpense } from '../../hooks/useExpense'; -import InputSuggestions from '../common/InputSuggestion'; -import MultiEmployeeSearchInput from '../common/MultiEmployeeSearchInput'; +import React, { useEffect, useState } from "react"; +import Label from "../common/Label"; +import { Controller, useForm } from "react-hook-form"; +import { + useExpenseCategory, + useRecurringStatus, +} from "../../hooks/masterHook/useMaster"; +import DatePicker from "../common/DatePicker"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { + defaultRecurringExpense, + PaymentRecurringExpense, +} from "./RecurringExpenseSchema"; +import { + FREQUENCY_FOR_RECURRING, + INR_CURRENCY_CODE, +} from "../../utils/constants"; +import { useCurrencies, useProjectName } from "../../hooks/useProjects"; +import { + useCreateRecurringExpense, + usePayee, + useRecurringExpenseDetail, + useUpdateRecurringExpense, +} from "../../hooks/useExpense"; +import InputSuggestions from "../common/InputSuggestion"; +import MultiEmployeeSearchInput from "../common/MultiEmployeeSearchInput"; +import UsersTagInput from "../common/usesInput"; +import { useEmployeesName } from "../../hooks/useEmployees"; function ManageRecurringExpense({ closeModal, requestToEdit = null }) { - const { + const { data, isLoading, isError, error: requestError, } = useRecurringExpenseDetail(requestToEdit); - //APIs - const { projectNames, loading: projectLoading, error, isError: isProjectError, } = useProjectName(); - const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies(); - const { data: statusData, isLoading: statusLoading, isError: statusError } = useRecurringStatus(); - const { data: Payees, isLoading: isPayeeLoaing, isError: isPayeeError, error: payeeError } = usePayee() - const { ExpenseCategories, loading: ExpenseLoading, error: ExpenseError } = useExpenseCategory(); + const { data: employees } = useEmployeesName() + //APIs + const { + projectNames, + loading: projectLoading, + error, + isError: isProjectError, + } = useProjectName(); + const { + data: currencyData, + isLoading: currencyLoading, + isError: currencyError, + } = useCurrencies(); + const { + data: statusData, + isLoading: statusLoading, + isError: statusError, + } = useRecurringStatus(); + const { + data: Payees, + isLoading: isPayeeLoaing, + isError: isPayeeError, + error: payeeError, + } = usePayee(); + const { + ExpenseCategories, + loading: ExpenseLoading, + error: ExpenseError, + } = useExpenseCategory(); - const schema = PaymentRecurringExpense(); - const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({ - resolver: zodResolver(schema), - defaultValues: defaultRecurringExpense, + const schema = PaymentRecurringExpense(); + const { + register, + control, + watch, + handleSubmit, + setValue, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), + defaultValues: defaultRecurringExpense, + }); + const handleClose = () => { + reset(); + closeModal(); + }; + + const { mutate: CreateRecurringExpense, isPending: createPending } = + useCreateRecurringExpense(() => { + handleClose(); }); - const handleClose = () => { - reset(); - closeModal(); + const { mutate: RecurringExpenseUpdate, isPending } = + useUpdateRecurringExpense(() => handleClose()); +const handleEmailGetting = (userArray = []) => { + if (!Array.isArray(userArray) || userArray.length === 0) return []; + + return userArray + .map((empId) => { + const foundUser = employees?.data?.find((user) => user.id === empId); + return foundUser?.email || null; + }) + .filter(Boolean).join(",") +}; + useEffect(() => { + if (requestToEdit && data) { + reset({ + title: data.title || "", + description: data.description || "", + payee: data.payee || "", + notifyTo: data.notifyTo ? data.notifyTo.map((usr)=>usr.id) : [], + currencyId: data.currency.id || "", + amount: data.amount || "", + strikeDate: data.strikeDate?.slice(0, 10) || "", + projectId: data.project.id || "", + paymentBufferDays: data.paymentBufferDays || "", + numberOfIteration: data.numberOfIteration || "", + expenseCategoryId: data.expenseCategory.id || "", + statusId: data.status.id || "", + frequency: data.frequency || "", + isVariable: data.isVariable || false, + }); + } + }, [data, reset]); + + useEffect(() => { + if (!requestToEdit && currencyData && currencyData.length > 0) { + const inrCurrency = currencyData.find((c) => c.id === INR_CURRENCY_CODE); + if (inrCurrency) { + setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true }); + } + } + }, [currencyData, requestToEdit, setValue]); + + const onSubmit = (fromdata) => { + let payload = { + ...fromdata, + strikeDate: fromdata.strikeDate + ? new Date(fromdata.strikeDate).toISOString() + : null, + notifyTo:handleEmailGetting(fromdata.notifyTo) }; + if (requestToEdit) { + const editPayload = { ...payload, id: data.id }; + RecurringExpenseUpdate({ id: data.id, payload: editPayload }); + } else { + CreateRecurringExpense(payload); + } + }; - const { mutate: CreateRecurringExpense, isPending: createPending } = useCreateRecurringExpense( - () => { - handleClose(); - } - ); - const { mutate: RecurringExpenseUpdate, isPending } = useUpdateRecurringExpense(() => - handleClose() - ); + return ( +
+
+ {requestToEdit + ? "Update Expense Recurring " + : "Create Expense Recurring"} +
+
+ {/* Project and Category */} +
+
+ + + {errors.projectId && ( + {errors.projectId.message} + )} +
- useEffect(() => { - if (requestToEdit && data) { - reset({ - title: data.title || "", - description: data.description || "", - payee: data.payee || "", - notifyTo: data.notifyTo || "", - currencyId: data.currency.id || "", - amount: data.amount || "", - strikeDate: data.strikeDate?.slice(0, 10) || "", - projectId: data.project.id || "", - paymentBufferDays: data.paymentBufferDays || "", - numberOfIteration: data.numberOfIteration || "", - expenseCategoryId: data.expenseCategory.id || "", - statusId: data.statusId || "", - frequency: data.frequency || "", - isVariable: data.isVariable || false, +
+ + + {errors.expenseCategoryId && ( + + {errors.expenseCategoryId.message} + + )} +
+
- }); - } - }, [data, reset]); + {/* Title and Is Variable */} +
+
+ + + {errors.title && ( + {errors.title.message} + )} +
- - useEffect(() => { - if (!requestToEdit && currencyData && currencyData.length > 0) { - const inrCurrency = currencyData.find( - (c) => c.id === INR_CURRENCY_CODE - ); - if (inrCurrency) { - setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true }); - } - } - }, [currencyData, requestToEdit, setValue]); - - const onSubmit = (fromdata) => { - let payload = { - ...fromdata, - strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null, - }; - if (requestToEdit) { - const editPayload = { ...payload, id: data.id }; - RecurringExpenseUpdate({ id: data.id, payload: editPayload }); - } else { - CreateRecurringExpense(payload); - } - }; - - return ( -
-
- {requestToEdit ? "Update Expense Recurring " : "Create Expense Recurring"} -
- - {/* Project and Category */} -
-
- - - {errors.projectId && ( - {errors.projectId.message} - )} -
- -
- - - {errors.expenseCategoryId && ( - - {errors.expenseCategoryId.message} - - )} -
-
- - {/* Title and Is Variable */} -
-
- - - {errors.title && ( - - {errors.title.message} - - )} -
- - {/*
+ {/*
@@ -192,282 +245,289 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { )}
*/} -
- +
+ - ( -
-
- field.onChange(true)} - /> - -
+ ( +
+
+ field.onChange(true)} + /> + +
-
- field.onChange(false)} - /> - -
-
- )} - /> - {errors.isVariable && ( - {errors.isVariable.message} - )} -
+
+ field.onChange(false)} + /> + +
+ )} + /> + {errors.isVariable && ( + {errors.isVariable.message} + )} +
+
- {/* Date and Amount */} -
-
- - - {errors.strikeDate && ( - - {errors.strikeDate.message} - - )} -
+ {/* Date and Amount */} +
+
+ + + {errors.strikeDate && ( + {errors.strikeDate.message} + )} +
-
- - - {errors.amount && ( - {errors.amount.message} - )} -
-
+
+ + + {errors.amount && ( + {errors.amount.message} + )} +
+
- {/* Payee and Currency */} -
-
- - - setValue("payee", val, { shouldValidate: true }) - } - error={errors.payee?.message} - placeholder="Select or enter payee" - /> -
+ {/* Payee and Currency */} +
+
+ + + setValue("payee", val, { shouldValidate: true }) + } + error={errors.payee?.message} + placeholder="Select or enter payee" + /> +
-
- - + - {currencyLoading && } + {currencyLoading && } - {!currencyLoading && - !currencyError && - currencyData?.map((currency) => ( - - ))} - - {errors.currencyId && ( - {errors.currencyId.message} - )} -
-
+ {!currencyLoading && + !currencyError && + currencyData?.map((currency) => ( + + ))} + + {errors.currencyId && ( + {errors.currencyId.message} + )} +
+
- {/* Frequency To and Status Id */} -
-
- - - {errors.frequency && ( - {errors.frequency.message} - )} -
-
- - - {errors.statusId && ( - {errors.statusId.message} - )} -
-
+ {/* Frequency To and Status Id */} +
+
+ + + {errors.frequency && ( + {errors.frequency.message} + )} +
+
+ + + {errors.statusId && ( + {errors.statusId.message} + )} +
+
- {/* Payment Buffer Days and Number of Iteration */} -
-
- - - {errors.paymentBufferDays && ( - {errors.paymentBufferDays.message} - )} -
-
- - - {errors.numberOfIteration && ( - {errors.numberOfIteration.message} - )} -
-
+ {/* Payment Buffer Days and Number of Iteration */} +
+
+ + + {errors.paymentBufferDays && ( + + {errors.paymentBufferDays.message} + + )} +
+
+ + + {errors.numberOfIteration && ( + + {errors.numberOfIteration.message} + + )} +
+
+
+
+ -
-
- - - {/* */} - -
-
- - {/* Description */} -
-
- - - {errors.description && ( - - {errors.description.message} - - )} -
-
-
- - -
- -
- - -
- + +
- ) + + {/* Description */} +
+
+ + + {errors.description && ( + + {errors.description.message} + + )} +
+
+ +
+ + +
+ +
+ ); } -export default ManageRecurringExpense - +export default ManageRecurringExpense; diff --git a/src/components/RecurringExpense/RecurringExpenseSchema.js b/src/components/RecurringExpense/RecurringExpenseSchema.js index da62b341..2555a9ac 100644 --- a/src/components/RecurringExpense/RecurringExpenseSchema.js +++ b/src/components/RecurringExpense/RecurringExpenseSchema.js @@ -1,12 +1,12 @@ import { boolean, z } from "zod"; import { INR_CURRENCY_CODE } from "../../utils/constants"; -export const PaymentRecurringExpense = (expenseTypes) => { +export const PaymentRecurringExpense = () => { return z.object({ title: z.string().min(1, { message: "Title is required" }).transform((val) => val.trim()), description: z.string().min(1, { message: "Description is required" }).transform((val) => val.trim()), payee: z.string().min(1, { message: "Payee name is required" }).transform((val) => val.trim()), - notifyTo: z.string().min(1, { message: "Notification e-mail is required" }).transform((val) => val.trim()), + notifyTo: z.array(z.string()).min(1,"Please select at lest one user"), currencyId: z .string() .min(1, { message: "Currency is required" }) @@ -77,7 +77,7 @@ export const defaultRecurringExpense = { title: "", description: "", payee: "", - notifyTo: "", + notifyTo: [], currencyId: "", amount: 0, strikeDate: "", diff --git a/src/components/common/usesInput.jsx b/src/components/common/usesInput.jsx index 4497c672..17e61877 100644 --- a/src/components/common/usesInput.jsx +++ b/src/components/common/usesInput.jsx @@ -1,87 +1,294 @@ -import { useEffect, useRef } from "react"; +import { useState, useEffect, useRef, useMemo } from "react"; import { useController } from "react-hook-form"; -import { useEmployeesName } from "../../hooks/useEmployees"; import { useDebounce } from "../../utils/appUtils"; +import { useEmployeesName } from "../../hooks/useEmployees"; import Avatar from "./Avatar"; -const UsersTagInput = ({ control, name, projectId, placeholder, forAll }) => { - const { field } = useController({ name, control }); +const UsersTagInput = ({ + control, + name, + placeholder, + projectId, + forAll, + isApplicationUser = false, +}) => { + const { + field: { value = [], onChange }, + } = useController({ name, control }); + + const [search, setSearch] = useState(""); + const [showDropdown, setShowDropdown] = useState(false); + const [filteredUsers, setFilteredUsers] = useState([]); + const [userCache, setUserCache] = useState({}); + const dropdownRef = useRef(null); const inputRef = useRef(null); - const tagifyRef = useRef(null); + const activeIndexRef = useRef(-1); - // debounce the search term - const debouncedSearch = useDebounce("", 400); - const { data: employees } = useEmployeesName(projectId, debouncedSearch, forAll); + const debouncedSearch = useDebounce(search, 300); + const { data: employees, isLoading } = useEmployeesName( + projectId, + debouncedSearch, + forAll + ); + // Keep both filtered list and cache updated useEffect(() => { - if (!window.Tagify || !inputRef.current) return; + if (employees?.data?.length) { + setFilteredUsers(employees.data); + activeIndexRef.current = -1; - // Initialize Tagify on the input - const Tagify = window.Tagify; - tagifyRef.current = new Tagify(inputRef.current, { - enforceWhitelist: false, - dropdown: { - enabled: 1, - classname: "users-list", - searchKeys: ["value", "email"], - }, - templates: { - dropdownItem: (tagData) => ` -
-
- -
- ${tagData.value} - ${tagData.email || ""} -
- `, - tag: (tagData) => ` - -
- - - - ${tagData.value} -
- - - `, - }, - }); - - // Set default value (for editing case) - if (field.value?.length) { - tagifyRef.current.addTags(field.value); - } - - // When tagify value changes, update form field - tagifyRef.current.on("change", (e) => { - const newVal = JSON.parse(e.detail.value || "[]"); - field.onChange(newVal); - }); - - return () => tagifyRef.current.destroy(); - }, []); - - // Update whitelist whenever employees change - useEffect(() => { - if (tagifyRef.current && employees?.data) { - tagifyRef.current.settings.whitelist = employees.data.map((emp) => ({ - value: `${emp.firstName} ${emp.lastName}`, - email: emp.email, - avatar: emp.avatarUrl || "", - id: emp.id, - })); + // cache all fetched users by id + setUserCache((prev) => { + const updated = { ...prev }; + employees.data.forEach((u) => { + updated[u.id] = u; + }); + return updated; + }); + } else { + setFilteredUsers([]); } }, [employees]); + // close dropdown when clicking outside + useEffect(() => { + const onDocClick = (e) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(e.target) && + !inputRef.current.contains(e.target) + ) { + setShowDropdown(false); + } + }; + document.addEventListener("mousedown", onDocClick); + return () => document.removeEventListener("mousedown", onDocClick); + }, []); + + // select a user + const handleSelect = (user) => { + if (value.includes(user.id)) return; + const updated = [...value, user.id]; + onChange(updated); + setSearch(""); + setShowDropdown(false); + setTimeout(() => inputRef.current?.focus(), 0); + }; + + // remove selected user + const handleRemove = (id) => { + const updated = value.filter((uid) => uid !== id); + onChange(updated); + }; + + // keyboard navigation + const onInputKeyDown = (e) => { + if (!showDropdown) return; + const max = Math.max(0, filteredUsers.length - 1); + if (e.key === "ArrowDown") { + e.preventDefault(); + activeIndexRef.current = Math.min(max, activeIndexRef.current + 1); + scrollToActive(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + activeIndexRef.current = Math.max(0, activeIndexRef.current - 1); + scrollToActive(); + } else if (e.key === "Enter") { + e.preventDefault(); + const idx = activeIndexRef.current; + if (idx >= 0 && filteredUsers[idx]) handleSelect(filteredUsers[idx]); + } else if (e.key === "Escape") { + setShowDropdown(false); + } + }; + + // scroll active dropdown item into view + const scrollToActive = () => { + const wrapper = dropdownRef.current?.querySelector( + ".tagify__dropdown__wrapper" + ); + const items = wrapper?.querySelectorAll(".tagify__dropdown__item"); + const idx = activeIndexRef.current; + if (items && items[idx]) { + const item = items[idx]; + const itemTop = item.offsetTop; + const itemBottom = itemTop + item.offsetHeight; + if (wrapper.scrollTop > itemTop) wrapper.scrollTop = itemTop; + else if (wrapper.scrollTop + wrapper.clientHeight < itemBottom) + wrapper.scrollTop = itemBottom - wrapper.clientHeight; + } + }; + + // resolve user details by ID (for rendering tags) + const resolveUserById = (id) => { + return userCache[id] || filteredUsers.find((u) => u.id === id); + }; + + // main visible users list (memoized) + const visibleUsers = useMemo(() => { + const baseList = isApplicationUser + ? (filteredUsers || []).filter((u) => u?.email) + : filteredUsers || []; + + // also include selected users even if missing from current API + const selectedUsers = + Array.isArray(value) && value.length + ? value.map((uid) => userCache[uid]).filter(Boolean) + : []; + + // merge unique + const merged = [ + ...selectedUsers, + ...baseList.filter((u) => !selectedUsers.some((s) => s.id === u.id)), + ]; + + return merged; + }, [filteredUsers, isApplicationUser, value, userCache]); + return ( - +
+ {/* Selected tags (chips) */} + {value.map((id) => { + const u = resolveUserById(id); + if (!u) return null; + return ( + +
+ {u.photo ? ( + + {`${u.firstName + + ) : ( +
+ + {u.firstName?.[0] || ""} + {u.lastName?.[0] || ""} + +
+ )} + +
+ + {u.firstName} {u.lastName} + +
+
+ +
); }; diff --git a/src/pages/AdvancePayment/AdvancePaymentPage.jsx b/src/pages/AdvancePayment/AdvancePaymentPage.jsx index 9c080ab8..5ffe8eb6 100644 --- a/src/pages/AdvancePayment/AdvancePaymentPage.jsx +++ b/src/pages/AdvancePayment/AdvancePaymentPage.jsx @@ -13,6 +13,7 @@ import Label from "../../components/common/Label"; import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList"; import { employee } from "../../data/masters"; import { formatFigure } from "../../utils/appUtils"; +import UsersTagInput from "../../components/common/usesInput"; export const AdvancePaymentContext = createContext(); export const useAdvancePaymentContext = () => { @@ -26,7 +27,7 @@ export const useAdvancePaymentContext = () => { }; const AdvancePaymentPage = () => { const [balance, setBalance] = useState(null); - const { control, reset, watch } = useForm({ + const { reset, watch } = useForm({ defaultValues: { employeeId: "", }, @@ -39,6 +40,16 @@ const AdvancePaymentPage = () => { employeeId: selectedEmpoyee || "", }); }, [reset]); + const { control, handleSubmit } = useForm({ + defaultValues: { + selectedUsers: ["08ddb487-9c34-4295-857b-7017549c4d8c"], // works on update + }, + }); + + const onSubmit = (data) => { + console.log("Selected User IDs:", data.selectedUsers); + }; + return (
@@ -83,6 +94,21 @@ const AdvancePaymentPage = () => {
+ +
+
+ + +
+ +