Merge branch 'dev' of https://github.com/hngprojects/hng_boilerplate_…

…nextjs into feat/notification-system
hngprojects · Jul 30, 2024 · 0ba0623 · 0ba0623
2 parents ac6ddad + 6466dbf
commit 0ba0623
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 116 deletions.
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -8,7 +8,7 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid grid-rows-[auto_1fr]">
+    <div className="grid w-full grid-rows-[auto_1fr]">
       <UserNavbar />
       <div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>

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
@@ -17,7 +17,7 @@ const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 const ProjectLogo = ({ form, name }: Properties) => {
   const [isDragging, setIsDragging] = useState(false);
 
-  const projectLogo = form.getValues("media");
+  const productImage = form.getValues("media");
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -55,18 +55,19 @@ const ProjectLogo = ({ form, name }: Properties) => {
 
       {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>
+          <p className="text-xl">Drop to upload</p>
         </div>
       )}
 
-      {projectLogo.url && typeof projectLogo.url === "string" ? (
-        <div className="absolute inset-0 h-full w-full rounded-xl">
+      {productImage.url && typeof productImage.url === "string" ? (
+        <div className="inset-0 h-full w-full rounded-xl md:absolute">
           <div className="h-full w-full overflow-hidden rounded-xl">
             <BlurImage
-              src={projectLogo.url}
+              src={productImage.url}
               width={500}
               height={500}
-              alt="nft"
+              alt="product image"
+              quality={100}
               className={cn(
                 "size-full object-cover transition-all duration-300",
               )}

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
@@ -132,14 +132,14 @@ const ProductDetailsComponent = ({
               href={"/dashboard/products"}
               className="rounded-sm border p-0.5 hover:bg-gray-200"
             >
-              <ArrowLeft />
+              <ArrowLeft className="size-4 min-[500px]:size-5" />
             </Link>
-            <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
+            <span className="text-sm 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",
+                "flex items-center gap-x-1 whitespace-nowrap rounded-full text-xs leading-5 text-neutral-dark-1 min-[500px]:pl-2 min-[500px]:text-sm md:gap-x-2",
               )}
             >
               <span
@@ -149,28 +149,31 @@ const ProductDetailsComponent = ({
                   "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 className="hidden min-[500px]:inline">
+                {" "}
+                {product.status === "in_stock" && "In Stock"}
+                {product.status === "low_on_stock" && "Low on Stock"}
+                {product.status === "out_of_stock" && "Out of Stock"}
+              </span>
             </span>
           </div>
-          <div className="flex items-center justify-end gap-x-4">
+          <div className="flex items-center justify-end gap-x-2 min-[500px]:gap-x-4">
             <Button
               disabled={isLoading}
               onClick={() => router.push("/dashboard/products")}
               type="button"
-              variant="outline"
+              variant="ghost"
               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"
+              className="h-7 rounded-sm border bg-transparent px-1.5 py-1 text-[10px] hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               Discard
             </Button>
             <Button
               disabled={isLoading}
               type="submit"
-              variant="default"
+              variant="ghost"
               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"
+              className="h-7 rounded-sm border bg-primary px-1.5 py-1 text-[10px] font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               {isLoading ? (
                 <span className="flex items-center gap-x-2">
@@ -238,7 +241,7 @@ const ProductDetailsComponent = ({
                           {...field}
                         />
                         <div className="flex w-full items-center justify-between">
-                          <span className="whitespace-nowrap text-sm text-slate-500">
+                          <span className="whitespace-nowrap text-xs text-slate-500 sm:text-sm">
                             Maximum of {MAX_CHAR} characters
                           </span>
                           <WordCounter length={MAX_CHAR} word={field.value} />
@@ -250,8 +253,8 @@ const ProductDetailsComponent = ({
                 )}
               />
             </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">
+            <div className="flex flex-col gap-y-2 rounded-[6px] shadow-[0_0_10px_rgba(0,0,0,0.1)] max-sm:pb-4 sm:gap-y-4 sm:p-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3 max-sm:p-4">
                 <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
                   Stock
                 </h2>
@@ -367,7 +370,7 @@ const ProductDetailsComponent = ({
                 type="button"
                 disabled={isLoading || disableAddStockButton}
                 onClick={handleAddNewStock}
-                className="w-fit bg-transparent"
+                className="w-fit bg-transparent max-sm:ml-4"
                 variant="outline"
               >
                 Add a variant
@@ -384,7 +387,7 @@ const ProductDetailsComponent = ({
                   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="relative mt-2 flex h-fit 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" />

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
@@ -77,7 +77,7 @@ const ProductBodyShadcn = ({
         key={product.product_id}
         className={cn(
           "relative bg-white",
-          product_id === product.product_id ? "bg-muted/50" : "",
+          product_id === product.product_id ? "bg-[#F1F5F9]" : "",
         )}
       >
         <TableCell className="flex items-center justify-start gap-x-2 whitespace-nowrap md:gap-x-4">
@@ -97,7 +97,7 @@ const ProductBodyShadcn = ({
           <span
             role="button"
             onClick={() => handleOpenDetail(product.product_id)}
-            className="hide_scrollbar w-[110px] whitespace-break-spaces text-[10px] text-neutral-dark-2 min-[500px]:text-xs sm:ml-1 md:w-[200px] md:text-base lg:w-[200px]"
+            className="hide_scrollbar ml-0.5 w-[110px] whitespace-break-spaces text-[10px] text-neutral-dark-2 min-[376px]:text-xs sm:ml-1 md:w-[200px] md:text-base lg:w-[200px]"
           >
             {searchTerm.length > 1 ? (
               <span
@@ -132,14 +132,14 @@ const ProductBodyShadcn = ({
         <TableCell
           role="button"
           onClick={() => handleOpenDetail(product.product_id)}
-          className="text-[10px] min-[500px]:text-xs md:text-base"
+          className="text-[10px] min-[376px]:text-xs md:text-base"
         >
           {product.category}
         </TableCell>
         <TableCell
           role="button"
           onClick={() => handleOpenDetail(product.product_id)}
-          className="text-[10px] min-[500px]:text-xs md:text-base"
+          className="text-[10px] min-[376px]:text-xs md:text-base"
         >
           {formatPrice(product.price)}
         </TableCell>
@@ -149,7 +149,7 @@ const ProductBodyShadcn = ({
         >
           <span
             className={cn(
-              "flex items-center gap-x-1 whitespace-nowrap rounded-full px-2 text-[10px] leading-5 min-[500px]:text-xs md:gap-x-2 md:text-base",
+              "flex items-center gap-x-1 whitespace-nowrap rounded-full px-2 text-[10px] leading-5 min-[376px]:text-xs md:gap-x-2 md:text-base",
             )}
           >
             <span

diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
@@ -110,7 +110,7 @@ const ProductContent = ({
         className={cn(
           "show_scrollbar rounded-xl border border-gray-300 bg-[#F1F5F9] pt-1 sm:pt-4",
           isOpen
-            ? "max-w-full lg:max-w-[600px] min-[1090px]:max-w-[650px] min-[1150px]:max-w-[750px] min-[1200px]:max-w-[800px] xl:max-w-full"
+            ? "max-w-full lg:max-w-[600px] min-[1090px]:max-w-[650px] min-[1150px]:max-w-[750px] min-[1200px]:max-w-[800px] xl:max-w-[820px]"
             : "max- w-full",
         )}
       >

diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader2, X } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useState } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -18,6 +19,7 @@ const variantProperties = {
 };
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 const ProductDetailModal = () => {
+  const router = useRouter();
   const { products, deleteProduct } = useProducts();
   const [isLoading, setIsLoading] = useState(false);
   const { winWidth } = useWindowWidth();
@@ -59,6 +61,11 @@ const ProductDetailModal = () => {
     setIsLoading(false);
     setIsDelete(false);
   };
+  const handleEditAction = (id: string) => {
+    updateOpen(false);
+    router.push(`/dashboard/products/${id}`);
+    updateProductId("null");
+  };
 
   useEffect(() => {
     document.body.style.overflow =
@@ -206,7 +213,11 @@ const ProductDetailModal = () => {
                   <span>Delete</span>
                 )}
               </Button>
-              <Button variant="outline" className="bg-white font-medium">
+              <Button
+                onClick={() => handleEditAction(product!.product_id)}
+                variant="outline"
+                className="bg-white font-medium"
+              >
                 Edit
               </Button>
             </div>

diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { X } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useTransition } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -11,6 +12,7 @@ import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import { cn, formatPrice, simulateDelay } from "~/lib/utils";
 
 const ProductDetailView = () => {
+  const router = useRouter();
   const { products, deleteProduct } = useProducts();
   const [isLoading, startTransition] = useTransition();
   const {
@@ -46,6 +48,12 @@ const ProductDetailView = () => {
       setIsDelete(false);
     });
   };
+  const handleEditAction = (id: string) => {
+    updateOpen(false);
+    router.push(`/dashboard/products/${id}`);
+    updateProductId("null");
+  };
+
   useEffect(() => {
     document.title = isOpen
       ? `Product - ${product?.name}`
@@ -59,8 +67,8 @@ const ProductDetailView = () => {
           initial={{ opacity: 0, x: 100 }}
           animate={{ opacity: 1, x: 0 }}
           exit={{ opacity: 0, x: 100 }}
-          transition={{ duration: 0.5 }}
-          className="sticky top-0 hidden w-full min-w-[350px] flex-col gap-y-5 rounded-[6px] border border-gray-300 bg-white px-2 py-4 shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)] lg:flex lg:max-w-[370px] xl:w-[403px] xl:px-4"
+          transition={{ duration: 0.3 }}
+          className="sticky top-0 hidden w-full min-w-[340px] flex-col gap-y-5 rounded-[6px] border border-gray-300 bg-white px-2 py-4 shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)] lg:flex lg:max-w-[370px] xl:w-[403px] xl:px-4"
         >
           <div
             className={cn(
@@ -164,7 +172,11 @@ const ProductDetailView = () => {
                 <span>Delete</span>
               )}
             </Button>
-            <Button variant="outline" className="bg-white font-medium">
+            <Button
+              onClick={() => handleEditAction(product!.product_id)}
+              variant="outline"
+              className="bg-white font-medium"
+            >
               Edit
             </Button>
           </div>

diff --git a/src/app/dashboard/(user-dashboard)/products/page.test.tsx b/src/app/dashboard/(user-dashboard)/products/page.test.tsx