From aac50084f137d52954086a08f24ca5f4d59e7d21 Mon Sep 17 00:00:00 2001
From: Vxrcel <skyeparagon@gmail.com>
Date: Mon, 29 Jul 2024 14:02:08 +0100
Subject: [PATCH 1/5] init product edit page

---
 .../_components/layout/navbar/index.tsx       |   2 +-
 .../[productId]/form-images/project-logo.tsx  | 125 ++++++++
 .../products/[productId]/page.tsx             |  16 +
 .../[productId]/product-details-component.tsx | 302 ++++++++++++++++++
 .../[productId]/product-details-content.tsx   |  36 +++
 .../_components/product-body-shadcn.tsx       |   7 +
 .../(user-dashboard)/products/layout.tsx      |  27 ++
 .../(user-dashboard)/products/page.tsx        |  14 +-
 8 files changed, 515 insertions(+), 14 deletions(-)
 create mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/products/layout.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 935806e9c..0c74fc194 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -47,7 +47,7 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="overflow-hidden border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
new file mode 100644
index 000000000..aa5009f02
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
@@ -0,0 +1,125 @@
+import { X } from "lucide-react";
+import React, { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import BlurImage from "~/components/miscellaneous/blur-image";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+import { NewProduct } from "../schema/schema";
+
+type Properties = {
+  form: UseFormReturn<NewProduct>;
+  name: string;
+};
+const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  event.preventDefault();
+};
+const ProjectLogo = ({ form, name }: Properties) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const projectLogo = form.getValues("media");
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = event.dataTransfer.files[0] as File;
+
+    if (target.type === "image/gif") {
+      return name;
+    }
+    const event_data = {
+      target: {
+        files: event.dataTransfer.files,
+      },
+    };
+    handleImageChange(
+      event_data as unknown as React.ChangeEvent<HTMLInputElement>,
+    );
+    setIsDragging(false);
+  };
+
+  return (
+    <div className="relative grid h-full w-[inherit] place-items-center rounded-xl border border-dashed border-[#CBD5E1] bg-[#FAFAFA]">
+      <div
+        data-upload
+        className="flexx absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/30 text-black"
+      >
+        <div className="grid h-full w-full place-items-center rounded-xl bg-white/80 uppercase backdrop-blur-xl">
+          <p className="items-center md:flex md:flex-col">
+            <span className="animate-pulse md:text-xs">Uploading...</span>{" "}
+            <b>10%</b>
+          </p>
+        </div>
+      </div>
+
+      {isDragging && (
+        <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
+          <p className="text-xl text-white">Drop to upload</p>
+        </div>
+      )}
+
+      {projectLogo.url && typeof projectLogo.url === "string" ? (
+        <div className="absolute inset-0 h-full w-full rounded-xl">
+          <div className="h-full w-full overflow-hidden rounded-xl">
+            <BlurImage
+              src={projectLogo.url}
+              width={500}
+              height={500}
+              alt="nft"
+              className={cn(
+                "size-full object-cover transition-all duration-300",
+              )}
+            />
+          </div>
+          <button
+            disabled={false}
+            className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-black/40 md:-right-1 md:-top-1 md:bg-white/20 md:disabled:bg-white/20"
+          >
+            <X className="size-8 min-[500px]:size-10" />
+          </button>
+        </div>
+      ) : (
+        <div
+          onDrop={handleDrop}
+          onDragOver={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsDragging(true);
+          }}
+          onDragLeave={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsDragging(false);
+          }}
+          className="grid h-full w-full place-items-center"
+        >
+          <label
+            className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-y-2 text-neutral-dark-1 hover:text-black"
+            htmlFor={`media`}
+          >
+            <Button
+              type="button"
+              variant={"secondary"}
+              size={"sm"}
+              className="pointer-events-none flex !h-[32px] items-center bg-white text-sm text-[#0F172A] shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)]"
+            >
+              Upload New
+            </Button>
+            <p className="text-xs md:text-sm">Add Image or drag it here</p>
+          </label>
+          <input
+            type="file"
+            hidden
+            accept=" image/*"
+            name={`media`}
+            id={`media`}
+            onChange={handleImageChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProjectLogo;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
new file mode 100644
index 000000000..3d166772b
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
@@ -0,0 +1,16 @@
+import { notFound } from "next/navigation";
+
+import ProductDetailsContent from "./product-details-content";
+
+const ProductDetailsPage = async ({
+  params,
+}: {
+  params: { productId: string };
+}) => {
+  const id = params.productId;
+  if (!id) return notFound();
+
+  return <ProductDetailsContent productId={id} />;
+};
+
+export default ProductDetailsPage;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
new file mode 100644
index 000000000..9cd245e4e
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, Loader } from "lucide-react";
+import Link from "next/link";
+import { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import WordCounter from "~/components/miscellaneous/WordCounter";
+import { Button } from "~/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Textarea } from "~/components/ui/textarea";
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
+import { ProductTableProperties } from "~/types/admin-product.types";
+import { NewProductSchema } from "../_components/schema/schema";
+import { CATEGORIES } from "../data/categories.moct";
+import ProjectLogo from "./form-images/project-logo";
+
+const MAX_CHAR = 160;
+
+const ProductDetailsComponent = ({
+  product,
+}: {
+  product: ProductTableProperties;
+}) => {
+  const { addProduct } = useProducts();
+  const [isLoading, startTransition] = useTransition();
+
+  const new_product_form = useForm<z.infer<typeof NewProductSchema>>({
+    defaultValues: {
+      product_name: "",
+      description: "",
+      price: "",
+      category: "",
+      quantity: "",
+      media: {
+        url: "",
+        id: "",
+      },
+    },
+    resolver: zodResolver(NewProductSchema),
+  });
+
+  const hasProjectLogo = new_product_form.getValues("media.url");
+
+  const onSubmit = async (values: z.infer<typeof NewProductSchema>) => {
+    startTransition(async () => {
+      const date_data = getCurrentDateTime();
+      await simulateDelay(3);
+      addProduct({
+        product_id: `P${generateId(6)}`,
+        category: values.category,
+        description: values.description,
+        name: values.product_name,
+        price: Number(values.price),
+        stock: Number(values.quantity),
+        image: "/product/product-image.webp",
+        status: "in_stock",
+        date_added: date_data.date_added,
+        time: date_data.time,
+      });
+      new_product_form.reset();
+    });
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-y-8 md:gap-y-16">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex items-center gap-x-2 md:gap-x-4">
+          <Link
+            href={"/dashboard/products"}
+            className="rounded-sm border p-0.5 hover:bg-gray-200"
+          >
+            <ArrowLeft />
+          </Link>
+          <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
+            {product.name}
+          </span>
+          <span
+            className={cn(
+              "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
+            )}
+          >
+            <span
+              className={cn("size-3 rounded-full", {
+                "bg-[#6DC347]": product.status === "in_stock",
+                "bg-[#DC2626]": product.status === "low_on_stock",
+                "bg-[#EAB308]": product.status === "out_of_stock",
+              })}
+            />
+            {product.status === "in_stock" && "In Stock"}
+            {product.status === "low_on_stock" && "Low on Stock"}
+            {product.status === "out_of_stock" && "Out of Stock"}
+          </span>
+        </div>
+        <div className="flex items-center justify-end gap-x-4">
+          <Button
+            disabled={isLoading}
+            type="button"
+            variant="outline"
+            size="default"
+            className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+          >
+            Discard
+          </Button>
+          <Button
+            disabled={isLoading}
+            type="submit"
+            variant="default"
+            size="default"
+            className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+          >
+            {isLoading ? (
+              <span className="flex items-center gap-x-2">
+                <span className="animate-pulse">Saving...</span>{" "}
+                <Loader className="size-4 animate-spin sm:size-5" />
+              </span>
+            ) : (
+              <span>Save changes</span>
+            )}
+          </Button>
+        </div>
+      </div>
+      <Form {...new_product_form}>
+        <form
+          onSubmit={new_product_form.handleSubmit(onSubmit)}
+          className="flex h-full w-full flex-col gap-y-2"
+        >
+          <div className="flex h-full w-full flex-col gap-y-2 px-2 min-[500px]:px-6">
+            {" "}
+            <FormField
+              control={new_product_form.control}
+              name="product_name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium text-neutral-dark-2">
+                    Title<span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      id="product_name"
+                      disabled={isLoading}
+                      placeholder="Product name"
+                      className="bg-transparent placeholder:text-slate-400"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={new_product_form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium text-neutral-dark-2">
+                    Description
+                  </FormLabel>
+                  <FormControl>
+                    <div className="relative flex w-full flex-col gap-y-2">
+                      <Textarea
+                        disabled={isLoading}
+                        placeholder="Enter product description"
+                        className={cn(
+                          "h-20 resize-none bg-transparent placeholder:text-slate-400",
+                          field.value.length > MAX_CHAR
+                            ? "focus-visible:outline-red-500 focus-visible:ring-red-500"
+                            : "",
+                        )}
+                        {...field}
+                      />
+                      <div className="flex w-full items-center justify-between">
+                        <span className="whitespace-nowrap text-sm text-slate-500">
+                          Maximum of {MAX_CHAR} characters
+                        </span>
+                        <WordCounter length={MAX_CHAR} word={field.value} />
+                      </div>
+                    </div>
+                  </FormControl>
+                  <FormMessage data-testid="password-error" />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={new_product_form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium text-neutral-dark-2">
+                    Category
+                  </FormLabel>
+                  <FormControl>
+                    <Select {...field} onValueChange={field.onChange}>
+                      <SelectTrigger className="bg-transparent">
+                        <SelectValue placeholder="Select a category" />
+                      </SelectTrigger>
+                      <SelectContent className="z-[99999]">
+                        <SelectGroup>
+                          <SelectLabel>Fruits</SelectLabel>
+                          {CATEGORIES.map((category) => (
+                            <SelectItem
+                              key={category.value}
+                              value={category.value}
+                            >
+                              {category.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex w-full items-center gap-x-4 gap-y-4 xl:flex-col">
+              {" "}
+              <FormField
+                control={new_product_form.control}
+                name="price"
+                render={({ field }) => (
+                  <FormItem className="relative w-full">
+                    <FormLabel className="font-medium text-neutral-dark-2">
+                      Standard Price
+                      <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative flex w-full items-center gap-x-2">
+                        <span className="absolute left-2 font-medium text-black">
+                          $
+                        </span>
+                        <Input
+                          disabled={isLoading}
+                          placeholder="0.00"
+                          className="bg-transparent pl-8 placeholder:text-slate-400"
+                          {...field}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage className="absolute -bottom-5" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={new_product_form.control}
+                name="quantity"
+                render={({ field }) => (
+                  <FormItem className="relative w-full">
+                    <FormLabel className="font-medium text-neutral-dark-2">
+                      Quantity<span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        disabled={isLoading}
+                        placeholder="0.00"
+                        className="bg-transparent placeholder:text-slate-400"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className="absolute -bottom-5" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:rounded-2xl">
+              <p className="font-medium text-neutral-dark-2">Media</p>
+              <ProjectLogo form={new_product_form} name="media" />
+              {hasProjectLogo.length === 0 &&
+                new_product_form.formState.errors.media && (
+                  <p className="mt-0.5 w-full justify-self-start border-l-4 border-red-500 bg-red-500/10 px-2 text-sm font-bold text-red-500">
+                    {new_product_form.formState.errors.media.message}
+                  </p>
+                )}
+            </div>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default ProductDetailsComponent;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
new file mode 100644
index 000000000..50fa7ec42
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { ChevronRight, Loader } from "lucide-react";
+
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import ProductDetailsComponent from "./product-details-component";
+
+const ProductDetailsContent = ({ productId }: { productId: string }) => {
+  const { products } = useProducts();
+  const product = products?.find((p) => p.product_id === productId);
+
+  if (!product)
+    return (
+      <div>
+        <p className="flex items-center gap-x-2 text-neutral-dark-2">
+          <span className="animate-pulse">Loading...</span>{" "}
+          <Loader className="size-4 animate-spin sm:size-5" />.
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="flex w-full flex-col gap-y-8 px-2 py-4 sm:px-4 sm:py-8 md:gap-y-16">
+      <div className="flex w-fit items-center gap-x-2 rounded-md border bg-[#fafafa] px-2 py-2 text-sm sm:px-4">
+        <span className="font-medium text-neutral-dark-2 md:font-semibold">
+          Products
+        </span>
+        <ChevronRight className="size-3 text-neutral-dark-1 sm:size-4" />
+        <span className="text-neutral-dark-1">Product Details</span>
+      </div>
+      <ProductDetailsComponent product={product} />
+    </div>
+  );
+};
+
+export default ProductDetailsContent;
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
index 3bd423007..722c930bd 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { AnimatePresence, motion } from "framer-motion";
 import { Edit2, MoreVertical, Trash } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useRef } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -33,6 +34,7 @@ const ProductBodyShadcn = ({
     setIsDelete,
   } = useProductModal();
   const modalReference = useRef<HTMLDivElement>(null);
+  const router = useRouter();
 
   useEffect(() => {
     if (!isActionModal || !modalReference.current) return;
@@ -62,6 +64,10 @@ const ProductBodyShadcn = ({
     updateProductId(id);
     setIsDelete(true);
   };
+  const handleEditAction = (id: string) => {
+    setIsActionModal(false);
+    router.push(`/dashboard/products/${id}`);
+  };
 
   return (
     filteredProducts.length > 0 &&
@@ -184,6 +190,7 @@ const ProductBodyShadcn = ({
                 <div className="flex flex-col">
                   <Button
                     variant="ghost"
+                    onClick={() => handleEditAction(product.product_id)}
                     size={"sm"}
                     className={cn(
                       "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs min-[500px]:text-sm",
diff --git a/src/app/dashboard/(user-dashboard)/products/layout.tsx b/src/app/dashboard/(user-dashboard)/products/layout.tsx
new file mode 100644
index 000000000..74f45465f
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/layout.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import { useEffect } from "react";
+
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import { PRODUCT_TABLE } from "./data/product.mock";
+
+export default function UserProductLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { addProducts } = useProducts();
+  useEffect(() => {
+    const is_saved = localStorage.getItem("admin_products");
+    if (is_saved) {
+      const parse_data = JSON.parse(is_saved);
+      if (parse_data.state.products) return;
+      setTimeout(() => {
+        addProducts(PRODUCT_TABLE);
+      }, 5000);
+    }
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/page.tsx b/src/app/dashboard/(user-dashboard)/products/page.tsx
index acbff045c..1bb5df0fc 100644
--- a/src/app/dashboard/(user-dashboard)/products/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/page.tsx
@@ -6,13 +6,11 @@ import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import NewProductModal from "./_components/new-product-modal";
 import ProductDeleteModal from "./_components/product-delete-modal";
 import ProductDetailModal from "./_components/product-detail-modal";
 import ProductDetailView from "./_components/product-detail-view";
 import ProductHeader from "./_components/product-header";
-import { PRODUCT_TABLE } from "./data/product.mock";
 
 const ProductContent = dynamic(() => import("./_components/product-content"), {
   ssr: false,
@@ -24,7 +22,7 @@ const ProductFilter = dynamic(() => import("./_components/product-filter"), {
 const ProductPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [view, setView] = useState<"list" | "grid">("list");
-  const { addProducts } = useProducts();
+
   const {
     isOpen,
     updateProductId,
@@ -38,16 +36,6 @@ const ProductPage = () => {
     setIsDelete,
   } = useProductModal();
 
-  useEffect(() => {
-    const is_saved = localStorage.getItem("admin_products");
-    if (is_saved) {
-      const parse_data = JSON.parse(is_saved);
-      if (parse_data.state.products) return;
-      setTimeout(() => {
-        addProducts(PRODUCT_TABLE);
-      }, 5000);
-    }
-  }, []);
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") {

From a5d54b564df9db63cd80d097ec3434740c77823c Mon Sep 17 00:00:00 2001
From: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:24:29 +0100
Subject: [PATCH 2/5] changed kimiko-cs to kimiko-csharp

Signed-off-by: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
---
 .github/workflows/team-deployment.yml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/team-deployment.yml b/.github/workflows/team-deployment.yml
index e85a8c44c..0227383d5 100644
--- a/.github/workflows/team-deployment.yml
+++ b/.github/workflows/team-deployment.yml
@@ -25,16 +25,17 @@ jobs:
           script: |
             cd hng_boilerplate_nextjs
             ./scripts/team_deploy.sh kimiko-golang ${{ vars.PORT }}
-  kimiko-cs:
+            
+  kimiko-csharp:
     if: github.event.repository.fork == false
     runs-on: ubuntu-latest
 
     environment:
-      name: "kimiko-cs"
+      name: "kimiko-csharp"
       url: ${{ vars.URL }}
 
     steps:
-      - name: Deploy to kimiko-cs environment
+      - name: Deploy to kimiko-csharp environment
         uses: appleboy/ssh-action@v1.0.3
         with:
           host: ${{ secrets.HOST }}
@@ -42,7 +43,7 @@ jobs:
           password: ${{ secrets.PASSWORD }}
           script: |
             cd hng_boilerplate_nextjs
-            ./scripts/team_deploy.sh kimiko-cs ${{ vars.PORT }}
+            ./scripts/team_deploy.sh kimiko-csharp ${{ vars.PORT }}
 
   cyborgs-java:
     if: github.event.repository.fork == false

From 7d11d29a2607e27bb80b69cc3495b2d4cecb4c1f Mon Sep 17 00:00:00 2001
From: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:26:37 +0100
Subject: [PATCH 3/5] Update Dockerfile

Signed-off-by: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
---
 docker/staging/Dockerfile | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docker/staging/Dockerfile b/docker/staging/Dockerfile
index 1804005e9..74067e5bb 100644
--- a/docker/staging/Dockerfile
+++ b/docker/staging/Dockerfile
@@ -1,4 +1,4 @@
-Use the official Node.js image based on Alpine Linux for a smaller image size
+# Use the official Node.js image based on Alpine Linux for a smaller image size
 FROM node:20-alpine AS base
 
 FROM base AS deps
@@ -24,6 +24,7 @@ COPY . .
 # Build the application
 RUN corepack enable pnpm && pnpm run build
 
+
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
@@ -52,4 +53,4 @@ ENV PORT 3000
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
-CMD HOSTNAME="0.0.0.0" node server.js
\ No newline at end of file
+CMD HOSTNAME="0.0.0.0" node server.js

From 07f6e957d434c4b058c83126c851cc1a2f62b645 Mon Sep 17 00:00:00 2001
From: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:27:19 +0100
Subject: [PATCH 4/5] Update Dockerfile

Signed-off-by: Ravencodess <115118888+Ravencodess@users.noreply.github.com>
---
 docker/prod/Dockerfile | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docker/prod/Dockerfile b/docker/prod/Dockerfile
index 1804005e9..74067e5bb 100644
--- a/docker/prod/Dockerfile
+++ b/docker/prod/Dockerfile
@@ -1,4 +1,4 @@
-Use the official Node.js image based on Alpine Linux for a smaller image size
+# Use the official Node.js image based on Alpine Linux for a smaller image size
 FROM node:20-alpine AS base
 
 FROM base AS deps
@@ -24,6 +24,7 @@ COPY . .
 # Build the application
 RUN corepack enable pnpm && pnpm run build
 
+
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
@@ -52,4 +53,4 @@ ENV PORT 3000
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
-CMD HOSTNAME="0.0.0.0" node server.js
\ No newline at end of file
+CMD HOSTNAME="0.0.0.0" node server.js

From 975d4d43e566bcaaa65f95e95a03f3a48a9147b2 Mon Sep 17 00:00:00 2001
From: Destiny Saturday <destiny@destinedcodes.com>
Date: Mon, 29 Jul 2024 14:32:36 +0100
Subject: [PATCH 5/5] Revert "Vxrcel clean"

---
 .../_components/layout/navbar/index.tsx       |   2 +-
 .../[productId]/form-images/project-logo.tsx  | 125 --------
 .../products/[productId]/page.tsx             |  16 -
 .../[productId]/product-details-component.tsx | 302 ------------------
 .../[productId]/product-details-content.tsx   |  36 ---
 .../_components/product-body-shadcn.tsx       |   7 -
 .../(user-dashboard)/products/layout.tsx      |  27 --
 .../(user-dashboard)/products/page.tsx        |  14 +-
 8 files changed, 14 insertions(+), 515 deletions(-)
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/layout.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 0c74fc194..935806e9c 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -47,7 +47,7 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="overflow-hidden border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
deleted file mode 100644
index aa5009f02..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { X } from "lucide-react";
-import React, { useState } from "react";
-import { UseFormReturn } from "react-hook-form";
-
-import BlurImage from "~/components/miscellaneous/blur-image";
-import { Button } from "~/components/ui/button";
-import { cn } from "~/lib/utils";
-import { NewProduct } from "../schema/schema";
-
-type Properties = {
-  form: UseFormReturn<NewProduct>;
-  name: string;
-};
-const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  event.preventDefault();
-};
-const ProjectLogo = ({ form, name }: Properties) => {
-  const [isDragging, setIsDragging] = useState(false);
-
-  const projectLogo = form.getValues("media");
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const target = event.dataTransfer.files[0] as File;
-
-    if (target.type === "image/gif") {
-      return name;
-    }
-    const event_data = {
-      target: {
-        files: event.dataTransfer.files,
-      },
-    };
-    handleImageChange(
-      event_data as unknown as React.ChangeEvent<HTMLInputElement>,
-    );
-    setIsDragging(false);
-  };
-
-  return (
-    <div className="relative grid h-full w-[inherit] place-items-center rounded-xl border border-dashed border-[#CBD5E1] bg-[#FAFAFA]">
-      <div
-        data-upload
-        className="flexx absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/30 text-black"
-      >
-        <div className="grid h-full w-full place-items-center rounded-xl bg-white/80 uppercase backdrop-blur-xl">
-          <p className="items-center md:flex md:flex-col">
-            <span className="animate-pulse md:text-xs">Uploading...</span>{" "}
-            <b>10%</b>
-          </p>
-        </div>
-      </div>
-
-      {isDragging && (
-        <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
-          <p className="text-xl text-white">Drop to upload</p>
-        </div>
-      )}
-
-      {projectLogo.url && typeof projectLogo.url === "string" ? (
-        <div className="absolute inset-0 h-full w-full rounded-xl">
-          <div className="h-full w-full overflow-hidden rounded-xl">
-            <BlurImage
-              src={projectLogo.url}
-              width={500}
-              height={500}
-              alt="nft"
-              className={cn(
-                "size-full object-cover transition-all duration-300",
-              )}
-            />
-          </div>
-          <button
-            disabled={false}
-            className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-black/40 md:-right-1 md:-top-1 md:bg-white/20 md:disabled:bg-white/20"
-          >
-            <X className="size-8 min-[500px]:size-10" />
-          </button>
-        </div>
-      ) : (
-        <div
-          onDrop={handleDrop}
-          onDragOver={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setIsDragging(true);
-          }}
-          onDragLeave={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setIsDragging(false);
-          }}
-          className="grid h-full w-full place-items-center"
-        >
-          <label
-            className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-y-2 text-neutral-dark-1 hover:text-black"
-            htmlFor={`media`}
-          >
-            <Button
-              type="button"
-              variant={"secondary"}
-              size={"sm"}
-              className="pointer-events-none flex !h-[32px] items-center bg-white text-sm text-[#0F172A] shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)]"
-            >
-              Upload New
-            </Button>
-            <p className="text-xs md:text-sm">Add Image or drag it here</p>
-          </label>
-          <input
-            type="file"
-            hidden
-            accept=" image/*"
-            name={`media`}
-            id={`media`}
-            onChange={handleImageChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectLogo;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
deleted file mode 100644
index 3d166772b..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { notFound } from "next/navigation";
-
-import ProductDetailsContent from "./product-details-content";
-
-const ProductDetailsPage = async ({
-  params,
-}: {
-  params: { productId: string };
-}) => {
-  const id = params.productId;
-  if (!id) return notFound();
-
-  return <ProductDetailsContent productId={id} />;
-};
-
-export default ProductDetailsPage;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
deleted file mode 100644
index 9cd245e4e..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowLeft, Loader } from "lucide-react";
-import Link from "next/link";
-import { useTransition } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import WordCounter from "~/components/miscellaneous/WordCounter";
-import { Button } from "~/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Textarea } from "~/components/ui/textarea";
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
-import { ProductTableProperties } from "~/types/admin-product.types";
-import { NewProductSchema } from "../_components/schema/schema";
-import { CATEGORIES } from "../data/categories.moct";
-import ProjectLogo from "./form-images/project-logo";
-
-const MAX_CHAR = 160;
-
-const ProductDetailsComponent = ({
-  product,
-}: {
-  product: ProductTableProperties;
-}) => {
-  const { addProduct } = useProducts();
-  const [isLoading, startTransition] = useTransition();
-
-  const new_product_form = useForm<z.infer<typeof NewProductSchema>>({
-    defaultValues: {
-      product_name: "",
-      description: "",
-      price: "",
-      category: "",
-      quantity: "",
-      media: {
-        url: "",
-        id: "",
-      },
-    },
-    resolver: zodResolver(NewProductSchema),
-  });
-
-  const hasProjectLogo = new_product_form.getValues("media.url");
-
-  const onSubmit = async (values: z.infer<typeof NewProductSchema>) => {
-    startTransition(async () => {
-      const date_data = getCurrentDateTime();
-      await simulateDelay(3);
-      addProduct({
-        product_id: `P${generateId(6)}`,
-        category: values.category,
-        description: values.description,
-        name: values.product_name,
-        price: Number(values.price),
-        stock: Number(values.quantity),
-        image: "/product/product-image.webp",
-        status: "in_stock",
-        date_added: date_data.date_added,
-        time: date_data.time,
-      });
-      new_product_form.reset();
-    });
-  };
-
-  return (
-    <div className="flex w-full flex-col gap-y-8 md:gap-y-16">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-x-2 md:gap-x-4">
-          <Link
-            href={"/dashboard/products"}
-            className="rounded-sm border p-0.5 hover:bg-gray-200"
-          >
-            <ArrowLeft />
-          </Link>
-          <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
-            {product.name}
-          </span>
-          <span
-            className={cn(
-              "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
-            )}
-          >
-            <span
-              className={cn("size-3 rounded-full", {
-                "bg-[#6DC347]": product.status === "in_stock",
-                "bg-[#DC2626]": product.status === "low_on_stock",
-                "bg-[#EAB308]": product.status === "out_of_stock",
-              })}
-            />
-            {product.status === "in_stock" && "In Stock"}
-            {product.status === "low_on_stock" && "Low on Stock"}
-            {product.status === "out_of_stock" && "Out of Stock"}
-          </span>
-        </div>
-        <div className="flex items-center justify-end gap-x-4">
-          <Button
-            disabled={isLoading}
-            type="button"
-            variant="outline"
-            size="default"
-            className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
-          >
-            Discard
-          </Button>
-          <Button
-            disabled={isLoading}
-            type="submit"
-            variant="default"
-            size="default"
-            className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
-          >
-            {isLoading ? (
-              <span className="flex items-center gap-x-2">
-                <span className="animate-pulse">Saving...</span>{" "}
-                <Loader className="size-4 animate-spin sm:size-5" />
-              </span>
-            ) : (
-              <span>Save changes</span>
-            )}
-          </Button>
-        </div>
-      </div>
-      <Form {...new_product_form}>
-        <form
-          onSubmit={new_product_form.handleSubmit(onSubmit)}
-          className="flex h-full w-full flex-col gap-y-2"
-        >
-          <div className="flex h-full w-full flex-col gap-y-2 px-2 min-[500px]:px-6">
-            {" "}
-            <FormField
-              control={new_product_form.control}
-              name="product_name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Title<span className="text-red-500">*</span>
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      id="product_name"
-                      disabled={isLoading}
-                      placeholder="Product name"
-                      className="bg-transparent placeholder:text-slate-400"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={new_product_form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Description
-                  </FormLabel>
-                  <FormControl>
-                    <div className="relative flex w-full flex-col gap-y-2">
-                      <Textarea
-                        disabled={isLoading}
-                        placeholder="Enter product description"
-                        className={cn(
-                          "h-20 resize-none bg-transparent placeholder:text-slate-400",
-                          field.value.length > MAX_CHAR
-                            ? "focus-visible:outline-red-500 focus-visible:ring-red-500"
-                            : "",
-                        )}
-                        {...field}
-                      />
-                      <div className="flex w-full items-center justify-between">
-                        <span className="whitespace-nowrap text-sm text-slate-500">
-                          Maximum of {MAX_CHAR} characters
-                        </span>
-                        <WordCounter length={MAX_CHAR} word={field.value} />
-                      </div>
-                    </div>
-                  </FormControl>
-                  <FormMessage data-testid="password-error" />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={new_product_form.control}
-              name="category"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Category
-                  </FormLabel>
-                  <FormControl>
-                    <Select {...field} onValueChange={field.onChange}>
-                      <SelectTrigger className="bg-transparent">
-                        <SelectValue placeholder="Select a category" />
-                      </SelectTrigger>
-                      <SelectContent className="z-[99999]">
-                        <SelectGroup>
-                          <SelectLabel>Fruits</SelectLabel>
-                          {CATEGORIES.map((category) => (
-                            <SelectItem
-                              key={category.value}
-                              value={category.value}
-                            >
-                              {category.label}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex w-full items-center gap-x-4 gap-y-4 xl:flex-col">
-              {" "}
-              <FormField
-                control={new_product_form.control}
-                name="price"
-                render={({ field }) => (
-                  <FormItem className="relative w-full">
-                    <FormLabel className="font-medium text-neutral-dark-2">
-                      Standard Price
-                      <span className="text-red-500">*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <div className="relative flex w-full items-center gap-x-2">
-                        <span className="absolute left-2 font-medium text-black">
-                          $
-                        </span>
-                        <Input
-                          disabled={isLoading}
-                          placeholder="0.00"
-                          className="bg-transparent pl-8 placeholder:text-slate-400"
-                          {...field}
-                        />
-                      </div>
-                    </FormControl>
-                    <FormMessage className="absolute -bottom-5" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={new_product_form.control}
-                name="quantity"
-                render={({ field }) => (
-                  <FormItem className="relative w-full">
-                    <FormLabel className="font-medium text-neutral-dark-2">
-                      Quantity<span className="text-red-500">*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        disabled={isLoading}
-                        placeholder="0.00"
-                        className="bg-transparent placeholder:text-slate-400"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className="absolute -bottom-5" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:rounded-2xl">
-              <p className="font-medium text-neutral-dark-2">Media</p>
-              <ProjectLogo form={new_product_form} name="media" />
-              {hasProjectLogo.length === 0 &&
-                new_product_form.formState.errors.media && (
-                  <p className="mt-0.5 w-full justify-self-start border-l-4 border-red-500 bg-red-500/10 px-2 text-sm font-bold text-red-500">
-                    {new_product_form.formState.errors.media.message}
-                  </p>
-                )}
-            </div>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-};
-
-export default ProductDetailsComponent;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
deleted file mode 100644
index 50fa7ec42..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { ChevronRight, Loader } from "lucide-react";
-
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import ProductDetailsComponent from "./product-details-component";
-
-const ProductDetailsContent = ({ productId }: { productId: string }) => {
-  const { products } = useProducts();
-  const product = products?.find((p) => p.product_id === productId);
-
-  if (!product)
-    return (
-      <div>
-        <p className="flex items-center gap-x-2 text-neutral-dark-2">
-          <span className="animate-pulse">Loading...</span>{" "}
-          <Loader className="size-4 animate-spin sm:size-5" />.
-        </p>
-      </div>
-    );
-
-  return (
-    <div className="flex w-full flex-col gap-y-8 px-2 py-4 sm:px-4 sm:py-8 md:gap-y-16">
-      <div className="flex w-fit items-center gap-x-2 rounded-md border bg-[#fafafa] px-2 py-2 text-sm sm:px-4">
-        <span className="font-medium text-neutral-dark-2 md:font-semibold">
-          Products
-        </span>
-        <ChevronRight className="size-3 text-neutral-dark-1 sm:size-4" />
-        <span className="text-neutral-dark-1">Product Details</span>
-      </div>
-      <ProductDetailsComponent product={product} />
-    </div>
-  );
-};
-
-export default ProductDetailsContent;
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
index 722c930bd..3bd423007 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { AnimatePresence, motion } from "framer-motion";
 import { Edit2, MoreVertical, Trash } from "lucide-react";
-import { useRouter } from "next-nprogress-bar";
 import { useEffect, useRef } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -34,7 +33,6 @@ const ProductBodyShadcn = ({
     setIsDelete,
   } = useProductModal();
   const modalReference = useRef<HTMLDivElement>(null);
-  const router = useRouter();
 
   useEffect(() => {
     if (!isActionModal || !modalReference.current) return;
@@ -64,10 +62,6 @@ const ProductBodyShadcn = ({
     updateProductId(id);
     setIsDelete(true);
   };
-  const handleEditAction = (id: string) => {
-    setIsActionModal(false);
-    router.push(`/dashboard/products/${id}`);
-  };
 
   return (
     filteredProducts.length > 0 &&
@@ -190,7 +184,6 @@ const ProductBodyShadcn = ({
                 <div className="flex flex-col">
                   <Button
                     variant="ghost"
-                    onClick={() => handleEditAction(product.product_id)}
                     size={"sm"}
                     className={cn(
                       "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs min-[500px]:text-sm",
diff --git a/src/app/dashboard/(user-dashboard)/products/layout.tsx b/src/app/dashboard/(user-dashboard)/products/layout.tsx
deleted file mode 100644
index 74f45465f..000000000
--- a/src/app/dashboard/(user-dashboard)/products/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-"use client";
-
-import { useEffect } from "react";
-
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import { PRODUCT_TABLE } from "./data/product.mock";
-
-export default function UserProductLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { addProducts } = useProducts();
-  useEffect(() => {
-    const is_saved = localStorage.getItem("admin_products");
-    if (is_saved) {
-      const parse_data = JSON.parse(is_saved);
-      if (parse_data.state.products) return;
-      setTimeout(() => {
-        addProducts(PRODUCT_TABLE);
-      }, 5000);
-    }
-  }, []);
-
-  return <>{children}</>;
-}
diff --git a/src/app/dashboard/(user-dashboard)/products/page.tsx b/src/app/dashboard/(user-dashboard)/products/page.tsx
index 1bb5df0fc..acbff045c 100644
--- a/src/app/dashboard/(user-dashboard)/products/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/page.tsx
@@ -6,11 +6,13 @@ import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import NewProductModal from "./_components/new-product-modal";
 import ProductDeleteModal from "./_components/product-delete-modal";
 import ProductDetailModal from "./_components/product-detail-modal";
 import ProductDetailView from "./_components/product-detail-view";
 import ProductHeader from "./_components/product-header";
+import { PRODUCT_TABLE } from "./data/product.mock";
 
 const ProductContent = dynamic(() => import("./_components/product-content"), {
   ssr: false,
@@ -22,7 +24,7 @@ const ProductFilter = dynamic(() => import("./_components/product-filter"), {
 const ProductPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [view, setView] = useState<"list" | "grid">("list");
-
+  const { addProducts } = useProducts();
   const {
     isOpen,
     updateProductId,
@@ -36,6 +38,16 @@ const ProductPage = () => {
     setIsDelete,
   } = useProductModal();
 
+  useEffect(() => {
+    const is_saved = localStorage.getItem("admin_products");
+    if (is_saved) {
+      const parse_data = JSON.parse(is_saved);
+      if (parse_data.state.products) return;
+      setTimeout(() => {
+        addProducts(PRODUCT_TABLE);
+      }, 5000);
+    }
+  }, []);
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") {