From 144c3ab983209a1b0bcb2478a592f9f15e90cea3 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:02:48 +0100
Subject: [PATCH 01/11] feat: create super admin product page

---
 .../dashboard/(admin)/admin/products/page.tsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/page.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/page.tsx b/src/app/dashboard/(admin)/admin/products/page.tsx
new file mode 100644
index 000000000..49391597a
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { CirclePlus, Filter } from "lucide-react";
+
+import CardComponent from "~/components/adminDashboard/CardComponent";
+import { cardData } from "~/components/adminDashboard/cardData";
+import { Button } from "~/components/common/common-button";
+import AddProductModal from "./_components/ProductModal/add-product-modal";
+import ProductTable from "./_components/ProductTable/product-table";
+
+const page = () => {
+  return (
+    <main className="p-4">
+      <div className="grid h-auto grid-cols-1 gap-4 md:grid-cols-3 lg:h-[134px]">
+        {[0, 1, 2].map((_, index) => (
+          <CardComponent
+            key={index}
+            title={cardData[0].title}
+            value={cardData[0].value}
+            description={cardData[0].description}
+            icon={cardData[0].icon}
+          />
+        ))}
+      </div>
+
+      <div className="mt-6 flex w-full flex-col items-center justify-start gap-3 md:flex-row">
+        <div className="flex w-full flex-col items-start justify-start gap-2.5 lg:w-fit">
+          <h1 className="self-stretch text-[28px] font-semibold text-black">
+            Products
+          </h1>
+          <p className="self-stretch text-xs font-normal leading-3 text-black">
+            Manage your products and view their sales performance.
+          </p>
+        </div>
+        <div className="ml-0 flex w-full items-center justify-start gap-[10px] md:justify-end lg:ml-auto lg:w-fit">
+          <Button className="inline-flex h-10 items-center justify-center rounded border border-slate-300 bg-transparent p-2.5 text-base text-neutral-600 shadow-none hover:border-primary hover:text-primary">
+            <Filter />
+            Filter
+          </Button>
+          <AddProductModal>
+            <Button className="inline-flex h-10 items-center justify-center bg-primary">
+              <CirclePlus />
+              Add Product
+            </Button>
+          </AddProductModal>
+        </div>
+      </div>
+      <div className="mt-10">
+        <ProductTable />
+      </div>
+    </main>
+  );
+};
+
+export default page;

From 07006a85984e659e2594d422ce405a35a0fd4181 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:04:00 +0100
Subject: [PATCH 02/11] feat: create super admin add-product-modal.tsx for
 issue #150

---
 .../ProductModal/add-product-modal.tsx        | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product-modal.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product-modal.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product-modal.tsx
new file mode 100644
index 000000000..ddf146c5b
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product-modal.tsx
@@ -0,0 +1,114 @@
+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 AddProductModalProperties {
+  children: React.ReactNode;
+}
+const AddProductModal = ({ children }: AddProductModalProperties) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="flex h-fit max-h-[500px] flex-col gap-[23px] overflow-y-auto rounded-none border bg-white p-6 sm:max-w-[500px]">
+        <DialogHeader className="inline-flex flex-col items-start justify-start">
+          <DialogTitle className="text-lg font-bold text-neutral-950">
+            Add new product
+          </DialogTitle>
+          <DialogDescription className="text-xs leading-3 text-slate-500">
+            Create a new product
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3 px-2">
+          <div className="items-left flex flex-col gap-1">
+            <Label
+              htmlFor="productname"
+              className="left-0 text-left text-sm font-medium text-slate-900"
+            >
+              Product name
+            </Label>
+            <Input
+              id="productname"
+              required
+              placeholder="@Joh Doe"
+              className="col-span-3 inline-flex h-10 items-start justify-start gap-2"
+            />
+          </div>
+          <div className="items-left flex flex-col gap-1">
+            <Label
+              htmlFor="productdescription"
+              className="left-0 text-left text-sm font-medium text-slate-900"
+            >
+              Product Description
+            </Label>
+            <Textarea
+              id="productdescription"
+              required
+              placeholder="add product description"
+              className="col-span-3 inline-flex h-10 items-start justify-start gap-2 border bg-transparent text-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-0"
+            />
+          </div>
+          <div className="items-left flex flex-col gap-1">
+            <Label
+              htmlFor="price"
+              className="left-0 text-left text-sm font-medium text-slate-900"
+            >
+              Price
+            </Label>
+            <Input
+              type="number"
+              id="price"
+              required
+              placeholder="e.g 2000.00"
+              className="col-span-3 inline-flex h-10 items-start justify-start gap-2"
+            />
+          </div>
+          <div className="items-left flex flex-col gap-1">
+            <Label
+              htmlFor="quantity"
+              className="left-0 text-left text-sm font-medium text-slate-900"
+            >
+              Quantity
+            </Label>
+            <Input
+              type="number"
+              id="quantity"
+              required
+              placeholder="e.g 1000"
+              className="col-span-3 inline-flex h-10 items-start justify-start gap-2"
+            />
+          </div>
+          <div className="items-left flex flex-col gap-1">
+            <span className="left-0 text-left text-sm font-medium text-slate-900">
+              Upload Images
+            </span>
+            <Button className="w-48" variant={"subtle"} size={"sm"}>
+              Choose file No file choosen
+            </Button>
+            <div className="mt-4 inline-flex h-[56px] items-start justify-start gap-[15px]">
+              <div className="h-14 w-14 rounded bg-neutral-50" />
+              <div className="h-14 w-14 rounded bg-neutral-50" />
+              <div className="h-14 w-14 rounded bg-neutral-50" />
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant={"primary"} type="submit">
+            Add Product
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddProductModal;

From 4d31b56db885cedd4340de58e834130519d0f3c3 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:04:07 +0100
Subject: [PATCH 03/11] test: create add-product.modal.test.tsx

---
 .../ProductModal/add-product.modal.test.tsx   | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product.modal.test.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product.modal.test.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product.modal.test.tsx
new file mode 100644
index 000000000..6692ea8d9
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/add-product.modal.test.tsx
@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import AddProductModal from "./add-product-modal";
+
+describe("addProductModal", () => {
+  it("renders the modal with correct title and description", async () => {
+    expect.hasAssertions();
+    render(
+      <AddProductModal>
+        <button>Open Modal</button>
+      </AddProductModal>,
+    );
+
+    // Check if the trigger button is rendered
+    expect(screen.getByText("Open Modal")).toBeInTheDocument();
+
+    // Open the modal
+    fireEvent.click(screen.getByText("Open Modal"));
+
+    // Check if the modal title and description are rendered
+    await expect(
+      screen.findByText("Add new product"),
+    ).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText("Create a new product"),
+    ).resolves.toBeInTheDocument();
+  });
+
+  it("renders form fields", async () => {
+    expect.hasAssertions();
+    render(
+      <AddProductModal>
+        <button>Open Modal</button>
+      </AddProductModal>,
+    );
+
+    // Open the modal
+    fireEvent.click(screen.getByText("Open Modal"));
+
+    // Check if form fields are rendered
+    await expect(
+      screen.findByLabelText("Product name"),
+    ).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByLabelText("Product Description"),
+    ).resolves.toBeInTheDocument();
+    await expect(screen.findByLabelText("Price")).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByLabelText("Quantity"),
+    ).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText("Upload Images"),
+    ).resolves.toBeInTheDocument();
+  });
+
+  it("renders submit button", async () => {
+    expect.hasAssertions();
+    render(
+      <AddProductModal>
+        <button>Open Modal</button>
+      </AddProductModal>,
+    );
+
+    // Open the modal
+    fireEvent.click(screen.getByText("Open Modal"));
+
+    // Check if the submit button is rendered
+    await expect(
+      screen.findByRole("button", { name: "Add Product" }),
+    ).resolves.toBeInTheDocument();
+  });
+});

From 9a28f2c4330b375693b9bc405dde2ec1de1f6e02 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:04:13 +0100
Subject: [PATCH 04/11] test: create delete-dialog.test.tsx

---
 .../ProductModal/delete-dialog.test.tsx       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.test.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.test.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.test.tsx
new file mode 100644
index 000000000..638577655
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.test.tsx
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import DeleteDialog from "./delete-dialog";
+
+describe("deleteDialog", () => {
+  it("renders the dialog with correct content", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    expect(screen.getByText("Are you absolutely sure?")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "This action cannot be undone. This will permanently delete this product from the database.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /delete/i })).toBeInTheDocument();
+  });
+
+  it("calls onClose when Cancel button is clicked", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when Delete button is clicked", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /delete/i }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

From cd9c744673119b64832d08cd2af6713a012120c5 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:04:21 +0100
Subject: [PATCH 05/11] feat: create delete-dialog.tsx

---
 .../ProductModal/delete-dialog.tsx            | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.tsx
new file mode 100644
index 000000000..0952a8bf6
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductModal/delete-dialog.tsx
@@ -0,0 +1,43 @@
+import { Button } from "~/components/common/common-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+const DeleteDialog = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-lg font-semibold leading-7 text-slate-900">
+            Are you absolutely sure?
+          </DialogTitle>
+          <DialogDescription className="text-sm font-normal leading-tight text-slate-500">
+            This action cannot be undone. This will permanently delete this
+            product from the database.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex w-full">
+          <Button
+            variant="outline"
+            className="ml-auto flex items-center justify-center gap-2.5 rounded-md px-4 py-2 text-sm font-medium leading-normal"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={onClose}
+            className="ml-2 flex items-center justify-center gap-2.5 rounded-md bg-red-600 px-4 py-2 text-sm font-medium leading-normal text-white"
+          >
+            Delete
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;

From fd6438b173bf6aa1ef69c01ae7a7aa5461932cf5 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:05:12 +0100
Subject: [PATCH 06/11] feat: create product-table.tsx for issue #146

---
 .../ProductTable/product-table.tsx            | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx
new file mode 100644
index 000000000..451124d99
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import clsx from "clsx";
+import { ChevronLeft, ChevronRight, EllipsisVertical } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "~/components/ui/pagination";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Product, products } from "../../data/mock.products";
+import DeleteDialog from "../ProductModal/delete-dialog";
+
+const ProductRow = ({ product }: { product: Product }) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handleOpenDialog = () => setIsDialogOpen(true);
+  const handleCloseDialog = () => setIsDialogOpen(false);
+  return (
+    <>
+      <TableRow className="h-[99px] w-full border-b border-slate-300 p-4 text-center text-sm font-medium text-black *:text-black last-of-type:border-b">
+        <TableCell>
+          <div className="justify-betweenitems-center flex items-center gap-3">
+            <div className="aspect-square h-[37px] w-[37px] rounded bg-gradient-to-b from-[#f6c790] to-[#e67e1e] md:h-[47px] md:w-[47px] lg:h-[67px] lg:w-[67px]" />
+            <span className="truncate text-left text-sm font-medium lg:text-right">
+              {product.name}
+            </span>
+          </div>
+        </TableCell>
+        <TableCell>{product.price}</TableCell>
+        <TableCell>{product.totalSold}</TableCell>
+        <TableCell>
+          <div
+            className={clsx(
+              product.status === "Active"
+                ? "border-lime-500 text-lime-500"
+                : "border-black text-black",
+              "inline-flex h-[27px] w-[57px] items-center justify-center gap-2.5 rounded-[80px] border",
+            )}
+          >
+            <span className="text-xs">{product.status}</span>
+          </div>
+        </TableCell>
+        <TableCell className="text-right">{product.createdAt}</TableCell>
+        <TableCell>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                className="border border-transparent bg-transparent text-black hover:border-primary hover:bg-transparent hover:text-primary focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                size={"icon"}
+              >
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel className="sr-only">Actions</DropdownMenuLabel>
+              <DropdownMenuItem>Edit</DropdownMenuItem>
+              <DropdownMenuItem onClick={handleOpenDialog}>
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TableCell>
+      </TableRow>
+      {isDialogOpen && <DeleteDialog onClose={handleCloseDialog} />}
+    </>
+  );
+};
+
+const ProductTable = () => {
+  return (
+    <div className="overflow-x-auto">
+      <Table className="w-full min-w-[500px] whitespace-nowrap">
+        <TableCaption className="sr-only">
+          A list of your recent invoices.
+        </TableCaption>
+        <TableHeader>
+          <TableRow className="border-b-0 bg-primary/10 shadow-none *:text-center *:text-base *:text-neutral-950 *:shadow-none hover:bg-primary/10">
+            <TableHead className="w-[316px]">Name</TableHead>
+            <TableHead>Price</TableHead>
+            <TableHead>Total Sold</TableHead>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <TableHead className="cursor-pointer">Status</TableHead>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel className="sr-only">
+                  Actions
+                </DropdownMenuLabel>
+                <DropdownMenuItem>Draft</DropdownMenuItem>
+                <DropdownMenuItem>Active</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <TableHead>Created at</TableHead>
+            <TableHead>Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {products.map((product) => {
+            return <ProductRow key={product.name} product={product} />;
+          })}
+        </TableBody>
+      </Table>
+      <div className="mt-8 flex w-full items-center justify-center text-sm text-muted-foreground">
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <Button variant={"ghost"}>
+                <ChevronLeft /> Previous
+              </Button>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink className="bg-transparent shadow-none" href="#">
+                1
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>
+                2
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink className="bg-transparent shadow-none" href="#">
+                3
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <Button variant={"ghost"}>
+                Next <ChevronRight />
+              </Button>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </div>
+  );
+};
+
+export default ProductTable;

From 8c5bbee6b3702e52fa3fd38827ce2d37a1154848 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:05:17 +0100
Subject: [PATCH 07/11] test: create product.table.test.tsx

---
 .../ProductTable/product.table.test.tsx       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductTable/product.table.test.tsx

diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product.table.test.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product.table.test.tsx
new file mode 100644
index 000000000..4169ff9e4
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product.table.test.tsx
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { products } from "../../data/mock.products";
+import ProductTable from "./product-table";
+
+describe("productTable", () => {
+  it("renders the table with product data and interacts correctly", () => {
+    expect.hasAssertions();
+    render(<ProductTable />);
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Price")).toBeInTheDocument();
+    expect(screen.getByText("Total Sold")).toBeInTheDocument();
+    expect(screen.getByText("Created at")).toBeInTheDocument();
+    expect(screen.getByText("Action")).toBeInTheDocument();
+
+    for (const product of products) {
+      expect(screen.getByText(product.name)).toBeInTheDocument();
+      expect(screen.getByText(product.price)).toBeInTheDocument();
+      expect(screen.getByText(product.totalSold)).toBeInTheDocument();
+      expect(screen.getByText(product.createdAt)).toBeInTheDocument();
+    }
+
+    const actionButtons = screen.getAllByRole("button", { name: "" });
+    fireEvent.click(actionButtons[0]);
+
+    fireEvent.click(document.body);
+
+    expect(screen.getByText("Previous")).toBeInTheDocument();
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("Next")).toBeInTheDocument();
+
+    const nextButton = screen.getByText("Next");
+    fireEvent.click(nextButton);
+  });
+});

From 5887a195f432fb3e0a8267f744ae7700bd57ca4d Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:05:23 +0100
Subject: [PATCH 08/11] feat: create mock.products.ts

---
 .../admin/products/data/mock.products.ts      | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/app/dashboard/(admin)/admin/products/data/mock.products.ts

diff --git a/src/app/dashboard/(admin)/admin/products/data/mock.products.ts b/src/app/dashboard/(admin)/admin/products/data/mock.products.ts
new file mode 100644
index 000000000..fef492c68
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/products/data/mock.products.ts
@@ -0,0 +1,38 @@
+export interface Product {
+  name: string;
+  price: string;
+  totalSold: string;
+  status: "Active" | "Draft";
+  createdAt: string;
+}
+
+export const products: Product[] = [
+  {
+    name: "Hypernova Headphones",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+  },
+  {
+    name: "Galaxy Tablet",
+    price: "$399.99",
+    totalSold: "40",
+    status: "Active",
+    createdAt: "2024-07-14 03:15PM",
+  },
+  {
+    name: "Astro Smartwatch",
+    price: "$199.99",
+    totalSold: "15",
+    status: "Draft",
+    createdAt: "2024-07-10 09:20AM",
+  },
+  {
+    name: "Nebula Laptop",
+    price: "$899.99",
+    totalSold: "50",
+    status: "Active",
+    createdAt: "2024-07-08 01:45PM",
+  },
+];

From 8f060b3a52838eed59874e4a06ac4ad0f463d7c0 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:05:29 +0100
Subject: [PATCH 09/11] feat: create dialog.tsx

---
 src/components/ui/dialog.tsx | 122 +++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 src/components/ui/dialog.tsx

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..42a10af7d
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...properties }, reference) => (
+  <DialogPrimitive.Overlay
+    ref={reference}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...properties}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...properties }, reference) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={reference}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...properties}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...properties
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...properties}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...properties
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...properties}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...properties }, reference) => (
+  <DialogPrimitive.Title
+    ref={reference}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...properties}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...properties }, reference) => (
+  <DialogPrimitive.Description
+    ref={reference}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...properties}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

From 7876d41b218ed8d8cd0f6bb8e9277f1df6f056b2 Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:05:34 +0100
Subject: [PATCH 10/11] feat: create dropdown-menu.tsx

---
 src/components/ui/dropdown-menu.tsx | 200 ++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 src/components/ui/dropdown-menu.tsx

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..cfd40e03f
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...properties }, reference) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={reference}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...properties}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...properties }, reference) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={reference}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...properties}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...properties }, reference) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={reference}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...properties}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...properties }, reference) => (
+  <DropdownMenuPrimitive.Item
+    ref={reference}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...properties}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...properties }, reference) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={reference}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...properties}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...properties }, reference) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={reference}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...properties}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...properties }, reference) => (
+  <DropdownMenuPrimitive.Label
+    ref={reference}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...properties}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...properties }, reference) => (
+  <DropdownMenuPrimitive.Separator
+    ref={reference}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...properties}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...properties
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...properties}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

From 944549c098f371987894614a1fee80e3022de25f Mon Sep 17 00:00:00 2001
From: Frank Ezene <ezenefrankc@gmail.com>
Date: Thu, 25 Jul 2024 15:22:00 +0100
Subject: [PATCH 11/11] created a shadcn dialog

---
 src/components/ui/dialog.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 6370b49d6..d8890209f 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -111,6 +111,14 @@ const DialogDescription = React.forwardRef<
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-  Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
 };
-