diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index 3fb0e31..f7d0785 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/src/Components/DataTable/DataTable.jsx @@ -10,6 +10,7 @@ import { Skeleton, TableCaption, Box, + Text, } from "@chakra-ui/react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import EmptySearchList from "../EmptySearchList"; @@ -28,7 +29,8 @@ const DataTable = ({ setMouseEntered, setMouseEnteredId, caption, - isDraggable + isDraggable, + capTitle }) => { const navigate = useNavigate(); const { slideFromRight } = useContext(GlobalStateContext); @@ -61,6 +63,8 @@ const DataTable = ({ {(provided) => ( + <> + {/* */} {caption} @@ -143,6 +147,11 @@ const DataTable = ({ {provided.placeholder}
+ + {capTitle} + {caption} + + )}
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx index b906ea3..105add7 100644 --- a/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx +++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx @@ -1,63 +1,266 @@ import { - Box, - Button, - FormControl, - FormLabel, - Input, - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, - Text, - Textarea, - } from "@chakra-ui/react"; - - const Cancle = ({ isOpen, onClose }) => { + Box, + Button, + FormControl, + FormLabel, + HStack, + Input, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Switch, + Table, + Tbody, + Text, + Textarea, + Th, + Tr, +} from "@chakra-ui/react"; +import DataTable from "../../../../Components/DataTable/DataTable"; +import { useState } from "react"; +import { AddIcon } from "@chakra-ui/icons"; + +const Cancle = ({ isOpen, onClose }) => { + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + "Sr No.", + "Client Id", + "First name", + "Last Name", + "Invested Amount", + "Distribution %", + "Exit Amount", + ]; + + const filteredData = [ + { + id: 1, + }, + { + id: 1, + }, + { + id: 1, + }, + { + id: 1, + }, + { + id: 1, + }, + { + id: 1, + }, + ]; + + const [extractedArray, setExtractedArray] = useState( + filteredData?.map((item, index) => ({ + id: item?.id, + "Sr No.": ( + + + {index + 1} + + + ), + "Client Id": ( + + + BH0000000 + + + ), + "First name": ( + + + Faisal + + + ), + "Last Name": ( + + + Aljalahma + + + ), + "Invested Amount": ( + + + $100,000 + + + ), + "Distribution %": ( + + + 26.0 % + + + ), + "Exit Amount": ( + + + $100,000 + + + ), + })) + ); + + const Total = () => { return ( - - - - Cancel - - - - Comment -