update 24-06-2024

src/Components/DataTable/DataTable.jsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
+import Pagination from "../Pagination";
 
-const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
+const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages }) => {
   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">
@@ -10,8 +11,9 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table   size="sm">
-        <TableCaption>Rubix v1.0.0</TableCaption>
-          <Thead   backgroundColor="purple.50">
+        {/* <TableCaption><Pagination totalItems={totalPages} /></TableCaption> */}
+        <TableCaption>Tanami v1.0</TableCaption>
+          <Thead   backgroundColor="gray.50">
             <Tr>
               {tableHeadRow.map((heading, index) => (
                 <Th key={index} p={3} w={columnWidth}>
@@ -23,7 +25,7 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
           </Thead>
           <Tbody className="web-text-small">
             {isLoading
-              ? Array.from({ length: 12 }).map((_, index) => (
+              ? Array?.from({ length: 10 }).map((_, index) => (
                   <Tr key={index}>
                     {tableHeadRow.map((_, i) => (
                       <Td key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" w={columnWidth}>

src/Components/FormField.jsx

@@ -0,0 +1,50 @@
+import { FormControl, FormLabel, Input, Textarea } from '@chakra-ui/react';
+import React from 'react'
+import { Controller } from 'react-hook-form';
+import { TiWarning } from 'react-icons/ti';
+
+const FormField = ({
+    label,
+    control,
+    name,
+    type = "text",
+    errors,
+    isRequired,
+    ...props
+  }) => (
+    // <FormControl isInvalid={errors[name]}>
+    // <FormControl isRequired={isRequired}>
+    <FormControl >
+      <FormLabel fontSize={"sm"}>{label}</FormLabel>
+      <Controller
+        control={control}
+        name={name}
+        defaultValue=""
+        render={({ field }) => {
+          return type === "textarea" ? (
+            <Textarea
+              focusBorderColor="forestGreen.400"
+              size={"sm"}
+              {...field}
+              {...props}
+            />
+          ) : (
+            <Input
+              focusBorderColor="forestGreen.300"
+              size={"sm"}
+              type={type}
+              {...field}
+              {...props}
+            />
+          );
+        }}
+      />
+      {errors[name] && (
+        <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+          <TiWarning className="fw-bold fs-5 " /> {errors[name].message}
+        </span>
+      )}
+    </FormControl>
+  );
+
+export default FormField

src/Components/HeaderMain.jsx

@@ -18,35 +18,17 @@ import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
 import { useGetNewsLetterEmailQuery } from "../Services/api.service";
 
-const HeaderMain = ({ link, btnTitle, title, icon, logOutHandler }) => {
-  const { data, error, isLoading } = useGetNewsLetterEmailQuery();
+const HeaderMain = ({ link, btnTitle, title, icon, logOutHandler, slideDirecttion }) => {
+
 
-  const handleDownload = () => {
-    if (Array.isArray(data?.data?.rows)) {
-      const worksheet = XLSX.utils.json_to_sheet(data?.data?.rows);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
-      XLSX.writeFile(workbook, "newsletter_emails.xlsx");
-    } else {
-      // // console.error(
-      //   "Expected data to be an array but received:",
-      //   data?.data?.rows
-      // );
-    }
-  };
   return (
     <Box
       backgroundColor={"#fff"}
-      // bg="white.900"
-      // backdropFilter="blur(10px) hue-rotate(90deg)"
-      // h={12}
-      className={` pt-2 pb-2 fw-400 border-bottom d-flex justify-content-between align-items-center`}
+      className={` pt-2 pb-2   fw-400 border-bottom d-flex ${slideDirecttion ? "flex-row-reverse ps-2" : ""}  justify-content-between align-items-center`}
     >
-      {/* <span className="fs-5">Community</span> */}
-
       <Text
         as={"span"}
-        fontWeight={"bold"}
+        fontWeight={"500"}
         color={"forestGreen.500"}
         className="fs-6 "
       >

src/Components/Pagination.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Select, HStack, Text, Box, IconButton } from '@chakra-ui/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+
+const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
+  const [pageSize, setPageSize] = useState(itemsPerPageOptions[0]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  const handlePageSizeChange = (e) => {
+    setPageSize(Number(e.target.value));
+    setCurrentPage(1); // Reset to first page whenever page size changes
+  };
+
+  const paginationPrev = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const paginationNext = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const displayRange = {
+    start: (currentPage - 1) * pageSize + 1,
+    end: Math.min(currentPage * pageSize, totalItems),
+  };
+
+  return (
+    <HStack d="flex" justifyContent="flex-end" alignItems="center" >
+      {/* <Text className='web-text-small'>Tanami v0.1</Text> */}
+
+      <HStack>
+      <Select
+        className="pointer web-text-small"
+        width={"90px"}
+        rounded="sm"
+        size="sm"
+        value={pageSize}
+        onChange={handlePageSizeChange}
+      >
+        {itemsPerPageOptions.map((size) => (
+          <option key={size} value={size}>
+            {size}
+          </option>
+        ))}
+      </Select>
+        <IconButton
+          size={'sm'}
+          rounded="sm" 
+          icon={<ChevronLeftIcon />}
+          onClick={paginationPrev}
+          className="link pointer"
+          isDisabled={currentPage === 1}
+        />
+        <Text className="web-text-medium" as={"span"}>
+          {displayRange.start} - {displayRange.end} of {totalItems}
+        </Text>
+        <IconButton
+          icon={<ChevronRightIcon />}
+          size={'sm'}
+          rounded="sm" 
+          onClick={paginationNext}
+          className="link pointer"
+          isDisabled={currentPage === totalPages}
+        />
+      </HStack>
+    </HStack>
+  );
+};
+
+export default Pagination;