refactor(profiles): remove profile-table and add implementation using table component, update actions for improved readability

Author: tyronejosee

src/actions/profiles.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+
+export async function deleteProfileByAdmin(profileId: string) {
+  const supabase = await createClient();
+  const { error } = await supabase
+    .from("profiles")
+    .delete()
+    .eq("id", profileId);
+
+  if (error) throw new Error("Failed to delete post");
+}

src/actions/profiles/delete-profile-by-admin.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+import type { Profile } from "@/types";
+
+export const getProfilesByAdmin = async (): Promise<Profile[]> => {
+  const supabase = await createClient();
+
+  const { data, error } = await supabase.from("profiles").select("*");
+
+  if (error) throw new Error("Failed to fetch profiles");
+  return data;
+};

src/actions/profiles/get-profiles-by-admin.ts

@@ -0,0 +1,3 @@
+export * from "./delete-profile-by-admin";
+export * from "./get-profiles-by-admin";
+export * from "./update-profile-role-by-admin";

src/actions/profiles/index.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+
+export const updateProfileRole = async (id: string, newRole: string) => {
+  const supabase = await createClient();
+
+  const { error } = await supabase
+    .from("profiles")
+    .update({ role: newRole })
+    .eq("id", id);
+
+  if (error) throw new Error("Failed to update profile role");
+};

src/actions/profiles/update-profile-role-by-admin.ts

@@ -2,28 +2,41 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useDisclosure, addToast } from "@heroui/react";
-
-import { deleteCategory } from "@/actions/categories";
-import { DeleteModal, HeadingDashboard } from "@/components/ui";
-
-import type { Profile } from "@/types";
-import { ProfileTable } from "@/components/profiles";
-import { updateProfileRole } from "@/actions/profiles";
+import {
+  useDisclosure,
+  addToast,
+  Image,
+  Chip,
+  Dropdown,
+  DropdownTrigger,
+  Button,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/react";
+import { deleteProfileByAdmin, updateProfileRole } from "@/actions/profiles";
+import { DeleteModal, HeadingDashboard, Table } from "@/components/ui";
+import { ChevronDown, Trash2 } from "lucide-react";
+import { capitalize } from "@/lib/utils";
+import { ROLE_OPTIONS } from "@/config/constants";
+import type { Profile, TableAction, TableColumn } from "@/types";
 
 type Props = { profiles: Profile[] };
 
 export default function ProfilesPageClient({ profiles }: Props) {
   const router = useRouter();
+
+  // States
   const [profileToDelete, setProfileToDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
+  // Hooks
   const {
     isOpen: isConfirmOpen,
     onOpen: onConfirmOpen,
     onClose: onConfirmClose,
   } = useDisclosure();
 
+  // Functions
   const handleRoleChange = async (id: string, newRole: string) => {
     try {
       await updateProfileRole(id, newRole);
@@ -50,7 +63,7 @@ export default function ProfilesPageClient({ profiles }: Props) {
     if (!profileToDelete) return;
     setLoading(true);
     try {
-      await deleteCategory(profileToDelete);
+      await deleteProfileByAdmin(profileToDelete);
       addToast({
         title: "Deleted",
         description: "Profile deleted successfully.",
@@ -66,16 +79,117 @@ export default function ProfilesPageClient({ profiles }: Props) {
     }
   };
 
+  // Constants
+  const columns: TableColumn[] = [
+    { name: "Avatar", uid: "avatar_url" },
+    { name: "Full Name", uid: "full_name", sortable: true },
+    { name: "Username", uid: "username", sortable: true },
+    { name: "Created At", uid: "created_at", sortable: true },
+    { name: "Role", uid: "role" },
+    { name: "Status", uid: "status" },
+  ];
+
+  const roleOptions = [
+    { uid: "user", name: "User" },
+    { uid: "admin", name: "Admin" },
+  ];
+
+  const actions: TableAction[] = [
+    {
+      key: "delete",
+      label: "Delete profile",
+      icon: <Trash2 size={18} />,
+      color: "danger",
+      shortcut: "⌘D",
+      onAction: (profile) => handleDelete(profile.id),
+    },
+  ];
+
   return (
     <div className="flex flex-col gap-4">
       {/* Heading */}
       <HeadingDashboard title="Profiles" count={profiles.length} />
 
       {/* Table */}
-      <ProfileTable
-        profiles={profiles}
-        handleRoleChange={handleRoleChange}
-        handleDelete={handleDelete}
+      <Table
+        title="Profiles table"
+        data={profiles}
+        columns={columns}
+        actions={actions}
+        searchPlaceholder="Search by full name or username..."
+        searchKeys={["full_name", "username"]}
+        defaultRowsPerPage={10}
+        rowsPerPageOptions={[10, 25, 50, 100]}
+        filterKey="role"
+        filterLabel="Role"
+        filterOptions={roleOptions}
+        cellRenderer={({ item, columnKey, value }) => {
+          switch (columnKey) {
+            case "avatar_url":
+              return (
+                <Image
+                  radius="sm"
+                  src={value}
+                  alt="Current image"
+                  width={24}
+                  height={24}
+                  className="border-2 border-neutral-200 dark:border-neutral-800"
+                />
+              );
+            case "created_at":
+              return new Date(value).toLocaleDateString();
+            case "role":
+              return (
+                <Dropdown
+                  classNames={{
+                    content:
+                      "bg-white dark:bg-neutral-950 border-2 border-neutral-200 dark:border-neutral-800",
+                  }}
+                >
+                  <DropdownTrigger>
+                    <Button
+                      size="sm"
+                      variant="bordered"
+                      className="min-w-[110px] border-2 border-neutral-200 dark:border-neutral-800"
+                      endContent={<ChevronDown size={16} />}
+                    >
+                      {capitalize(value)}
+                    </Button>
+                  </DropdownTrigger>
+                  <DropdownMenu
+                    aria-label="Select Role"
+                    disallowEmptySelection
+                    selectionMode="single"
+                    onAction={(key) =>
+                      handleRoleChange(item.id, key.toString())
+                    }
+                  >
+                    {ROLE_OPTIONS.map((role) => (
+                      <DropdownItem key={role.key}>{role.label}</DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
+              );
+            case "status":
+              return (
+                <Chip
+                  size="sm"
+                  color={
+                    value === "active"
+                      ? "success"
+                      : value === "inactive"
+                        ? "danger"
+                        : "default"
+                  }
+                  variant="flat"
+                >
+                  {capitalize(value)}
+                </Chip>
+              );
+            default:
+              return value;
+          }
+        }}
       />
 
       {/* Delete Modal */}