some updates

components/Initial-loading/index.tsx

@@ -1,9 +1,9 @@
 const InitialLoading = () => {
   return (
-    <div>
+    <div className="flex items-center justify-center flex-col">
       <div className="flex font-bold justify-center mb-6">
         <div className="font-title text-primary inline-flex text-3xl transition-all duration-200 md:text-6xl">
-          <span className="capitalize">Auth Portal</span>
+          <span className="capitalize">Users Management</span>
         </div>
       </div>
       <progress className="progress w-80 progress-primary"></progress>

components/auth/confirm-email/index.tsx

@@ -10,8 +10,9 @@ const ConfirmEmail = () => {
   const hash = route.query?.hash;
   const { isLoading, isSuccess, mutate: confirm, isError } = useEmailConfirm();
   useEffect(() => {
+    console.log(route.query);
     if (hash) confirm({ hash: hash });
-  }, []);
+  }, [confirm, hash, route.query]);
   const goToHome = () => {
     location.replace("/");
   };

components/info-account.tsx

@@ -1,4 +1,5 @@
 import { User } from "@/services/auth/type";
+import { formattedRoles } from "@/store/users";
 import { formatDate } from "@/utils/date";
 import { BsFillInfoSquareFill } from "react-icons/bs";
 type PropsComponent = {
@@ -49,6 +50,10 @@ const InfoAccount = ({ user }: PropsComponent) => {
           <span className="font-bold "> Join Data :</span>{" "}
           {formatDate(user?.createdAt)}
         </div>
+        <div>
+          <span className="font-bold "> Roles :</span>{" "}
+          {user && formattedRoles(user.roles)}
+        </div>
       </div>
     </>
   );

components/layouts/main/index.tsx

@@ -1,18 +1,26 @@
 import InitialLoading from "@/components/Initial-loading";
+import { ProvideSocketIoClient } from "@/providers/SocketIoProvider";
 import { useInfSession } from "@/services/auth";
 import { selectors } from "@/store";
+import { useRouter } from "next/router";
 import { ReactElement, useEffect } from "react";
 
 type componentProps = {
   children: ReactElement;
 };
 const Main = ({ children }: componentProps) => {
-  const { isLoading, data, isSuccess } = useInfSession();
+  const router = useRouter();
   const setToken = selectors.auth.setToken();
+  const setUser = selectors.auth.setUser();
+  const token = selectors.auth.token();
+  const { data, isSuccess } = useInfSession({
+    enabled: router.isReady && !token,
+  });
 
   useEffect(() => {
     if (isSuccess) {
       setToken(data.token);
+      setUser(data.user);
     }
   }, [isSuccess]);
   return (
@@ -21,12 +29,12 @@ const Main = ({ children }: componentProps) => {
         <div className="bg-primary pointer-events-none absolute left-20 aspect-square w-96 rounded-full opacity-20 blur-3xl" />
         <div className="bg-success pointer-events-none absolute aspect-square w-full rounded-full opacity-10 blur-3xl" />
         <main className="w-full h-full relative overflow-hidden z-0 flex flex-1 flex-col">
-          {isLoading && (
+          {!token && (
             <div className="flex items-center justify-center h-full">
               <InitialLoading />
             </div>
           )}
-          {!isLoading && children}
+          {token && <ProvideSocketIoClient> {children}</ProvideSocketIoClient>}
         </main>
       </div>
     </>

components/table/components/body-loading.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+import { BodyLoadingPros } from "../type";
+
+const BodyLoading: FC<BodyLoadingPros> = ({ columns, limit }) => {
+  const generateRows = () => {
+    const rows = [];
+
+    for (let i = 0; i < limit; i++) {
+      rows.push(
+        <tr key={i}>
+          {columns.map((column) => (
+            <td key={column.name}>
+              <div className="skeleton h-5 w-20"></div>
+            </td>
+          ))}
+        </tr>
+      );
+    }
+
+    return rows;
+  };
+
+  return <tbody>{generateRows()}</tbody>;
+};
+
+export default BodyLoading;

components/table/components/body.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from "react";
+import { BodyProps } from "../type";
+import { Column } from "@/services/types";
+import classNames from "classnames";
+
+const Body: FC<BodyProps> = ({ data, columns, actions, showFooter }) => {
+  const renderCellContent = (column: Column<any>, row: any) => {
+    return <>{column.filed(row)}</>;
+  };
+
+  const renderCell = (column: Column<any>, row: any, index: number) => {
+    const style =
+      column.styled && typeof column.styled === "function"
+        ? column.styled(row)
+        : column.styled || {};
+
+    return (
+      <td
+        className={
+          column.classes && typeof column.classes === "function"
+            ? column.classes(row)
+            : column.classes || ""
+        }
+        style={style}
+        key={index}
+      >
+        {renderCellContent(column, row)}
+      </td>
+    );
+  };
+
+  const renderRow = (row: any, rowIndex: number) => (
+    <tr key={rowIndex} className="hover">
+      {columns.map((column, columnIndex) =>
+        renderCell(column, row, columnIndex)
+      )}
+      {actions && actions.length && (
+        <th className="flex  items-center justify-center">
+          {actions.map((action) => (
+            <button
+              key={action.name}
+              className="ml-2"
+              onClick={() => action.handler(row)}
+            >
+              {action.icon}
+            </button>
+          ))}
+        </th>
+      )}
+    </tr>
+  );
+
+  return (
+    <>
+      <tbody>{data.map((row, rowIndex) => renderRow(row, rowIndex))}</tbody>
+      {showFooter && (
+        <tfoot>
+          <tr>
+            {columns.map((column) => (
+              <th key={column.name}>{column.label}</th>
+            ))}
+          </tr>
+        </tfoot>
+      )}
+    </>
+  );
+};
+
+export default Body;

components/table/components/footer.tsx

@@ -0,0 +1,47 @@
+import { FC } from "react";
+import Pagination from "./pagination";
+import { FooterProps } from "../type";
+
+const Footer: FC<FooterProps> = ({
+  limit,
+  handleLimitChange,
+  totalPages,
+  page,
+  handleChangeParams,
+}) => {
+  return (
+    <>
+      <div className="flex items-center justify-between mt-4">
+        {!!totalPages && (
+          <div className="mx-2">
+            <label className="mr-2">Rows per page:</label>
+            <select
+              value={limit}
+              onChange={(e) => handleLimitChange(Number(e.target.value))}
+              className="px-2 py-1 border border-gray-500 rounded"
+            >
+              {[10, 20, 30, 40, 50].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        <div className="flex items-center">
+          {totalPages !== undefined && (
+            <>
+              <Pagination
+                totalPages={totalPages}
+                page={page}
+                handlePageChange={handleChangeParams}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Footer;

components/table/components/header.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { HeaderProps } from "../type";
+
+const Header: FC<HeaderProps> = ({
+  columns,
+  handleSortChange,
+  sortBy,
+  sortOrder,
+  actions,
+}) => {
+  return (
+    <>
+      <thead>
+        <tr>
+          {columns.map((column) => (
+            <th key={column.name}>
+              {column.label}
+              {sortBy === column.name && (
+                <span
+                  onClick={() => handleSortChange(column.name)}
+                  className="cursor-pointer"
+                >
+                  {sortOrder === "asc" ? " ▲" : " ▼"}
+                </span>
+              )}
+              <span
+                onClick={() => handleSortChange(column.name)}
+                className="cursor-pointer"
+              >
+                {sortBy !== column.name && " ▲"}
+              </span>
+            </th>
+          ))}
+          {actions && actions.length > 0 && (
+            <th className="text-center">Actions</th>
+          )}
+        </tr>
+      </thead>
+    </>
+  );
+};
+
+export default Header;

components/table/components/pagination.tsx

@@ -0,0 +1,84 @@
+import { FC } from "react";
+import { PaginationProps } from "../type";
+
+const Pagination: FC<PaginationProps> = ({
+  totalPages,
+  page,
+  handlePageChange,
+}) => {
+  const buttons = [];
+  const maxButtons = 5;
+  const startPage = Math.max(1, page - Math.floor(maxButtons / 2));
+
+  const pageChang = (newPage: number) => {
+    handlePageChange({
+      page: newPage,
+    });
+  };
+
+  const addEllipsis = (key: string, onClick: any) => {
+    buttons.push(
+      <span key={key} className="join-item btn btn-square" onClick={onClick}>
+        ...
+      </span>
+    );
+  };
+
+  if (startPage > 1) {
+    buttons.push(
+      <button
+        key="first"
+        onClick={() => pageChang(1)}
+        className={`join-item btn btn-square ${
+          1 === Number(page) ? "btn-active" : ""
+        }`}
+      >
+        1
+      </button>
+    );
+    if (startPage > 2) {
+      addEllipsis("firstEllipsis", () => pageChang(startPage - maxButtons));
+    }
+  }
+
+  for (
+    let i = 0;
+    i < maxButtons &&
+    startPage + i <= Math.min(totalPages, startPage + maxButtons - 1);
+    i++
+  ) {
+    const pageNumber = startPage + i;
+    buttons.push(
+      <button
+        key={pageNumber}
+        onClick={() => pageChang(pageNumber)}
+        className={`join-item btn btn-square ${
+          pageNumber === Number(page) ? "btn-active" : ""
+        }`}
+      >
+        {pageNumber}
+      </button>
+    );
+  }
+
+  if (startPage + maxButtons - 1 < totalPages) {
+    if (startPage + maxButtons < totalPages) {
+      addEllipsis("lastEllipsis", () => pageChang(startPage + maxButtons));
+    }
+    buttons.push(
+      <button
+        key="last"
+        onClick={() => pageChang(totalPages)}
+        className={`join-item btn btn-square ${
+          totalPages === Number(page) ? "btn-active" : ""
+        }`}
+      >
+        {totalPages}
+      </button>
+    );
+  }
+
+  return <div className="join">{buttons}</div>;
+};
+
+export default Pagination;