From 39fbe2b1d55b367dd4c906ba6de72b9242af72dd Mon Sep 17 00:00:00 2001
From: siddheshmorewdi <siddhesh.more@wdimails.com>
Date: Tue, 25 Jun 2024 20:35:03 +0530
Subject: [PATCH] merge

---
 package.json                            |   2 +-
 src/Components/DataTable/DataTable.jsx  |  10 +-
 src/Components/FormField.jsx            |   2 +
 src/Components/HeaderMain.jsx           |   1 -
 src/Pages/Master/Sponser/AddSponser.jsx | 142 +++++++++++++-----------
 src/Pages/Master/Sponser/Sponsers.jsx   |  58 ++++++----
 src/Theme/Theme.js                      |  18 +--
 7 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/package.json b/package.json
index 9c30f1e..38b779f 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "react-router-dom": "^6.22.3",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index 6b0b070..7a97857 100644
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -110,11 +110,11 @@ const DataTable = ({
                           textOverflow: "ellipsis",
                         }}
                         className="web-text-small"
-                        onClick={
-                          i === tableHeadRow.length - 1 || i === 0
-                            ? null
-                            : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
-                        }
+                        // onClick={
+                        //   i === tableHeadRow.length - 1 || i === 0
+                        //     ? null
+                        //     : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
+                        // }
                       >
                         {item[heading]}
                       </Td>
diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index bb192db..dfa60cc 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -28,6 +28,7 @@ const FormField = ({
               size={"sm"}
               {...field}
               {...props}
+              placeholder={label}
               textAlign={arabic ? "right" : "left"}
             />
           ) : (
@@ -37,6 +38,7 @@ const FormField = ({
               type={type}
               {...field}
               {...props}
+              placeholder={label}
               textAlign={arabic ? "right" : "left"}
             />
           );
diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index 1e2eb9d..74764f2 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -32,7 +32,6 @@ const HeaderMain = ({
 }) => {
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
 
-  console.log(colorMode);
 
   return (
     <Box
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 3d5fac0..06500dc 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -20,24 +20,18 @@ import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
 import FormField from "../../../Components/FormField";
+import { v4 as uuidv4 } from "uuid";
 
 const schema = yup.object().shape({
   sponserName: yup.string().required("Sponser name is required"),
   mobileNo: yup.string().required("Mobile no is required"),
   sponserAddress: yup.string().required("Sponser address is required"),
 
-
-
-
-
   bankName: yup.string().required("Bank Name is required"),
   accountNumber: yup.string().required("Account Number is required"),
   swiftCode: yup.string().required("SWIFT/BIC Code is required"),
   bankEmail: yup.string().email("Invalid email format"),
 
-
-
-  
   // routingNumber: yup.string().required("Routing Number is required"),
   // iban: yup.string().required("IBAN is required"),
   // accountType: yup.string().required("Account Type is required"),
@@ -50,8 +44,15 @@ const schema = yup.object().shape({
 
 
 
+export function debounce(func, delay) {
+  let debounceTimer;
+  return function(...args) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => func.apply(this, args), delay);
+  };
+}
 const AddSponser = () => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const { sponser, setSponser } = useContext(GlobalStateContext);
   const {
     control,
@@ -64,8 +65,16 @@ const AddSponser = () => {
   console.log(errors);
 
   const onSubmit = (data) => {
-    setSponser([{...data, status: true}, ...sponser]);
-    navigate('/sponser');
+    setSponser([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...sponser,
+    ]);
+    navigate("/sponser");
   };
 
   return (
@@ -75,56 +84,54 @@ const AddSponser = () => {
           Personal Details
         </Heading>
         <Box display={"flex"} gap={0}>
-            <Box
-              width={"50%"}
-              p={5}
-              display={"flex"}
-              flexDirection={"column"}
-              gap={4}
-            >
-              <FormField
-                label="Sponser name"
-                name="sponserName"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="Mobile no"
-                name="mobileNo"
-                type="tel"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="Sponser address"
-                name="sponserAddress"
-                type="textarea"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-            </Box>
+          <Box
+            width={"50%"}
+            p={5}
+            display={"flex"}
+            flexDirection={"column"}
+            gap={4}
+          >
+            <FormField
+              label="Sponser name"
+              name="sponserName"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+            <FormField
+              label="Mobile no"
+              name="mobileNo"
+              type="tel"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+            <FormField
+              label="Sponser address"
+              name="sponserAddress"
+              type="textarea"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+          </Box>
 
-            <Box
-              width={"50%"}
-              p={5}
-              display={"flex"}
-              flexDirection={"column"}
-              gap={4}
-            >
-              <FormField
-                label="اسم الراعي"
-                name="اسم الراعي"
-              
-                control={control}
-                errors={errors}
-                isRequired={true}
-                arabic={true}
-              /></Box>
-
-          
+          <Box
+            width={"50%"}
+            p={5}
+            display={"flex"}
+            flexDirection={"column"}
+            gap={4}
+          >
+            <FormField
+              label="اسم الراعي"
+              name="اسم الراعي"
+              control={control}
+              errors={errors}
+              isRequired={true}
+              arabic={true}
+            />
+          </Box>
         </Box>
 
         <Divider />
@@ -232,18 +239,23 @@ const AddSponser = () => {
                 errors={errors}
               />
 
-{/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
+              {/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
           Submit
         </Button> */}
             </Box>
           )}
-          
         </Box>
 
-          <Box display={'flex'} justifyContent={"flex-end"} p={4}>
-          <Button size={"sm"} width={"50%"} rounded={"sm"} type="submit" colorScheme="green">
-          Submit
-        </Button> 
+        <Box display={"flex"} justifyContent={"flex-start"} p={4}>
+          <Button
+            size={"sm"}
+            width={"50%"}
+            rounded={"sm"}
+            type="submit"
+            colorScheme="green"
+          >
+            Submit
+          </Button>
         </Box>
       </form>
     </Box>
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 45f0b94..caf83f7 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -14,6 +14,7 @@ import {
   Switch,
   Tag,
   Text,
+  useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
@@ -24,10 +25,13 @@ import { AddIcon, EmailIcon } 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 "./AddSponser";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const Sponser = () => {
+  const toast = useToast()
   const { sponser, setSponser,slideFromRight } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
@@ -37,7 +41,6 @@ const Sponser = () => {
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
 
-  console.log(mouseEnteredId);
 
   useEffect(() => {
     // Simulate loading
@@ -58,10 +61,21 @@ const Sponser = () => {
     "Created At",
   ];
 
-  const handleUpdateStatus = (id) => {
-    console.log(`Status updated for id: ${id}`);
-    // Add your status update logic here
-  };
+  const handleUpdateStatus = debounce((id) => {
+    
+    setSponser((prevSponser) =>
+      prevSponser.map((sponsor) =>
+        sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
+      )
+    );
+    toast({
+      render: () => (
+        <ToastBox
+          message={"Status changed succesfully.!"}
+        />
+      ),
+    });
+  },300) ;
 
   // ====================================================[Table Filter]================================================================
   const filteredData = sponser.filter((item) => {
@@ -108,22 +122,24 @@ const Sponser = () => {
       </Box>
     ),
     Status:
-      // <Switch
-      //   size={"sm"}
-      //   colorScheme="teal"
-      //   onChange={() => handleUpdateStatus(item.id)}
-      //   isChecked={item.status}
-      // />
+      <Switch
+        size={"sm"}
+        color="green"
+        onChange={() => handleUpdateStatus(item.id)}
+        isChecked={item.status}
+      />
 
-      item?.status ? (
-        <Badge bg={'transparent'} color={"#05c46b"}>
-          Passed
-        </Badge>
-      ) : (
-        <Badge bg={'transparent'} color={"#f53b57"}>
-          Not passes
-        </Badge>
-      ),
+      // item?.status ? (
+      //   <Badge bg={'transparent'} color={"#05c46b"}>
+      //     Passed
+      //   </Badge>
+      // ) : (
+      //   <Badge bg={'transparent'} color={"#f53b57"}>
+      //     Not passes
+      //   </Badge>
+      // ),
+      
+      ,
     "Created At": (
       <span className="d-flex justify-content-between align-items-center">
         <Text as={"span"} color={"gray.600"} className=" fw-bold">
@@ -172,7 +188,7 @@ const Sponser = () => {
 
 
   return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
         <HStack
           display={"flex"}
diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index c0b54cb..5363356 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -42,15 +42,15 @@ const customTheme = extendTheme({
   
   },
   components: {
-    Switch: {
-      baseStyle: {
-        track: {
-          _checked: {
-            bg: 'forestGreen.500', // using your custom color here
-          },
-        },
-      },
-    },
+    // Switch: {
+    //   baseStyle: {
+    //     track: {
+    //       _checked: {
+    //         bg: 'forestGreen.500', // using your custom color here
+    //       },
+    //     },
+    //   },
+    // },
   },
 });