feat: super admin users page #54

app/components/SuperAdminUsersPage/Users/Table.tsx

@@ -0,0 +1,57 @@
+import { Payment, columns } from "./columns";
+import { DataTable } from "./data-table";
+
+const data: Payment[] = [
+  {
+    id: "728ed52f",
+    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s",
+    name: "Afolabi Olanipekun",
+    email: "[email protected]",
+    phone: "09123456789",
+    date: "02/07/2024",
+    status: "active",
+  },
+  {
+    id: "728ed52f",
+    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s",
+    name: "Adetunji Oluwaseun",
+    email: "[email protected]",
+    phone: "09123456789",
+    date: "02/07/2024",
+    status: "inactive",
+  },
+  {
+    id: "728ed52f",
+    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s",
+    name: "Ifunanya Adedapo",
+    email: "[email protected]",
+    phone: "09123456789",
+    date: "02/07/2024",
+    status: "inactive",
+  },
+  {
+    id: "728ed52f",
+    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s",
+    name: "Busola Igwe",
+    email: "[email protected]",
+    phone: "09123456789",
+    date: "02/07/2024",
+    status: "inactive",
+  },
+  {
+    id: "728ed52f",
+    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s",
+    name: "Moshood Adedayo",
+    email: "[email protected]",
+    phone: "09123456789",
+    date: "02/07/2024",
+    status: "active",
+  },
+];
+export default function UsersTable({ client = "" }) {
+  return (
+    <div>
+      <DataTable columns={columns({ client })} data={data} />
+    </div>
+  );
+}

app/components/SuperAdminUsersPage/Users/card.tsx

@@ -0,0 +1,55 @@
+import { MoveUpRight, Package, User } from "lucide-react";
+
+export default function UsersCard() {
+  return (
+    <>
+      <div className="grid gap-6 md:grid-cols-3 lg:gap-4 md:gap-2 lg:px-0 md:px-2">
+        <div className="rounded-xl bg-white px-6 md:px-4 py-10 shadow-md border">
+          <div className="flex justify-between">
+            <h6 className="text-sm font-semibold">Total Users</h6>
+
+            <User className="h-5 w-5" />
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-[20px] font-bold text-neutral-800">4,000</h4>
+            <div className="flex items-center ">
+              <span className="text-xs text-muted-foreground">
+                +10% from last month
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-xl bg-white px-6 py-8 md:px-4 shadow-md border">
+          <div className="flex justify-between">
+            <h6 className="text-sm font-semibold">Active Users</h6>
+
+            <Package className="h-5 w-5" />
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-[20px] font-bold text-neutral-800">1500</h4>
+            <div className="flex items-center ">
+              <span className="text-xs text-muted-foreground">
+                +20% from last month
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-xl bg-white px-6 py-10 md:px-4 shadow-md border">
+          <div className="flex justify-between">
+            <h6 className="text-sm font-semibold">Deleted Users</h6>
+
+            <MoveUpRight className="h-5 w-5" />
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-[20px] font-bold text-neutral-800">4,000</h4>
+            <div className="flex items-center ">
+              <span className="text-xs text-muted-foreground">
+                +150% from last month
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/components/SuperAdminUsersPage/Users/columns.tsx

@@ -0,0 +1,125 @@
+import { ColumnDef } from "@tanstack/react-table";
+import {  DotIcon, EllipsisVertical } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+// interface for your data
+export interface Payment {
+  id: string;
+  phone: string;
+  status: "active" | "inactive";
+  name: string;
+  email: string;
+  img: string;
+  date: string;
+}
+
+// props interface for the columns
+interface PaymentColumnsProps {
+  client: string;
+}
+
+// column definitions
+export const columns = ({
+  client,
+}: PaymentColumnsProps): ColumnDef<Payment>[] => [
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ row }) => {
+      const { name, email, img } = row.original;
+
+      return (
+        <div className="flex items-center lg:pr-0 pr-5">
+          {img && (
+            <img src={img} alt={name} className="w-8 h-8 rounded-full mr-2" />
+          )}
+          <div>
+            <div>{name}</div>
+            <div className="text-gray-500 md:text-sm text-xs">{email}</div>
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "phone",
+    header: "Phone Number",
+  },
+  {
+    accessorKey: "date",
+    header: "Date Created",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      const payment = row.original;
+
+      return (
+        <>
+          <div className="flex items-center pr-14">
+            <DotIcon
+              className={`text-center mr-2 h-12 w-12 ${
+                payment.status === "active"
+                  ? "text-[#6DC347]"
+                  : "text-[#F97316]"
+              }`}
+            />
+            <span className="font-medium text-sm">
+              {payment.status === "active" ? "Active" : "Inactive"}
+            </span>
+          </div>
+        </>
+      );
+    },
+  },
+
+  {
+    id: "actions",
+    header: "Action",
+    cell: ({ row }) => {
+      const payment = row.original;
+
+      const editData = () => {
+        // Implement edit functionality here
+        // Prompt user for new values and update payment data
+      };
+
+      const deleteData = () => {
+        // Implement delete functionality here
+        // Delete the payment entry
+      };
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <EllipsisVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="shadow-md border-[#E4E4E7]">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem onClick={editData}>Update</DropdownMenuItem>
+            <DropdownMenuItem onClick={deleteData}>Delete</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {client === "premium" && (
+              <>
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Delete</DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];