update

src/Components/FormInputView.jsx

@@ -15,6 +15,7 @@ import {
   Th,
   Thead,
   Tr,
+  Checkbox, // Import Checkbox from Chakra UI
 } from "@chakra-ui/react";
 import React from "react";
 
@@ -34,8 +35,13 @@ const FormInputView = ({
             <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
               {section}
             </Heading>
-            {/* <Box display={"flex"} gap={0}> */}
-            <Box key={index} width={"100%"} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <Box
+              key={index}
+              width={"100%"}
+              display={"flex"}
+              flexWrap={"wrap"}
+              gap={4}
+            >
               {fields.map(
                 ({ value, label, id, width, btn, arabic, type, align }, key) =>
                   type === "table" ? (
@@ -62,8 +68,7 @@ const FormInputView = ({
                                   w={6}
                                   h={6}
                                   src={
-                                    import.meta.env.VITE_IMAGE_URL+
-                                    item?.logo
+                                    import.meta.env.VITE_IMAGE_URL + item?.logo
                                   }
                                 />
                                 {item.country === "United Arab Emirates"
@@ -94,7 +99,6 @@ const FormInputView = ({
                                   isRequired={true}
                                   bg={"#F5F8F6"}
                                   focusBorderColor="forestGreen.300"
-                                  // border="1px solid #000"
                                   size={"sm"}
                                   fontSize={"sm"}
                                   rounded={"sm"}
@@ -102,7 +106,6 @@ const FormInputView = ({
                                   value={item.value}
                                   textAlign={"right"}
                                   placeholder={"00.00"}
-                                  // color={"#000"}
                                   color={"#1A202C"}
                                   fontWeight={500}
                                   border={"1px solid #e2e8f0"}
@@ -120,7 +123,30 @@ const FormInputView = ({
                         </Tr>
                       </Tbody>
                     </Table>
+                  ) : type === "checkBox" ? (
+                    // <Box key={id} w={!width ? "49%" : width}>
+
+                    <InputGroup
+                      display={"flex"}
+                      flexDirection={"column"}
+                      width={"32%"}
+                      size="sm"
+                    >
+                      <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
+                        {label}
+                      </FormLabel>
+                      <Checkbox
+                        isChecked={value}
+                        colorScheme="green"
+                        size="md"
+                        fontSize="sm"
+                        fontWeight="medium"
+                      >
+                        Is this shaiah compliant
+                      </Checkbox>
+                    </InputGroup>
                   ) : (
+                    // </Box>
                     <Box key={id} w={!width ? "49%" : width}>
                       <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
                         {label}
@@ -141,7 +167,6 @@ const FormInputView = ({
                   )
               )}
             </Box>
-            {/* </Box> */}
             {index <
               Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
               <Divider />

src/Pages/Admin/Notification.jsx

@@ -74,6 +74,7 @@ const Notification = () => {
   const {
     control,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -141,6 +142,8 @@ const Notification = () => {
       name: "title",
       type: "text",
       width:"100%",
+      maxLength:100,
+      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.title?.length || 0} characters.`,
       isRequired: true,
       section: "Send Custom Push Notification",
       // value: contact?.phoneNumber || "",
@@ -152,6 +155,8 @@ const Notification = () => {
       width:"100%",
       type: "textarea",
       isRequired: true,
+      maxLength:200,
+      helperText:`Maximum length should be 200 characters. You have entered ${watch()?.message?.length || 0} characters.`,
       section: "Send Custom Push Notification",
       // value: contact?.phoneNumber || "",
     },

src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx

@@ -211,7 +211,7 @@ const ViewIOdetails = () => {
       // isRequired: true,
       section: " ",
       width: "32.3%",
-      value: IObyID?.data?.isShariah ? "✅ Is This Sharia Compliant" : "❎ Is This Sharia Compliant",
+      value: IObyID?.data?.isShariah,
     },