table add

src/Components/DataTable/NormalTable.jsx

@@ -9,30 +9,36 @@ import {
   Tr,
   Skeleton,
   TableCaption,
-  Tfoot,
+  Radio,
+  RadioGroup,
+  CheckboxGroup,
+  Checkbox,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
 
-const DataTable = ({
+const NormalTable = ({
   data,
   isLoading,
   tableHeadRow,
   emptyMessage,
   centered,
   total,
+  showRadioButton, // New prop for showing the radio button
+  selectedRadio,
+  setSelectedRadio, // State for managing radio button selection
 }) => {
-  console.log(data);
-
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "auto";
+
+  const handleRadioChange = (value) => {
+    setSelectedRadio(value);
+  };
+
   return (
-    <TableContainer
-      overflowX={"auto"}
-      className="h-auto w-100 table-scroll"
-    >
+    <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
@@ -40,15 +46,11 @@ const DataTable = ({
           <TableCaption p={total ? 0 : null}>
             {total ? total : "OptiFii v1.0.0"}
           </TableCaption>
-          <Thead 
-          // bgGradient="linear(to-r, gray.50, gray.50)"
-          bg="#6311cb37"
-          >
+          <Thead bg="#6311cb37">
             <Tr>
               {tableHeadRow.map((heading, index) => (
                 <Th
                   color={"purple.900"}
-                  // fontSize={'sm'}
                   textAlign={
                     tableHeadRow.length - 1 === index || centered
                       ? "center"
@@ -56,15 +58,19 @@ const DataTable = ({
                   }
                   key={index}
                   p={4}
-                  // width="20px" // Adjust width as needed
-                  // color={"#fff"}
-                  whiteSpace="normal" // Allow text to wrap
-                  wordBreak="normal" // Ensure long words break properly
-                  overflowWrap="normal" // Break long words if necessary
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  {isLoading ? <Skeleton height="20px" /> : heading}
-                  {/* {heading} */}
+                  {/* Conditionally render radio button in the heading */}
+                  {showRadioButton && heading === "Select" ? (
+                    <CheckboxGroup value={selectedRadio}>
+                      <Checkbox isDisabled /> {/* Disabled radio button in header */}
+                    </CheckboxGroup>
+                  ) : (
+                    isLoading ? <Skeleton height="20px" /> : heading
+                  )}
                 </Th>
               ))}
             </Tr>
@@ -76,15 +82,12 @@ const DataTable = ({
                     <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                       {tableHeadRow.map((_, i) => (
                         <Td
-                          // width={"fit-content"}
                           key={i}
                           style={{
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
                           }}
-
                           className="web-text-small"
-                          // w={columnWidth}
                         >
                           <Skeleton height="20px" mb={1} mt={1} />
                         </Td>
@@ -93,7 +96,10 @@ const DataTable = ({
                   )
                 )
               : data?.map((item, index) => (
-                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                  <Tr  cursor={'pointer'} 
+                  transition={'0.2s all'}
+                  _hover={{ shadow: "lg" }} 
+                   h={12} bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                     {tableHeadRow.map((heading, i) => (
                       <Td
                         textAlign={
@@ -110,7 +116,17 @@ const DataTable = ({
                         }}
                         className="web-text-small"
                       >
-                        {item[heading]}
+                        {/* Conditionally render radio button in the table body */}
+                        {showRadioButton && heading === "Select" ? (
+                          <CheckboxGroup
+                            value={selectedRadio}
+                            onChange={handleRadioChange}
+                          >
+                            <Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
+                          </CheckboxGroup>
+                        ) : (
+                          item[heading]
+                        )}
                       </Td>
                     ))}
                   </Tr>
@@ -122,4 +138,4 @@ const DataTable = ({
   );
 };
 
-export default DataTable;
+export default NormalTable;

src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx

@@ -1,17 +1,168 @@
-import { Box } from "@chakra-ui/react";
 import React from "react";
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Skeleton,
+  TableCaption,
+  Radio,
+  RadioGroup,
+  CheckboxGroup,
+  Checkbox,
+  Box, Text
+} from "@chakra-ui/react";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import EmptySearchList from "../../Components/EmptySearchList";
 import MiniHeader from "../../Components/MiniHeader";
 
-const AdvanceExpenseRequest = () => {
+
+const AdvanceExpenseRequest = ({
+  data,
+  isLoading,
+  // tableHeadRow,
+  emptyMessage,
+  centered,
+  total,
+  showRadioButton, // New prop for showing the radio button
+  selectedRadio,
+  setSelectedRadio, // State for managing radio button selection
+}) => {
+  const columnWidth =
+    data && data[0]
+      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
+      : "auto";
+
+  const handleRadioChange = (value) => {
+    setSelectedRadio(value);
+  };
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Sr. no",
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Order Status",
+    "Approver",
+    "Disburser",
+  ];
+
+
+
   return (
+
+
     <Box h={"100%"} p={6}>
       <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       />
+
+      <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
+        {data?.length === 0 ? (
+          <EmptySearchList message={emptyMessage} />
+        ) : (
+          <Table size="sm">
+            <TableCaption p={total ? 0 : null}>
+              {total ? total : "OptiFii v1.0.0"}
+            </TableCaption>
+            <Thead bg="#6311cb37">
+              <Tr>
+                {tableHeadRow.map((heading, index) => (
+                  <Th
+                    color={"purple.900"}
+                    textAlign={
+                      tableHeadRow.length - 1 === index || centered
+                        ? "center"
+                        : "left"
+                    }
+                    key={index}
+                    p={4}
+                    whiteSpace="normal"
+                    wordBreak="normal"
+                    overflowWrap="normal"
+                    textTransform={"none"}
+                  >
+                    {/* Conditionally render radio button in the heading */}
+                    {showRadioButton && heading === "Select" ? (
+                      <CheckboxGroup value={selectedRadio}>
+                        <Checkbox isDisabled /> {/* Disabled radio button in header */}
+                      </CheckboxGroup>
+                    ) : (
+                      isLoading ? <Skeleton height="20px" /> : heading
+                    )}
+                  </Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody className="web-text-small">
+              {isLoading
+                ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                  (_, index) => (
+                    <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                      {tableHeadRow.map((_, i) => (
+                        <Td
+                          key={i}
+                          style={{
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                          }}
+                          className="web-text-small"
+                        >
+                          <Skeleton height="20px" mb={1} mt={1} />
+                        </Td>
+                      ))}
+                    </Tr>
+                  )
+                )
+                : data?.map((item, index) => (
+                  <Tr cursor={'pointer'}
+                    transition={'0.2s all'}
+                    _hover={{ shadow: "lg" }}
+                    h={12} bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                    {tableHeadRow.map((heading, i) => (
+                      <Td
+                        textAlign={
+                          tableHeadRow?.length - 1 === i || centered
+                            ? "center"
+                            : "left"
+                        }
+                        color={"gray.600"}
+                        key={i}
+                        fontWeight={500}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                      >
+                        {/* Conditionally render radio button in the table body */}
+                        {showRadioButton && heading === "Select" ? (
+                          <CheckboxGroup
+                            value={selectedRadio}
+                            onChange={handleRadioChange}
+                          >
+                            <Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
+                          </CheckboxGroup>
+                        ) : (
+                          item[heading]
+                        )}
+                      </Td>
+                    ))}
+                  </Tr>
+                ))}
+            </Tbody>
+          </Table>
+        )}
+      </TableContainer>
     </Box>
   );
 };
 
-export default AdvanceExpenseRequest;
+export default AdvanceExpenseRequest;