investment type tooltip

src/Pages/Admin/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Box,
   Divider,
@@ -20,11 +20,12 @@ import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import FormInputMain from "../../Components/FormInputMain";
 import { useGetContactQuery } from "../../Services/contact.service";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 
 export const addSponser = yup.object().shape({
   phoneNumber: yup.string().required("Phone Number is required"),
-  emailAddress: yup.string().required("E-mail ID  is required"),
-  websiteUrl: yup.string().required("Website URL  is required"),
+  emailAddress: yup.string().required("E-mail ID is required"),
+  websiteUrl: yup.string().required("Website URL is required"),
 });
 
 export function debounce(func, delay) {
@@ -37,11 +38,12 @@ export function debounce(func, delay) {
 
 const Contact = () => {
   const navigate = useNavigate();
+  const [form, setForm] = useState({});
 
-  const { sponser, setSponser } = useContext(GlobalStateContext);
+  // const { sponser, setSponser } = useContext(GlobalStateContext);
   const {
     control,
-
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -50,7 +52,6 @@ const Contact = () => {
 
   console.log(errors);
 
-
   const {
     data: contact,
     isLoading: contactLoading,
@@ -59,30 +60,47 @@ const Contact = () => {
 
   console.log(contact?.data);
 
+  useEffect(() => {
+    if (contact) {
+      reset({
+        phoneNumber: contact.phoneNumber,
+        emailAddress: contact.emailAddress,
+        websiteUrl: contact.websiteUrl,
+      });
+    }
+  }, [contact, reset]);
+
+  if (contactLoading) {
+    return <FullscreenLoaders />;
+  }
+
   const formFields = [
     {
       label: "Phone Number",
-      placeHolder:" ",
+      placeHolder: " ",
       name: "phoneNumber",
       type: "text",
       isRequired: true,
       section: "Add Details",
+      defaultValue: contact?.phoneNumber || "",
     },
     {
-      label: "E-mail ID ",
+      label: "E-mail ID",
       name: "emailAddress",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
+      defaultValue: contact?.emailAddress || "",
     },
     {
       label: "Website URL",
       name: "websiteUrl",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
+      defaultValue: contact?.websiteUrl || "",
     },
   ];
 
@@ -96,16 +114,10 @@ const Contact = () => {
   }, {});
 
   const onSubmit = (data) => {
-    setSponser([
-      {
-        ...data,
-        status: true,
-        id: uuidv4(),
-        createdAt: new Date().toISOString(),
-      },
-      ...sponser,
-    ]);  
-    navigate("/sponser");
+    if (!Object.keys(errors).length) {
+      setForm(data);
+      setAlert(true);
+    }
   };
 
   return (

src/Pages/Master/InvestmentType/InvestmentType.jsx

@@ -1,15 +1,27 @@
-import {Badge,Box,Button,HStack,Input,Text,Tooltip,useToast,} from "@chakra-ui/react";
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
-import {AddIcon,DeleteIcon,EditIcon,ViewIcon,} from "@chakra-ui/icons";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
 import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "./AddInvestmentType";
 import NormalTable from "../../../Components/DataTable/NormalTable";
-import {useDeleteInvestmentTypeMutation, useGetInvestmentTypesQuery,} from "../../../Services/investment.type.service";
+import {
+  useDeleteInvestmentTypeMutation,
+  useGetInvestmentTypesQuery,
+} from "../../../Services/investment.type.service";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -28,19 +40,23 @@ const InvestmentType = () => {
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   const [isSwitchOn, setIsSwitchOn] = useState(false);
   const { investmentType, setInvestmentType, slideFromRight } =
-  useContext(GlobalStateContext);
+    useContext(GlobalStateContext);
 
   const [deleteInvestmentType] = useDeleteInvestmentTypeMutation();
 
-    // =========================== [Use State] ============================= 
-    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
-  
-  const {data: investmentTypes,isLoading: investmentTypesLoading,error,} = useGetInvestmentTypesQuery({ page: currentPage, size: pageSize });
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const {
+    data: investmentTypes,
+    isLoading: investmentTypesLoading,
+    error,
+  } = useGetInvestmentTypesQuery({ page: currentPage, size: pageSize });
 
   console.log(investmentTypes?.data?.rows);
 
-    // ========= [Toggle ToastBox] =======
+  // ========= [Toggle ToastBox] =======
 
   // const handleUpdateStatus = debounce((id) => {
   //   setInvestmentType((prevInvestmentType) =>
@@ -65,10 +81,9 @@ const InvestmentType = () => {
     return nameMatches;
   });
 
+  // ==================================================== [Table Setup] ================================================================
 
-   // ==================================================== [Table Setup] ================================================================
-  
-   const tableHeadRow = [
+  const tableHeadRow = [
     // "Sr.no",
     "Investment Type",
     "Description",
@@ -101,20 +116,22 @@ const InvestmentType = () => {
       </Text>
     ),
     Description: (
-    <Text
-      as={"span"}
-      color={"teal.900"}
-      fontWeight={"500"}
-
-
-      maxWidth="750px" // Adjust width as needed
-      display="block" // Ensure block display for proper truncation
-      overflow="hidden"
-      isTruncated
-      textOverflow="ellipsis"
-    >
-      {item.note}
-    </Text>
+      <Text
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        maxWidth="600px" // Adjust width as needed
+        display="block" // Ensure block display for proper truncation
+        overflow="hidden"
+        isTruncated
+        textOverflow="ellipsis"
+        cursor={"grab"}
+      >
+        <Tooltip bg={"#fff"} fontSize={"xs"} label={item.note} placement="top-start" color={"#000"} >
+          {item.note}
+        </Tooltip>
+        
+      </Text>
     ),
     Status: (
       <Box isTruncated={true}>
@@ -226,7 +243,6 @@ const InvestmentType = () => {
           pt={4}
           spacing="24px"
         >
-
           {/* ======================= [Search Input] ======================== */}
 
           <Input
@@ -241,11 +257,16 @@ const InvestmentType = () => {
           />
 
           <HStack display={"flex"} alignItems={"center"}>
-
             {/* ====================[Pagination]===================== */}
 
-            <Pagination isLoading={investmentTypesLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={investmentTypes?.data?.totalItems} />
-
+            <Pagination
+              isLoading={investmentTypesLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={investmentTypes?.data?.totalItems}
+            />
 
             {/* ===================== [Add Button] ===================== */}
 
@@ -255,7 +276,7 @@ const InvestmentType = () => {
                 colorScheme={"forestGreen"}
                 rounded={"sm"}
                 size={"sm"}
-                fontSize={'xs'}
+                fontSize={"xs"}
               >
                 Add Investment Type
               </Button>