added payee default

src/components/Expenses/ExpenseSchema.js

@@ -114,7 +114,7 @@ export const ExpenseActionScheam = (
       reimburseTransactionId: z.string().nullable().optional(),
       reimburseDate: z.string().nullable().optional(),
       reimburseById: z.string().nullable().optional(),
-      tdsPercentage: z.number().optional(),
+      tdsPercentage: z.number().nullable().optional(),
       baseAmount: z.string().nullable().optional(),
       taxAmount: z.string().nullable().optional(),
     })
@@ -166,10 +166,10 @@ export const defaultActionValues = {
 
   reimburseTransactionId: null,
   reimburseDate: null,
-  reimburseById: "",
+  reimburseById: null,
-  tdsPercentage: 0,
+  tdsPercentage: null,
-  baseAmount: "",
+  baseAmount:null,
-  taxAmount: "",
+  taxAmount: null,
 };
 
 export const SearchSchema = z.object({

src/components/Expenses/ViewExpense.jsx

@@ -393,7 +393,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
                   <div className="row ">
                     <div className="col-12 col-md-6 text-start">
-                      <label className="form-label">Transaction Id </label>
+                      <Label className="form-label" required>Transaction Id </Label>
                       <input
                         type="text"
                         className="form-control form-control-sm"
@@ -405,8 +405,8 @@ const ViewExpense = ({ ExpenseId }) => {
                         </small>
                       )}
                     </div>
-                    <div className="col-12 col-md-6 text-start mb-2">
+                    <div className="col-12 col-md-6 text-start mb-1">
-                      <label className="form-label">Transaction Date </label>
+                      <Label className="form-label" required>Transaction Date </Label>
                       <DatePicker
                         name="reimburseDate"
                         control={control}
@@ -419,7 +419,7 @@ const ViewExpense = ({ ExpenseId }) => {
                         </small>
                       )}
                     </div>
-                    <div className="col-12 col-md-6 text-start mb-2">
+                    <div className="col-12 col-md-6 text-start mb-1">
                       <Label className="form-label" required>
                         Reimburse By{" "}
                       </Label>
@@ -476,7 +476,7 @@ const ViewExpense = ({ ExpenseId }) => {
                     </div>
                   </div>
                 )}
-                <div className="col-12 mb-3 text-start mt-2">
+                <div className="col-12 mb-3 text-start mt-1">
                   {((nextStatusWithPermission.length > 0 &&
                     !IsRejectedExpense) ||
                     (IsRejectedExpense && isCreatedBy)) && (

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useCurrencies, useProjectName } from "../../hooks/useProjects";
 import Label from "../common/Label";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { useExpenseCategory } from "../../hooks/masterHook/useMaster";
 import DatePicker from "../common/DatePicker";
 import {
@@ -50,7 +50,12 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   } = useExpenseCategory();
 
   const { profile } = useProfile();
- const {data:Payees,isLoading:isPayeeLoaing,isError:isPayeeError,error:payeeError} = usePayee()
+  const {
+    data: Payees,
+    isLoading: isPayeeLoaing,
+    isError: isPayeeError,
+    error: payeeError,
+  } = usePayee();
   const schema = PaymentRequestSchema(ExpenseCategories);
   const {
     register,
@@ -113,7 +118,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
       reader.onerror = (error) => reject(error);
     });
   const removeFile = (index) => {
-    debugger
     if (requestToEdit) {
       const newFiles = files.map((file, i) => {
         if (file.documentId !== index) return file;
@@ -183,7 +187,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
     let payload = {
       ...fromdata,
       dueDate: localToUtc(fromdata.dueDate),
-      payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
+      payee: isItself ? `${profile?.employeeInfo?.firstName}  ${profile?.employeeInfo?.lastName}` : fromdata.payee,
     };
     if (requestToEdit) {
       const editPayload = {
@@ -198,7 +202,12 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   };
   const handleSetItSelf = (e) => {
     setisItself(e.target.value);
-    setValue("payee", `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`);
+    let name = `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`
+
+    setValue(
+      "payee",
+      name
+    );
   };
 
   return (
@@ -280,26 +289,53 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             )}
           </div>
 
-          <div className="col-md-6">
+          <div className="col-md-6 ">
-            <Label htmlFor="isAdvancePayment" className="form-label" required>
+            <Label htmlFor="isAdvance" className="form-label">
-              Advance Payment
+              Is Advance Payment
             </Label>
-            <select
+
+            <Controller
+              name="isAdvancePayment"
+              control={control}
+              defaultValue={defaultPaymentRequest.isAdvancePayment ?? false}
+              render={({ field }) => (
+                <div className="d-flex align-items-center gap-3">
+                  <div className="form-check d-flex flex-row m-0 gap-2">
+                    <input
+                      type="radio"
                       id="isAdvancePayment"
-              className="form-select form-select-sm"
+                      className="form-check-input m-0"
-              {...register("isAdvancePayment", {
+                      // mark checked when the controlled value is true
-                setValueAs: (v) =>
+                      checked={field.value === true}
-                  v === "true" ? true : v === "false" ? false : undefined,
+                      onChange={() => field.onChange(true)} // send boolean true
-              })}
+                    />
+                    <Label
+                      className="form-check-label"
                     >
-              <option value="">Select Option</option>
+                      Yes
-              <option value="true">True</option>
+                    </Label>
-              <option value="false">False</option>
+                  </div>
-            </select>
+
-            {errors.isAdvancePayment && (
+                  <div className="form-check d-flex flex-row m-0 gap-2">
-              <small className="danger-text">
+                    <input
-                {errors.isAdvancePayment.message}
+                      type="radio"
-              </small>
+                      id="isVariableFalse"
+                      className="form-check-input m-0"
+                      checked={field.value === false}
+                      onChange={() => field.onChange(false)} // send boolean false
+                    />
+                    <Label
+                      className="form-check-label"
+                    >
+                      No
+                    </Label>
+                  </div>
+                </div>
+              )}
+            />
+
+            {errors.isVariable && (
+              <small className="danger-text">{errors.isVariable.message}</small>
             )}
           </div>
         </div>
@@ -425,9 +461,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         {/* Upload Document  */}
         <div className="row my-2 text-start">
           <div className="col-md-12">
-            <Label className="form-label">
+            <Label className="form-label">Upload Bill </Label>
-              Upload Bill{" "}
-            </Label>
 
             <div
               className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"

src/components/PaymentRequest/PaymentRequestSchema.js

@@ -18,7 +18,7 @@ export const PaymentRequestSchema = (expenseTypes, isItself) => {
     dueDate: z.string().min(1, { message: "Date is required" }),
     description: z.string().min(1, { message: "Description is required" }),
     payee: z.string().min(1, { message: "Supplier name is required" }),
-    isAdvancePayment: z.boolean().optional(),
+    isAdvancePayment: z.boolean().optional().default(false),
     amount: z.coerce
       .number({
         invalid_type_error: "Amount is required and must be a number",
@@ -56,7 +56,7 @@ export const defaultPaymentRequest = {
   dueDate: "",
   projectId: "",
   expenseCategoryId: "",
-  isAdvancePayment: boolean,
+  isAdvancePayment: false,
   billAttachments: [],
 };
 

src/components/common/Avatar.jsx

@@ -52,7 +52,7 @@ const Avatar = ({ firstName, lastName, size = "sm", classAvatar }) => {
   return (
     <div className="avatar-wrapper p-1">
      <div className={`avatar avatar-${size} me-2 ${classAvatar}`}>
-        <span className={`avatar-initial rounded-circle ${bgClass}`}>
+        <span className={`avatar-initial rounded-circle text-white ${bgClass}`}>
           {generateAvatarText(firstName, lastName)}
         </span>
       </div>