From 0f29dafa7a5c0a1e7c7b6f7fa8cb3011535a9156 Mon Sep 17 00:00:00 2001
From: Vxrcel <skyeparagon@gmail.com>
Date: Mon, 29 Jul 2024 14:41:41 +0100
Subject: [PATCH 1/4] redeploy

---
 .../products/[productId]/form-images/project-logo.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index aa5009f02..0acddc8c4 100644
--- 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
@@ -5,7 +5,7 @@ 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";
+import { NewProduct } from "../../_components/schema/schema";
 
 type Properties = {
   form: UseFormReturn<NewProduct>;

From bb9ced1e860ff4ade14724690d724b1ebdbaa027 Mon Sep 17 00:00:00 2001
From: Vxrcel <skyeparagon@gmail.com>
Date: Mon, 29 Jul 2024 21:09:35 +0100
Subject: [PATCH 2/4] Products details page

---
 .../[productId]/form-images/project-logo.tsx  |  13 +-
 .../[productId]/product-details-component.tsx | 554 ++++++++++++------
 .../[productId]/product-details-content.tsx   |   2 +-
 .../_components/new-product-modal.tsx         |   2 +-
 .../_components/product-body-shadcn.tsx       |   6 +-
 .../products/_components/schema/schema.ts     |  75 ++-
 ...{categories.moct.ts => categories.mock.ts} |   5 +
 .../products/data/stocks.mock.ts              |  39 ++
 src/app/globals.css                           |   4 +
 9 files changed, 495 insertions(+), 205 deletions(-)
 rename src/app/dashboard/(user-dashboard)/products/data/{categories.moct.ts => categories.mock.ts} (62%)
 create mode 100644 src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts

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
index 0acddc8c4..6490e506e 100644
--- 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
@@ -5,10 +5,10 @@ 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 "../../_components/schema/schema";
+import { EditProduct } from "../../_components/schema/schema";
 
 type Properties = {
-  form: UseFormReturn<NewProduct>;
+  form: UseFormReturn<EditProduct>;
   name: string;
 };
 const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -72,12 +72,15 @@ const ProjectLogo = ({ form, name }: Properties) => {
               )}
             />
           </div>
-          <button
+          <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"
+            variant={"ghost"}
+            size={"icon"}
+            type="button"
+            className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 hover:text-white 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>
+          </Button>
         </div>
       ) : (
         <div
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
index 9cd245e4e..07d3bd696 100644
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowLeft, Loader } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, Loader, Plus } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import Link from "next/link";
 import { useTransition } from "react";
 import { useForm } from "react-hook-form";
@@ -23,7 +25,6 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
@@ -31,12 +32,11 @@ 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 { EditProductSchema, MAX_CHAR } from "../_components/schema/schema";
+import { STOCKS_SELECT } from "../data/categories.mock";
+import { shouldDisableAddStocksButton } from "../data/stocks.mock";
 import ProjectLogo from "./form-images/project-logo";
 
-const MAX_CHAR = 160;
-
 const ProductDetailsComponent = ({
   product,
 }: {
@@ -44,25 +44,63 @@ const ProductDetailsComponent = ({
 }) => {
   const { addProduct } = useProducts();
   const [isLoading, startTransition] = useTransition();
+  const router = useRouter();
 
-  const new_product_form = useForm<z.infer<typeof NewProductSchema>>({
+  const new_product_form = useForm<z.infer<typeof EditProductSchema>>({
     defaultValues: {
-      product_name: "",
-      description: "",
+      product_name: product.name || "",
+      description: product.description || "",
       price: "",
       category: "",
       quantity: "",
       media: {
-        url: "",
+        url: product.image || "",
         id: "",
       },
+      stocks: [
+        {
+          id: "P0001",
+          size: "Small",
+          stock: "0",
+          price: "",
+        },
+        {
+          id: "P0002",
+          size: "Standard",
+          stock: String(product.stock) || "0",
+          price: String(product.price) || "",
+        },
+        {
+          id: "P0003",
+          size: "Large",
+          stock: "0",
+          price: "",
+        },
+      ],
     },
-    resolver: zodResolver(NewProductSchema),
+    resolver: zodResolver(EditProductSchema),
   });
+  const FORM_STOCKS = new_product_form.getValues("stocks");
+  const handleAddNewStock = () => {
+    const previousStocks = FORM_STOCKS;
+    new_product_form.setValue("stocks", [
+      ...previousStocks,
+      {
+        id: `S${generateId(5)}`,
+        size: "",
+        stock: "",
+        price: "",
+      },
+    ]);
+  };
 
   const hasProjectLogo = new_product_form.getValues("media.url");
-
-  const onSubmit = async (values: z.infer<typeof NewProductSchema>) => {
+  new_product_form.watch("stocks");
+  // DISABLE
+  const disableAddStockButton = shouldDisableAddStocksButton({
+    stocks: FORM_STOCKS,
+  });
+  const onSubmit = async (values: z.infer<typeof EditProductSchema>) => {
     startTransition(async () => {
       const date_data = getCurrentDateTime();
       await simulateDelay(3);
@@ -83,219 +121,347 @@ const ProductDetailsComponent = ({
   };
 
   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",
-            )}
-          >
+    <Form {...new_product_form}>
+      <form
+        onSubmit={new_product_form.handleSubmit(onSubmit)}
+        className="relative flex w-full flex-col gap-y-8 md:gap-y-10"
+      >
+        <div className="sticky top-0 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("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>
+              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",
               )}
-            />
-            <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
+            >
+              <span
+                className={cn("size-3 rounded-full", {
+                  "bg-[#6DC347]": product.status === "in_stock",
+                  "bg-[#DC2626]": product.status === "out_of_stock",
+                  "bg-[#EAB308]": product.status === "low_on_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}
+              onClick={() => router.push("/dashboard/products")}
+              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>
+        <div className="flex w-full flex-col gap-y-8 md:grid md:grid-cols-2 md:gap-6">
+          {" "}
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Product Details
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Make quick changes to your product.
+                </p>
+              </div>
+              <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="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"
-                            : "",
-                        )}
+                        placeholder="Product name"
+                        className="bg-transparent placeholder:text-slate-400"
                         {...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">
-              {" "}
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={new_product_form.control}
-                name="price"
+                name="description"
                 render={({ field }) => (
-                  <FormItem className="relative w-full">
+                  <FormItem>
                     <FormLabel className="font-medium text-neutral-dark-2">
-                      Standard Price
-                      <span className="text-red-500">*</span>
+                      Description
                     </FormLabel>
                     <FormControl>
-                      <div className="relative flex w-full items-center gap-x-2">
-                        <span className="absolute left-2 font-medium text-black">
-                          $
-                        </span>
-                        <Input
+                      <div className="relative flex w-full flex-col gap-y-2">
+                        <Textarea
                           disabled={isLoading}
-                          placeholder="0.00"
-                          className="bg-transparent pl-8 placeholder:text-slate-400"
+                          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 className="absolute -bottom-5" />
+                    <FormMessage data-testid="password-error" />
                   </FormItem>
                 )}
               />
+            </div>
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Stock
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Add and remove products
+                </p>
+              </div>
+              <div className="flex flex-col divide-y divide-gray-200 rounded-[6px] border">
+                <div className="grid w-full grid-cols-3 gap-2 bg-[#F1F5F9] p-4 text-sm font-medium text-neutral-dark-2">
+                  <span>Size</span>
+                  <span>Stock</span>
+                  <span>Price</span>
+                </div>
+
+                <AnimatePresence>
+                  {FORM_STOCKS.map((stock, index) => (
+                    <motion.div
+                      initial={{ y: 10, opacity: 0 }}
+                      animate={{ y: 0, opacity: 1 }}
+                      transition={{ duration: 0.3, delay: 0.1 * index }}
+                      layout
+                      layoutId={stock.id}
+                      key={stock.id}
+                      className="relative grid w-full grid-cols-3 items-center gap-2 p-4"
+                    >
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.size`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  disabled={isLoading}
+                                  name={`stocks.${index}.size`}
+                                  id={`stocks.${index}.size`}
+                                  type="text"
+                                  className="placeholder:text-400/50 h-10 w-full rounded-lg border-none bg-transparent px-4 text-sm text-neutral-dark-2 outline-none"
+                                  placeholder="size"
+                                />
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.stock`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  disabled={isLoading}
+                                  name={`stocks.${index}.stock`}
+                                  id={`stocks.${index}.stock`}
+                                  type="text"
+                                  className="placeholder:text-400/50 h-10 w-full rounded-lg border bg-transparent px-4 text-sm text-neutral-dark-2 outline-none"
+                                  placeholder="0"
+                                />
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.price`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <div className="relative flex w-full items-center">
+                                  <span className="absolute left-2 font-medium text-black">
+                                    $
+                                  </span>
+
+                                  <Input
+                                    disabled={isLoading}
+                                    placeholder="0.00"
+                                    {...field}
+                                    name={`stocks.${index}.price`}
+                                    id={`stocks.${index}.price`}
+                                    type="text"
+                                    className="placeholder:text-400/50 h-10 w-full rounded-lg border bg-transparent pl-6 pr-4 text-sm text-neutral-dark-2 outline-none"
+                                  />
+                                </div>
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* {STOCKS.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveStock(stock.id)}
+                          className="hidden place-items-center rounded-lg bg-[#585858] px-4 py-2 text-xl font-medium text-white transition-all duration-200 active:scale-90 sm:text-3xl md:grid"
+                        >
+                          <Minus className="size-10" />
+                        </button>
+                      )} */}
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+              </div>
+              <Button
+                type="button"
+                disabled={isLoading || disableAddStockButton}
+                onClick={handleAddNewStock}
+                className="w-fit bg-transparent"
+                variant="outline"
+              >
+                Add a variant
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Media
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Upload media for your product
+                </p>
+              </div>
+              <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
+                <div className="flex size-full items-center justify-center gap-x-1">
+                  {" "}
+                  <ProjectLogo form={new_product_form} name="media" />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={isLoading}
+                    className="bg-transparent py-10 sm:py-20"
+                  >
+                    <Plus />
+                  </Button>
+                </div>
+                {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>
+
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Stock
+                </h2>
+              </div>
               <FormField
                 control={new_product_form.control}
-                name="quantity"
+                name="category"
                 render={({ field }) => (
-                  <FormItem className="relative w-full">
+                  <FormItem>
                     <FormLabel className="font-medium text-neutral-dark-2">
-                      Quantity<span className="text-red-500">*</span>
+                      Availability
                     </FormLabel>
                     <FormControl>
-                      <Input
-                        disabled={isLoading}
-                        placeholder="0.00"
-                        className="bg-transparent placeholder:text-slate-400"
-                        {...field}
-                      />
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="bg-transparent">
+                          <SelectValue placeholder="Select Availability" />
+                        </SelectTrigger>
+                        <SelectContent className="z-[99999]">
+                          <SelectGroup>
+                            {STOCKS_SELECT.map((stock) => (
+                              <SelectItem key={stock.value} value={stock.value}>
+                                {stock.label}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
                     </FormControl>
-                    <FormMessage className="absolute -bottom-5" />
+                    <FormMessage />
                   </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 className="flex flex-1 flex-col gap-y-2 rounded-[6px] p-4 py-10 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Archive
+                </h2>
+                <p className="text-xs text-neutral-dark-2">Archive a product</p>
+              </div>
+              <Button
+                type="button"
+                disabled={isLoading}
+                onClick={handleAddNewStock}
+                className="w-fit bg-transparent"
+                variant="outline"
+              >
+                Archive {product?.name}
+              </Button>
             </div>
           </div>
-        </form>
-      </Form>
-    </div>
+        </div>
+      </form>
+    </Form>
   );
 };
 
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
index 50fa7ec42..2c6556361 100644
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
@@ -20,7 +20,7 @@ const ProductDetailsContent = ({ productId }: { productId: string }) => {
     );
 
   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="relative flex w-full flex-col gap-y-8 px-2 py-4 sm:px-4 sm:py-8 md:gap-y-12 md:pb-20">
       <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
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
index 57132cddc..0fa32827e 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
@@ -29,7 +29,7 @@ import { Textarea } from "~/components/ui/textarea";
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
 import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
-import { CATEGORIES } from "../data/categories.moct";
+import { CATEGORIES } from "../data/categories.mock";
 import ProjectLogo from "./form-images/project-logo";
 import { NewProductSchema } from "./schema/schema";
 
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..9bbed4cd8 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
@@ -148,10 +148,10 @@ const ProductBodyShadcn = ({
             )}
           >
             <span
-              className={cn("size-4 rounded-full", {
+              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",
+                "bg-[#DC2626]": product.status === "out_of_stock",
+                "bg-[#EAB308]": product.status === "low_on_stock",
               })}
             />
             {product.status === "in_stock" && "In Stock"}
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts b/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
index 768b851ab..09c37e4f4 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
+++ b/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
@@ -1,11 +1,83 @@
 import { z } from "zod";
 
+export const MAX_CHAR = 170;
+export const EditProductSchema = z.object({
+  product_name: z.string().min(3, { message: "Product name is required" }),
+  description: z
+    .string()
+    .min(3, { message: "Description is required" })
+    .max(MAX_CHAR, { message: "Description is too long" }),
+  category: z.string().min(3, { message: "Category is required" }),
+  price: z
+    .string()
+    .min(1, { message: "Price is required" })
+    .refine(
+      (value) => {
+        if (typeof Number(value) === "number") {
+          return Number(value) > 0;
+        }
+        return true;
+      },
+      {
+        message: "Price must be a positive number",
+      },
+    ),
+  quantity: z
+    .string()
+    .min(1, { message: "Quantity is required" })
+    .refine(
+      (value) => {
+        if (typeof Number(value) === "number") {
+          return Number(value) > 0;
+        }
+        return true;
+      },
+      {
+        message: "Quantity must be a positive number",
+      },
+    ),
+  media: z.object(
+    {
+      url: z.string(),
+      id: z.string(),
+    },
+    { message: "Media is required" },
+  ),
+  stocks: z.array(
+    z.object({
+      id: z.string(),
+      size: z.string(),
+      stock: z.string().refine(
+        (value) => {
+          if (typeof Number(value) === "number") {
+            return Number(value) > 0;
+          }
+          return true;
+        },
+        {
+          message: "stock is required",
+        },
+      ),
+      price: z.string().refine(
+        (value) => {
+          if (typeof Number(value) === "number") {
+            return Number(value) > 0;
+          }
+          return true;
+        },
+        {
+          message: "price is required",
+        },
+      ),
+    }),
+  ),
+});
 export const NewProductSchema = z.object({
   product_name: z.string().min(3, { message: "Product name is required" }),
   description: z
     .string()
     .min(3, { message: "Description is required" })
-    .max(160, { message: "Description is too long" }),
+    .max(MAX_CHAR, { message: "Description is too long" }),
   category: z.string().min(3, { message: "Category is required" }),
   price: z
     .string()
@@ -45,3 +117,4 @@ export const NewProductSchema = z.object({
 });
 
 export type NewProduct = z.infer<typeof NewProductSchema>;
+export type EditProduct = z.infer<typeof EditProductSchema>;
diff --git a/src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts b/src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
similarity index 62%
rename from src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts
rename to src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
index 03bc674ce..18c4dc253 100644
--- a/src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts
+++ b/src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
@@ -10,3 +10,8 @@ export const CATEGORIES: CategoriesType[] = [
   { value: "monitor", label: "Monitor" },
   { value: "audio", label: "Audio" },
 ];
+export const STOCKS_SELECT: CategoriesType[] = [
+  { value: "in_stock", label: "In Stock" },
+  { value: "low_on_stock", label: "Low on Stock" },
+  { value: "out_of_stock", label: "Out of Stock" },
+];
diff --git a/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts b/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts
new file mode 100644
index 000000000..ec640d483
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts
@@ -0,0 +1,39 @@
+import { EditProduct } from "../_components/schema/schema";
+
+export const STOCKS: EditProduct["stocks"] = [
+  {
+    id: "P0001",
+    size: "Small",
+    stock: "",
+    price: "",
+  },
+  {
+    id: "P0002",
+    size: "Medium",
+    stock: "",
+    price: "",
+  },
+  {
+    id: "P0003",
+    size: "Large",
+    stock: "",
+    price: "S",
+  },
+];
+
+export const shouldDisableAddStocksButton = ({
+  stocks,
+}: {
+  stocks: typeof STOCKS;
+}) => {
+  if (stocks.length === 0) return false;
+
+  return stocks.some(
+    (stock) =>
+      stock.size!.length === 0 ||
+      stock.stock!.length === 0 ||
+      stock.price!.length === 0,
+  )
+    ? true
+    : false;
+};
diff --git a/src/app/globals.css b/src/app/globals.css
index 1296c9014..450351d4c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -169,6 +169,10 @@
   width: 14px; /* Width of the scrollbar */
 }
 
+::selection {
+  @apply bg-primary;
+  color: white;
+}
 ::-webkit-scrollbar-thumb {
   @apply bg-primary;
   border: 4px solid transparent;

From a276f44d71643b60a8d16a43dd162a60e468879e Mon Sep 17 00:00:00 2001
From: Vxrcel <skyeparagon@gmail.com>
Date: Mon, 29 Jul 2024 21:16:56 +0100
Subject: [PATCH 3/4] push

---
 .../products/[productId]/page.tsx                | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx

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;

From b461de50ea675a7a566b2799c1fa69ded947cf63 Mon Sep 17 00:00:00 2001
From: Vxrcel <skyeparagon@gmail.com>
Date: Mon, 29 Jul 2024 21:21:22 +0100
Subject: [PATCH 4/4] user dashboard product details page

---
 .../_components/product-body-shadcn.tsx       |  7 +++++
 .../(user-dashboard)/products/layout.tsx      | 27 +++++++++++++++++++
 .../(user-dashboard)/products/page.tsx        | 14 +---------
 3 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 src/app/dashboard/(user-dashboard)/products/layout.tsx

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 adf99e7d9..9bbed4cd8 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") {