diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx index 44232afe..acb531ff 100644 --- a/src/components/RecurringExpense/ManageRecurringExpense.jsx +++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import Label from '../common/Label'; -import { useForm } from 'react-hook-form'; +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'; @@ -11,24 +11,16 @@ import { useCreateRecurringExpense, usePayee, useUpdateRecurringExpense } from ' import InputSuggestions from '../common/InputSuggestion'; function ManageRecurringExpense({ closeModal, requestToEdit = null }) { - const data = {} - const { projectNames, loading: projectLoading, error, isError: isProjectError, - } = useProjectName(); + //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 { ExpenseCategories, loading: ExpenseLoading, error: ExpenseError } = useExpenseCategory(); const schema = PaymentRecurringExpense(); - const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({ resolver: zodResolver(schema), defaultValues: defaultRecurringExpense, @@ -82,7 +74,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { }, [currencyData, requestToEdit, setValue]); const onSubmit = (fromdata) => { - let payload = { ...fromdata, strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null, @@ -155,7 +146,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { )} - {/* Title and Is Variable */} @@ -177,7 +167,7 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { )} -
+ {/*
@@ -194,10 +184,53 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { {errors.isVariable && ( {errors.isVariable.message} )} +
*/} + +
+ + + ( +
+
+ field.onChange(true)} + /> + +
+ +
+ field.onChange(false)} + /> + +
+
+ )} + /> + {errors.isVariable && ( + {errors.isVariable.message} + )}
- {/* Date and Amount */}
@@ -210,7 +243,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { minDate={new Date()} className='w-100' /> - {errors.strikeDate && ( {errors.strikeDate.message} @@ -239,24 +271,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { {/* Payee and Currency */}
- {/*
- - - {errors.payee && ( - - {errors.payee.message} - - )} -
*/} -
-
-
- {/* Notify To and Status Id */} + {/* Frequency To and Status Id */}
-
{/* Payment Buffer Days and Number of Iteration */} @@ -383,14 +393,11 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
- {/* Frequency */} - - - + {/* Notify */}
- {/*
- - -
*/} -
- -
) diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx index 1d3bd14d..a5ac8669 100644 --- a/src/components/RecurringExpense/RecurringExpenseList.jsx +++ b/src/components/RecurringExpense/RecurringExpenseList.jsx @@ -29,12 +29,12 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { ); const recurringExpenseColumns = [ - { - key: "recurringPaymentUId", - label: "Recurring Payment ID", - align: "text-start ps-2", - getValue: (e) => e?.recurringPaymentUId || "N/A", - }, + // { + // key: "recurringPaymentUId", + // label: "Recurring Payment ID", + // align: "text-start ps-2", + // getValue: (e) => e?.recurringPaymentUId || "N/A", + // }, { key: "expenseCategory", label: "Category", @@ -47,22 +47,13 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { align: "text-start", getValue: (e) => e?.title || "N/A", }, - { - key: "strikeDate", - label: "Strike Date", - align: "text-center", - getValue: (e) => - e?.strikeDate ? formatUTCToLocalTime(e.strikeDate) : "N/A", - }, - { - key: "amount", - label: "Amount", - align: "text-end", - getValue: (e) => - e?.amount - ? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}` - : "N/A", - }, + // { + // key: "strikeDate", + // label: "Strike Date", + // align: "text-center", + // getValue: (e) => + // e?.strikeDate ? formatUTCToLocalTime(e.strikeDate) : "N/A", + // }, { key: "payee", label: "Payee", @@ -79,14 +70,25 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { : "N/A", }, { - key: "latestPRGeneratedAt", - label: "Last Generation Date", - align: "text-center", + key: "amount", + label: "Amount", + align: "text-end", getValue: (e) => - e?.latestPRGeneratedAt - ? formatUTCToLocalTime(e.latestPRGeneratedAt) + e?.amount + ? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}` : "N/A", }, + + + // { + // key: "latestPRGeneratedAt", + // label: "Last Generation Date", + // align: "text-center", + // getValue: (e) => + // e?.latestPRGeneratedAt + // ? formatUTCToLocalTime(e.latestPRGeneratedAt) + // : "N/A", + // }, { key: "createdAt", label: "Next Generation Date", @@ -124,10 +126,15 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { } const header = [ - "Template Name", + "Recurring Payment ID", + "Category", + "Title", + "Strike Date", + "Amount", + "Payee", "Frequency", - "Next Generation Date", "Last Generation Date", + "Next Generation", "Status", "Action", ]; @@ -197,7 +204,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { {filteredData.length > 0 ? ( filteredData.map((recurringExpense) => ( - + {recurringExpenseColumns.map((col) => ( { ))} -
+
@@ -234,7 +241,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { onClick={() => setManageRequest({ IsOpen: true, - RequestId: recurringExpense.id, + projectId: project.id, }) } > @@ -258,7 +265,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
-
diff --git a/src/components/RecurringExpense/RecurringExpenseSchema.js b/src/components/RecurringExpense/RecurringExpenseSchema.js index 89f59163..b7c312a2 100644 --- a/src/components/RecurringExpense/RecurringExpenseSchema.js +++ b/src/components/RecurringExpense/RecurringExpenseSchema.js @@ -64,7 +64,9 @@ export const PaymentRecurringExpense = (expenseTypes) => { required_error: "Frequency is required", invalid_type_error: "Frequency must be a number", }) - .min(1, { message: "Frequency must be greater than 0" }), + .refine((val) => [0, 1, 2, 3, 4, 5].includes(val), { + message: "Invalid frequency selected", + }), isVariable: z.boolean().optional(), }); @@ -85,7 +87,7 @@ export const defaultRecurringExpense = { expenseCategoryId: "", statusId: "", frequency: 1, - isVariable: false, + isVariable: true, }; @@ -106,15 +108,5 @@ export const SearchRecurringExpenseSchema = z.object({ isVariable: z.string().optional(), }); -// export const defaultPaymentRequestFilter = { -// projectIds: [], -// statusIds: [], -// createdByIds: [], -// currencyIds: [], -// expenseCategoryIds: [], -// payees: [], -// startDate: null, -// endDate: null, -// }; diff --git a/src/pages/RecurringExpense/RecurringExpensePage.jsx b/src/pages/RecurringExpense/RecurringExpensePage.jsx index a3663d6f..897d993d 100644 --- a/src/pages/RecurringExpense/RecurringExpensePage.jsx +++ b/src/pages/RecurringExpense/RecurringExpensePage.jsx @@ -21,7 +21,6 @@ const RecurringExpensePage = () => { RecurringId: null, }); const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null }) - const { setOffcanvasContent, setShowTrigger } = useFab(); const [selectedStatuses, setSelectedStatuses] = useState( PAYEE_RECURRING_EXPENSE.map((s) => s.id) @@ -34,20 +33,6 @@ const RecurringExpensePage = () => { setVieRequest }; - useEffect(() => { - - setShowTrigger(true); - setOffcanvasContent( - "Payment Request Filters", - // - ); - - return () => { - setShowTrigger(false); - setOffcanvasContent("", null); - }; - }, []); - const handleStatusChange = (id) => { setSelectedStatuses((prev) => prev.includes(id) @@ -73,7 +58,7 @@ const RecurringExpensePage = () => {
{/* Left side: Search + Filter */} -
+
{ > - Add Payment Request + Add Recurring Expense