feat waitlist page

src/app/dashboard/(admin)/admin/waitlist-page/_components/waitListModal.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { Button } from "~/components/common/common-button";
+import { Input } from "~/components/common/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+
+interface WaitListModalProperties {
+  children: React.ReactNode;
+  isEdit?: boolean;
+  initialData?: {
+    name?: string;
+    email?: string;
+    notes?: string;
+  };
+}
+
+const WaitListModal: React.FC<WaitListModalProperties> = ({
+  children,
+  isEdit = false,
+}) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="h-fit w-[350px] rounded-[6px] bg-white px-8 py-9 md:w-[422px] md:px-10 md:py-11">
+        <DialogHeader className="inline-flex flex-col items-start justify-start">
+          <DialogTitle className="text-lg font-bold leading-5 text-neutral-950">
+            {isEdit ? "Edit Waitlist Entry" : "Join Waitlist"}
+          </DialogTitle>
+          <DialogDescription className="text-xs leading-3 text-slate-500">
+            {isEdit
+              ? "Update your information"
+              : "Enter your details to join the waitlist"}
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <div className="mt-4">
+            <form className="flex flex-col space-y-4">
+              <div>
+                <Label
+                  htmlFor="name"
+                  className="left-0 text-left text-sm font-medium leading-5 text-slate-900"
+                >
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  required
+                  type="text"
+                  placeholder="e.g John Doe"
+                  className="col-span-3 inline-flex h-10 items-start justify-start gap-2"
+                />
+              </div>
+
+              <div>
+                <Label
+                  htmlFor="email"
+                  className="left-0 text-left text-sm font-medium leading-5 text-slate-900"
+                >
+                  Email
+                </Label>
+                <Input
+                  id="email"
+                  required
+                  type="email"
+                  placeholder="e.g johndoe@gmail.com"
+                  className="col-span-3 inline-flex h-10 items-start justify-start gap-2"
+                />
+              </div>
+
+              <div>
+                <Label
+                  htmlFor="notes"
+                  className="left-0 text-left text-sm font-medium leading-5 text-slate-900"
+                >
+                  Note
+                </Label>
+                <Textarea
+                  id="notes"
+                  placeholder="e.g I am interested in the product"
+                  className="col-span-3 inline-flex h-20 items-start justify-start gap-2 border-[.5px] !border-slate-300 bg-transparent focus:!border-primary focus:!ring-[.5px] focus:!ring-primary focus:!ring-offset-0 focus-visible:!ring-[.5px] focus-visible:!ring-primary focus-visible:!ring-offset-0"
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+        <DialogFooter className="mt-3">
+          <Button variant="primary" type="submit">
+            {isEdit ? "Update" : "Join Waitlist"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default WaitListModal;

src/app/dashboard/(admin)/admin/waitlist-page/_components/waitListTable.tsx

@@ -0,0 +1,15 @@
+import WaitListTableBody from "./waitListTableBody";
+import WaitListTableHead from "./waitListTableHead";
+
+const WaitListTable = () => {
+  return (
+    <>
+      <table className="user-table z-10 h-full w-full overflow-hidden">
+        <WaitListTableHead />
+        <WaitListTableBody />
+      </table>
+    </>
+  );
+};
+
+export default WaitListTable;

src/app/dashboard/(admin)/admin/waitlist-page/_components/waitListTableBody.tsx

@@ -0,0 +1,109 @@
+import clsx from "clsx";
+import { EllipsisVertical } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import DeleteDialog from "../../users/component/dialogue/delete-dialog";
+import { dummyUsers } from "../data/waitlist-dummy";
+
+// import DeleteDialog from "./dialogue/delete-dialog";
+
+const WaitListTableBody = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handleOpenDialog = () => setIsDialogOpen(true);
+  const handleCloseDialog = () => setIsDialogOpen(false);
+
+  return (
+    <>
+      <tbody className="user-table z-10">
+        {dummyUsers.map((data, index) => {
+          const { name, date, email, notes, status } = data;
+
+          return (
+            <tr key={index} className="w-full border-b border-b-border">
+              <td
+                className={`whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2`}
+              >
+                <div className="flex flex-row items-center gap-2">
+                  <Checkbox className="border-2 border-gray-300 data-[state=checked]:border-primary data-[state=checked]:bg-primary" />
+
+                  <div>
+                    <h3 className="text-sm font-[500] leading-6 text-neutral-dark-2">
+                      {name}
+                    </h3>
+                    <div className="text-xs font-normal lowercase leading-4 text-neutral-dark-1"></div>
+                  </div>
+                </div>
+              </td>
+
+              <td>
+                <div className="whitespace-nowrap p-4 text-left text-sm font-normal capitalize leading-4 text-neutral-dark-2">
+                  {email}
+                </div>
+              </td>
+
+              <td
+                className={`gap-2 whitespace-nowrap p-4 text-left text-sm font-normal capitalize leading-4 text-neutral-dark-2`}
+              >
+                {notes}
+              </td>
+              <td
+                className={`whitespace-nowrap p-4 text-left text-sm font-normal leading-4 text-neutral-dark-2`}
+              >
+                <div
+                  className={clsx(
+                    status === "Online"
+                      ? "border-lime-500 text-lime-500"
+                      : "border-black text-black",
+                    "inline-flex h-[27px] w-[85px] items-center justify-center gap-2.5 rounded-[80px] border",
+                  )}
+                >
+                  <span className="text-xs">{status}</span>
+                </div>
+              </td>
+
+              <td
+                className={`whitespace-nowrap p-4 text-left text-sm font-normal capitalize leading-4 text-neutral-dark-2`}
+              >
+                {date}
+              </td>
+
+              <td className="whitespace-nowrap p-4 text-center text-base font-normal capitalize leading-4 text-neutral-dark-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className="bg-transparent text-neutral-dark-2 hover:bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                      size={"icon"}
+                    >
+                      <EllipsisVertical size={16} color="#09090b" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel className="sr-only">
+                      Actions
+                    </DropdownMenuLabel>
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleOpenDialog}>
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+      {isDialogOpen && <DeleteDialog onClose={handleCloseDialog} />}
+    </>
+  );
+};
+
+export default WaitListTableBody;

src/app/dashboard/(admin)/admin/waitlist-page/_components/waitListTableHead.tsx

@@ -0,0 +1,31 @@
+const tableHeadData: string[] = [
+  "name",
+  "email",
+  "notes",
+  "status",
+  "created at",
+  "action",
+];
+
+const WaitListTableHead = () => {
+  return (
+    <>
+      <thead>
+        <tr className="bg-[#FFF7F2]">
+          {tableHeadData.map((data, index) => {
+            return (
+              <th
+                key={index}
+                className={`whitespace-nowrap p-4 text-left text-sm font-normal capitalize leading-4 text-neutral-dark-2 ${data === "name" ? "w-[300px]" : data === "action" ? "w-[86px]" : "w-[202px]"}`}
+              >
+                {data}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+    </>
+  );
+};
+
+export default WaitListTableHead;

src/app/dashboard/(admin)/admin/waitlist-page/data/waitlist-dummy.ts

@@ -0,0 +1,87 @@
+interface waitListCardData {
+  title: string;
+  value: number;
+  description: string;
+  icon: string;
+}
+
+export const waitListCardData: waitListCardData[] = [
+  {
+    title: "Total Users",
+    value: 4000,
+    description: "+10% from last month",
+    icon: `/admin-dashboard/icons/user.svg`,
+  },
+  {
+    title: "Active Users",
+    value: 1500,
+    description: "+20% from last month",
+    icon: `/admin-dashboard/icons/box.svg`,
+  },
+  {
+    title: "Deleted Users",
+    value: 2500,
+    description: "+150% from last month",
+    icon: `/admin-dashboard/icons/arrowUp.svg`,
+  },
+];
+
+export interface WaitListDataProperties {
+  id?: string;
+  name: string;
+  email: string;
+  notes: string;
+  status: "Online" | "Offline" | "Out of stock";
+  date: string;
+}
+export const dummyUsers: WaitListDataProperties[] = [
+  {
+    name: "John Doe",
+    email: "Johndoe2@gmail.com",
+    notes: "Online request",
+    status: "Offline",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Peter Paul",
+    email: "Peterpau2@gmail.com",
+    notes: "Online request",
+    status: "Online",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Williams Kyle",
+    email: "Willkyle12@gmail.com",
+    notes: "Online request",
+    status: "Online",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Ola Ola",
+    email: "Olaolaolu1@gmail.com",
+    notes: "Online request",
+    status: "Offline",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Mary Jane",
+    email: "Maryjane2@gmail.com",
+    notes: "Online request",
+    status: "Online",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Binta Doyle",
+    email: "Bintadoyle@gmail.com",
+    notes: "Online request",
+    status: "Out of stock",
+    date: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Binta Doyle",
+    email: "Bintadoyle@gmail.com",
+    notes: "Online request",
+    status: "Out of stock",
+    date: "2024-07-16 10:36AM",
+  },
+];

src/app/dashboard/(admin)/admin/waitlist-page/page.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "~/test/utils";
+import Page from "./page";
+
+describe("page tests", () => {
+  it("should render correctly", () => {
+    expect.assertions(1);
+
+    render(<Page />);
+
+    expect(true).toBeTruthy();
+  });
+});