Initial commit for new panel

src/components/Tables/admins/Skeleton.tsx

@@ -0,0 +1,41 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export function AdminsSkeleton() {
+  return (
+    <div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
+      <h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
+        Admins
+      </h2>
+
+      <Table>
+        <TableHeader>
+          <TableRow className="border-none uppercase [&>th]:text-center">
+            <TableHead className="!text-left">Full name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead className="!text-right">Role</TableHead>
+            <TableHead>Username</TableHead>
+            <TableHead>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <TableRow key={i}>
+              <TableCell colSpan={100}>
+                <Skeleton className="h-8" />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/components/Tables/admins/index.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useAdminsPresenter } from "./useAdminsPresenter";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import { AdminsSkeleton } from "./Skeleton";
+import Link from "next/link";
+
+const AdminsTable = () => {
+  const {
+    allUsers,
+    router,
+    isPending,
+    onConfirmDelete,
+    isModalOpen,
+    setIsModalOpen,
+    modalConfig,
+    setCurrentUser,
+    pathName,
+  } = useAdminsPresenter();
+
+  if (isPending) return <AdminsSkeleton />;
+  return (
+    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
+      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+        <Link href={`${pathName}/create`}>Create Admin</Link>
+      </button>
+      <Table>
+        <TableHeader>
+          <TableRow className="border-none uppercase [&>th]:text-start">
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Full name
+            </TableHead>
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Email
+            </TableHead>
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Role
+            </TableHead>
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Username
+            </TableHead>
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Actions
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {allUsers.map((item) => {
+            return (
+              <TableRow key={item.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
+                <TableCell className="text-start" colSpan={100}>
+                  {item.full_name}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {item.email}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {item.role}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {item.username}
+                </TableCell>
+
+                <TableCell className="text-start xl:pr-7.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
+                    <button
+                      className="hover:text-red-500"
+                      onClick={() => {
+                        setCurrentUser(item);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      <span className="sr-only">Delete Admin </span>
+                      <TrashIcon />
+                    </button>
+                    <button
+                      className="hover:text-primary"
+                      onClick={() => router.push(`/admins/edit/${item.id}`)}
+                    >
+                      <span className="sr-only">Edit Admin </span>
+                      <PencilSquareIcon />
+                    </button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={modalConfig.title || "Confirm"}
+          message={modalConfig.message || "Are you sure?"}
+          variant={modalConfig.variant || "warning"}
+          size={modalConfig.size || "md"}
+          confirmText={modalConfig.confirmText ?? "Confirm"}
+          cancelText={modalConfig.cancelText ?? "Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AdminsTable;

src/components/Tables/admins/useAdminsPresenter.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import { useAdminListInfiniteQuery, useDeleteAdmin } from "@/hooks/queries";
+import useDebounce from "@/hooks/useDebounce";
+import { useState, useEffect, useRef } from "react";
+import { z } from "zod";
+import { useInView } from "react-intersection-observer";
+import { IUser } from "@/lib/api";
+import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
+import { usePathname, useRouter } from "next/navigation";
+export const useAdminsPresenter = () => {
+  const [currentUser, setCurrentUser] = useState<IUser | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const router = useRouter();
+  const [modalConfig, setModalConfig] = useState<
+    Partial<ConfirmationModalProps>
+  >({});
+
+  const [search, setSearch] = useState("");
+
+  const [params, setParams] = useState<Record<string, any>>({
+    sort: "created_at",
+  });
+  const debouncedSearch = useDebounce(search, 1000);
+  const pathName = usePathname();
+  const {
+    data,
+    error,
+    isPending,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useAdminListInfiniteQuery(params);
+  const { mutate: deleteAdmin } = useDeleteAdmin(() => {
+    setIsModalOpen(false);
+  });
+
+  const { inView } = useInView({ threshold: 0.5 });
+
+  useEffect(() => {
+    if (inView && hasNextPage && data && data.pages.length < 5) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, data, fetchNextPage]);
+
+  useEffect(() => {
+    const result = z.string().safeParse(debouncedSearch);
+    if (result.success) {
+      setParams((prevParams) => ({
+        ...prevParams,
+      }));
+    }
+  }, [debouncedSearch]);
+
+  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+  const onConfirmDelete = () => {
+    if (currentUser) {
+      deleteAdmin(currentUser.id);
+    }
+  };
+  const allUsers = data?.pages.flatMap((page) => page.data.users) ?? [];
+  return {
+    allUsers,
+    currentAdmin: currentUser,
+    error,
+    handleFilterChange,
+    isFetchingNextPage,
+    fetchNextPage,
+    isPending,
+    onConfirmDelete,
+    isModalOpen,
+    setIsModalOpen,
+    modalConfig,
+    setModalConfig,
+    search,
+    hasNextPage,
+    data,
+    router,
+    setCurrentUser,
+    pathName,
+  };
+};