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 />