Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

src/Components/CustomAlertDialog.jsx

@@ -29,12 +29,11 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
             No
           </Button>
           <Button
-            backgroundColor={"#ff6b6b"}
             isLoading={isLoading}
             onClick={alertHandler}
             size={"sm"}
             rounded={'sm'}
-            colorScheme="red"
+            colorScheme="green"
             ml={3}
           >
             Yes

src/Components/FormField.jsx

@@ -1,12 +1,30 @@
-import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack, Box, Heading, FormHelperText, Kbd } from '@chakra-ui/react';
-import { Controller } from 'react-hook-form';
-import { TiWarning } from 'react-icons/ti';
-import { motion } from 'framer-motion';
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  Stack,
+  Box,
+  Heading,
+  FormHelperText,
+  Kbd,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+import { Controller } from "react-hook-form";
+import { TiWarning } from "react-icons/ti";
+import { motion } from "framer-motion";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 
 const FormField = ({
   label,
   control,
   name,
+  id,
   type = "text",
   options = [],
   errors,
@@ -17,44 +35,57 @@ const FormField = ({
   helperText,
   multiple,
   handleImageChange,
+  selectedImageData,
+  setSelectedImageData,
+  removeImage,
+  imageData ,
   ...props
 }) => (
-  <FormControl w={"49%"} isInvalid={errors[name]} isRequired={isRequired} className="mb-3">
-    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
+  <FormControl
+    w={"49%"}
+    isInvalid={errors[name]}
+    isRequired={isRequired}
+    className="mb-3"
+  >
+    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>
+      {label}
+    </FormLabel>
     <Controller
       control={control}
       name={name}
       defaultValue=""
       rules={rules}
       render={({ field }) => {
-        if (type === 'select') {
+        if (type === "select") {
           return (
             <Select
               focusBorderColor="forestGreen.300"
               size={"sm"}
               {...field}
               {...props}
-              cursor={'pointer'}
-              placeholder={placeHolder? placeHolder : label}
+              cursor={"pointer"}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             >
               {options.map((option, index) => (
-                <option key={index} value={option.value}>{option.label}</option>
+                <option key={index} value={option.value}>
+                  {option.label}
+                </option>
               ))}
             </Select>
           );
-        } else if (type === 'textarea') {
+        } else if (type === "textarea") {
           return (
             <Textarea
               focusBorderColor="forestGreen.400"
               size={"sm"}
               {...field}
               {...props}
-              placeholder={placeHolder? placeHolder : label}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             />
           );
-        } else if (type === 'checkbox') {
+        } else if (type === "checkbox") {
           return (
             <Checkbox
               size={"sm"}
@@ -65,7 +96,7 @@ const FormField = ({
               {label}
             </Checkbox>
           );
-        } else if (type === 'radio') {
+        } else if (type === "radio") {
           return (
             <RadioGroup {...field} {...props}>
               <Stack direction="row">
@@ -77,92 +108,95 @@ const FormField = ({
               </Stack>
             </RadioGroup>
           );
-        } else if (type === 'file') {
+        } else if (type === "file") {
           return (
-            <Box
-              borderColor="gray.300"
-              borderStyle="dashed"
-              borderWidth="2px"
-              rounded="md"
-              shadow="sm"
-              role="group"
-              transition="all 150ms ease-in-out"
-              _hover={{
-                shadow: "md",
-              }}
-              as={motion.div}
-              initial="rest"
-              animate="rest"
-              whileHover="hover"
-              height={"105px"}
-              className="pointer"
-            >
-              <Box position="relative" height="100%" width="100%">
-                <Box
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  height="100%"
-                  width="100%"
-                  display="flex"
-                  flexDirection="column"
-                >
-                  <Stack
+            <>
+              <Box
+                borderColor="gray.300"
+                borderStyle="dashed"
+                borderWidth="2px"
+                rounded="md"
+                shadow="sm"
+                role="group"
+                transition="all 150ms ease-in-out"
+                _hover={{
+                  shadow: "md",
+                }}
+                as={motion.div}
+                initial="rest"
+                animate="rest"
+                whileHover="hover"
+                height={"105px"}
+                className="pointer"
+              >
+                <Box position="relative" height="100%" width="100%">
+                  <Box
+                    position="absolute"
+                    top="0"
+                    left="0"
                     height="100%"
                     width="100%"
                     display="flex"
-                    alignItems="center"
-                    justify="center"
+                    flexDirection="column"
                   >
-                    <span
-                      className="d-flex flex-column align-items-center pointer"
-                      spacing="1"
+                    <Stack
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      alignItems="center"
+                      justify="center"
                     >
-                      <Heading
-                        fontSize="lg"
-                        color="gray.700"
-                        fontWeight="bold"
-                        cursor={"pointer"}
-                      >
-                        Drop images here
-                      </Heading>
                       <span
-                        fontWeight="light"
-                        className="web-text-large text-secondary text-center pointer"
+                        className="d-flex flex-column align-items-center pointer"
+                        spacing="1"
                       >
-                        or click to upload
+                        <Heading
+                          fontSize="lg"
+                          color="gray.700"
+                          fontWeight="bold"
+                          cursor={"pointer"}
+                        >
+                          Drop images here
+                        </Heading>
+                        <span
+                          fontWeight="light"
+                          className="web-text-large text-secondary text-center pointer"
+                        >
+                          or click to upload
+                        </span>
                       </span>
-                    </span>
-                  </Stack>
+                    </Stack>
+                  </Box>
+                  <Input
+                    {...field}
+                    {...props}
+                    type="file"
+                    height="100%"
+                    width="100%"
+                    position="absolute"
+                    top="0"
+                    left="0"
+                    opacity="0"
+                    aria-hidden="true"
+                    accept="image/*"
+                    onChange={(e) => {
+                      field.onChange(e);
+                      handleImageChange(e);
+                    }}
+                    onDrop={(e) => {
+                      field.onChange(e);
+                      handleImageChange(e);
+                    }}
+                  />
                 </Box>
-                <Input
-                  {...field}
-                  {...props}
-                  type="file"
-                  height="100%"
-                  width="100%"
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  opacity="0"
-                  aria-hidden="true"
-                  accept="image/*"
-                  onChange={(e) => {
-                    field.onChange(e);
-                    handleImageChange(e);
-                  }}
-                  onDrop={(e) => {
-                    field.onChange(e);
-                    handleImageChange(e);
-                  }}
-                />
               </Box>
-            </Box>
+            </>
           );
-        }else if (type === 'fileNormal') {
+        } else if (type === "fileNormal") {
           return (
             <>
               <Input
+              id={id}
                 {...field}
                 {...props}
                 multiple={multiple} // Support for multiple file uploads
@@ -179,10 +213,118 @@ const FormField = ({
                 <FormHelperText className="web-text-small">
                   You can select multiple images using{" "}
                   <span className="text-dark">
-                    <Kbd size={'sm'} className="text-dark">ctrl</Kbd> + <Kbd className="text-dark">select</Kbd>
-                  </span>.
+                    <Kbd size={"sm"} className="text-dark">
+                      ctrl
+                    </Kbd>{" "}
+                    + <Kbd className="text-dark">select</Kbd>
+                  </span>
+                  .
                 </FormHelperText>
               )}
+              {selectedImageData &&  (
+                multiple ? 
+                selectedImageData?.length > 0 && (
+                  <Box mt={4} width={"100%"} display="flex" flexWrap="wrap" gap={4}>
+                    {selectedImageData?.map((imageDataLink, index) => (
+                      <Box key={index} width={"100px"}>
+                        <Image
+                          rounded={"md"}
+                          objectFit={"cover"}
+                          src={imageDataLink}
+                          alt={`profile-${index}`}
+                          width={100}
+                          height={100}
+                        />
+                        <Box
+                          display={"flex"}
+                          flexDirection={"column"}
+                          position={"relative"}
+                        >
+                          <CloseIcon
+                            onClick={() => removeImage(index)}
+                            bg={"#fff"}
+                            className="link pointer"
+                            p={1}
+                            fontSize={"lg"}
+                            color={"red"}
+                            fontWeight={"500"}
+                            rounded={"md"}
+                            position={"absolute"}
+                            bottom={0}
+                            right={0}
+                          />
+                          <Text
+                            as={"span"}
+                            fontSize={"xs"}
+                            fontWeight={"500"}
+                            mt={1}
+                            isTruncated={true}
+                          >
+                            {imageData[index]?.name}
+                          </Text>
+                          <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                            {(imageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
+                            mb
+                          </Text>
+                        </Box>
+                      </Box>
+                    ))}
+                    <AddIcon
+                      onClick={() =>
+                        document.getElementById(id).click()
+                      }
+                      rounded={"md"}
+                      width={50}
+                      height={50}
+                      mt={26}
+                      p={4}
+                      cursor={"pointer"}
+                      className="link"
+                    />
+                  </Box>)
+                :<Box mt={5} width={"49%"}>
+                  <Image
+                    rounded={"md"}
+                    objectFit={"cover"}
+                    src={selectedImageData}
+                    alt="profile"
+                    width={100}
+                    height={100}
+                  />
+                  <Box
+                    w={"30%"}
+                    display={"flex"}
+                    flexDirection={"column"}
+                    position={"relative"}
+                  >
+                    <CloseIcon
+                      onClick={() => setSelectedImageData(null)}
+                      className="link pointer"
+                      p={1}
+                      fontSize={"lg"}
+                      color={"red"}
+                      fontWeight={"500"}
+                      rounded={"md"}
+                      position={"absolute"}
+                      top={1}
+                      right={0}
+                    />
+                    <Text
+                      as={"span"}
+                      fontSize={"xs"}
+                      w={"70%"}
+                      fontWeight={"500"}
+                      mt={1}
+                      isTruncated={true}
+                    >
+                      {imageData?.name}
+                    </Text>
+                    <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                      {(imageData?.size / (1024 * 1024)).toFixed(2)} mb
+                    </Text>
+                  </Box>
+                </Box>
+              )}
             </>
           );
         } else {
@@ -193,7 +335,7 @@ const FormField = ({
               type={type}
               {...field}
               {...props}
-              placeholder={placeHolder? placeHolder : label}
+              placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
             />
           );
@@ -205,10 +347,10 @@ const FormField = ({
         <TiWarning className="fw-bold fs-5 " /> {errors[name].message}
       </span>
     )}
-    {helperText &&<FormHelperText className="web-text-small">
-       {helperText}
-      </FormHelperText>}
-    {type === 'file' && (
+    {helperText && (
+      <FormHelperText className="web-text-small">{helperText}</FormHelperText>
+    )}
+    {type === "file" && (
       <FormHelperText className="web-text-small">
         Maximum limit of image is 10MB.
       </FormHelperText>

src/Components/FormFieldMainReference.jsx

@@ -0,0 +1,257 @@
+import React, { useContext, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import {
+  Box,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Select,
+  Textarea,
+  Button,
+  Text,
+} from "@chakra-ui/react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { WarningTwoIcon } from "@chakra-ui/icons";
+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";
+import FormInputMain from "../../../Components/AddEditComponentMain";
+
+export const addSponser = yup.object().shape({
+  sponserName: yup.string().required("Sponser name is required"),
+  sponserNameArabic: 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"),
+  // bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
+  // bankBranch: yup.string().required("Bank Branch is required"),
+  // branchAddress: yup.string().required("Branch Address is required"),
+  // ifscCode: yup.string().required("IFSC Code is required"),
+  // accountHolderName: yup.string().required("Account Holder's Name is required"),
+});
+
+
+
+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 [bannerImageData, setBannerImageData] = useState(null);
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+
+  
+  const [otherImageData, setOtherImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
+
+
+
+  const { sponser, setSponser } = useContext(GlobalStateContext);
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addSponser),
+  });
+
+  
+  const handleBannerImageChange = (e) => {
+    const file = e.target.files[0];
+    setBannerImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedBannerImageData(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+
+   // Handler for file input
+   const handleOtherImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
+
+    setOtherImageData(newImageData);
+
+    const readers = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((results) => {
+        setSelectedOtherImageData([
+          ...(selectedOtherImageData || []),
+          ...results,
+        ]); // Ensure selectedOtherImageData is an array
+      })
+      .catch((error) => {
+        console.error("Error reading files:", error);
+      });
+  };
+
+  // Function to remove a specific image
+  const removeOtherImage = (index) => {
+    const newImageData = otherImageData.filter((_, i) => i !== index);
+    const newSelectedImageData = selectedOtherImageData.filter(
+      (_, i) => i !== index
+    );
+
+    setOtherImageData(newImageData);
+    setSelectedOtherImageData(newSelectedImageData);
+  };
+
+console.log(selectedBannerImageData);
+  
+  const formFields = [
+    {
+      label: "Sponser name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      name: "sponserNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Sponser address",
+      name: "sponserAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "number",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Banner image",
+      name: "banner_image",
+      id:"banner_image",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Bank Details",
+      multiple:false,
+      selectedImageData:selectedBannerImageData,
+      setSelectedImageData:setSelectedBannerImageData,
+      imageData:bannerImageData,
+      handleImageChange:handleBannerImageChange
+    },
+    {
+      label: "Multi Image",
+      name: "OtherImage",
+      id:"OtherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Bank Details",
+      multiple:true,
+      selectedImageData:selectedOtherImageData,
+      setSelectedImageData:setSelectedOtherImageData,
+      imageData:otherImageData,
+      handleImageChange:handleOtherImageChange,
+      removeImage:removeOtherImage
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+
+  const onSubmit = (data) => {
+    setSponser([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...sponser,
+    ]);
+    navigate("/sponser");
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+    <FormInputMain
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
+
+      onSubmit={handleSubmit(onSubmit)}
+
+    /></Box>
+  );
+};
+
+export default AddSponser;

src/Components/FormInputMain.jsx

@@ -0,0 +1,94 @@
+import { Box, Button, Divider, Heading } from "@chakra-ui/react";
+import React from "react";
+import FormField from "./FormField";
+import { OPACITY_ON_LOAD } from "../Layout/animations";
+
+const FormInputMain = ({
+  groupedFields,
+  control,
+  errors,
+  onSubmit,
+  children,
+}) => {
+  return (
+    <form onSubmit={onSubmit}>
+      {Object.entries(groupedFields).map(([section, fields], index) => (
+        <Box key={section}>
+          <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
+            {section}
+          </Heading>
+          <Box display={"flex"} gap={0}>
+            <Box
+              width={"100%"}
+              p={5}
+              display={"flex"}
+              flexWrap={"wrap"}
+              gap={4}
+            >
+              {fields.map(
+                (
+                  {
+                    label,
+                    name,
+                    id,
+                    arabic,
+                    type,
+                    isRequired,
+                    selectedImageData,
+                    setSelectedImageData,
+                    imageData,
+                    handleImageChange,
+                    removeImage,
+                    placeHolder,
+                    options,
+                    helperText,
+                    multiple,
+                  },
+                  key
+                ) => (
+                  <FormField
+                    id={id}
+                    key={key}
+                    label={label}
+                    type={type}
+                    name={name}
+                    helperText={helperText ? helperText : undefined}
+                    options={options ? options : undefined}
+                    placeHolder={placeHolder ? placeHolder : undefined}
+                    control={control}
+                    errors={errors}
+                    multiple={multiple}
+                    isRequired={isRequired}
+                    arabic={arabic}
+                    selectedImageData={selectedImageData}
+                    setSelectedImageData={setSelectedImageData}
+                    imageData={imageData}
+                    handleImageChange={handleImageChange}
+                    removeImage={removeImage}
+                  />
+                )
+              )}
+            </Box>
+          </Box>
+          {index < Object.entries(groupedFields).length - 1 && <Divider />}
+        </Box>
+      ))}
+
+      {children}
+
+      <Box display={"flex"} justifyContent={"flex-end"} p={4}>
+        <Button
+          size={"sm"}
+          width={"49.5%"}
+          rounded={"sm"}
+          type="submit"
+          colorScheme="green"
+        >
+          Submit
+        </Button>
+      </Box>
+    </form>
+  );
+};
+
+export default FormInputMain;