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] 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") {