table update

src/Components/DataTable/NormalTable.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react";
+import EmptySearchList from "../EmptySearchList";
+
+const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
+  const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
+  return (
+    <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
+      {data?.length === 0 ? (
+        <EmptySearchList message={emptyMessage} />
+      ) : (
+        <Table   size="sm">
+        <TableCaption>Rubix v1.0.0</TableCaption>
+          <Thead   backgroundColor="purple.50">
+            <Tr>
+              {tableHeadRow.map((heading, index) => (
+                <Th key={index} p={3} w={columnWidth}>
+                  {isLoading ? <Skeleton height="20px" /> : heading}
+                  {/* {heading} */}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody className="web-text-small">
+            {isLoading
+              ? Array.from({ length: 12 }).map((_, index) => (
+                  <Tr key={index}>
+                    {tableHeadRow.map((_, i) => (
+                      <Td key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" w={columnWidth}>
+                        <Skeleton height="20px" mb={1} mt={1} />
+                      </Td>
+                    ))}
+                  </Tr>
+                ))
+              : data?.map((item, index) => (
+                  <Tr key={index}>
+                    {tableHeadRow.map((heading, i) => (
+                      <Td color={"gray.600"} key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" >
+                        {item[heading]}
+                      </Td>
+                    ))}
+                  </Tr>
+                ))}
+          </Tbody>
+        </Table>
+      )}
+    </TableContainer>
+  );
+};
+
+export default DataTable;

src/Pages/Master/ExchangeRate/EditExchangeRate.jsx

@@ -41,7 +41,7 @@ const formatDateValue = (date) => {
   return [year, month, day].join("-");
 };
 
-const EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
+const   EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
   const btnRef = useRef();
   const toast = useToast();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -136,13 +136,15 @@ const EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
               <Box w={"50%"} display={"flex"} flexDirection={"column"} gap={1}>
                 <FormLabel fontSize={"sm"}>From</FormLabel>
                 <Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
-                  {foundObject?.fromCurrency_xid}
+                 
+      {foundObject?.fromCurrency?.currencyCode}
                 </Text>
               </Box>
               <Box w={"50%"} display={"flex"} flexDirection={"column"} gap={1}>
                 <FormLabel fontSize={"sm"}>To</FormLabel>
                 <Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
-                  {foundObject?.toCurrency_xid}
+                  
+      {foundObject?.toCurrency?.currencyCode}
                 </Text>
               </Box>
             </Box>

src/Pages/Master/ExchangeRate/ExchangeRate.jsx

@@ -32,6 +32,7 @@ import EditExchangeRate from "./EditExchangeRate";
 import ExchangeHistory from "./ExchangeHistroy";
 import { useGetAllExchangeRatesQuery } from "../../../Services/exchange.rate.service";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 
 const ExchangeRate = () => {
   const toast = useToast();
@@ -57,15 +58,7 @@ const ExchangeRate = () => {
 
     console.log(data?.data);
 
-  useEffect(() => {
-    // Simulate loading
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1500);
 
-    // Cleanup the timer on component unmount
-    return () => clearTimeout(timer);
-  }, []);
 
   const updateHistory = (id, previousRate, newRate, effectFrom) => {
     setHistory((prevHistory) => [
@@ -123,7 +116,7 @@ const ExchangeRate = () => {
         fontWeight={"600"}
         className="d-flex align-items-center fw- web-text-small"
       >
-        {item.fromCurrency_xid}
+        {item?.fromCurrency?.currencyCode}
       </Text>
     ),
     "To currency": (
@@ -134,7 +127,7 @@ const ExchangeRate = () => {
         fontWeight={"600"}
         className="d-flex align-items-center fw- web-text-small"
       >
-        {item.toCurrency_xid}
+      {item?.toCurrency?.currencyCode}
       </Text>
     ),
     "Effective from": (
@@ -221,11 +214,11 @@ const ExchangeRate = () => {
         </HStack>
       </Box>
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Sponers `}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
-        isLoading={isLoading}
+        isLoading={isExchangeRateLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
         // totalPages={10}