From 3ab7afc3cdb52766a9eaa14e24b102825f6f3ad6 Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 13:30:43 +0100 Subject: [PATCH 01/18] feature:implement product text description area --- package.json | 1 + pnpm-lock.yaml | 15 + public/images/user.png | Bin 0 -> 3393 bytes .../_components/new-product-modal.tsx | 37 +- .../_components/product-detail-modal.tsx | 14 +- .../products/mainproductdetailpage/page.tsx | 367 ++++++++++++++++++ src/components/ui/input.tsx | 3 +- 7 files changed, 411 insertions(+), 26 deletions(-) create mode 100644 public/images/user.png create mode 100644 src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx diff --git a/package.json b/package.json index 00d899270..5735255e8 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react-email": "2.1.5", "react-hook-form": "^7.52.2", "react-paginate": "^8.2.0", + "react-toastify": "^10.0.5", "recharts": "^2.12.7", "sharp": "^0.33.4", "swiper": "^11.1.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7b81ef63..a058996d6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -152,6 +152,9 @@ importers: react-paginate: specifier: ^8.2.0 version: 8.2.0(react@18.3.1) + react-toastify: + specifier: ^10.0.5 + version: 10.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts: specifier: ^2.12.7 version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -4484,6 +4487,12 @@ packages: '@types/react': optional: true + react-toastify@10.0.5: + resolution: {integrity: sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==} + peerDependencies: + react: '>=18' + react-dom: '>=18' + react-transition-group@4.4.5: resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -10020,6 +10029,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + react-toastify@10.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.25.0 diff --git a/public/images/user.png b/public/images/user.png new file mode 100644 index 0000000000000000000000000000000000000000..6f728aaa5878673c6b37f5a5e6068a35ea1247e4 GIT binary patch literal 3393 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 Xgc;LGH7IN;00000NkvXXu0mjfrYB?x literal 0 HcmV?d00001 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 f12531b9f..982d7adc3 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 @@ -1,15 +1,6 @@ // components/admin/NewProductModal.tsx -import { zodResolver } from "@hookform/resolvers/zod"; -import { AnimatePresence, motion } from "framer-motion"; -import { Loader, X } from "lucide-react"; -import Image from "next/image"; -import { useState, useTransition } from "react"; -import { useForm } from "react-hook-form"; -import { z } from "zod"; -import { createProduct } from "~/actions/product"; -import WordCounter from "~/components/miscellaneous/WordCounter"; -import { Button } from "~/components/ui/button"; +import { AnimatePresence, motion } from "framer-motion"; import { Form, FormControl, @@ -18,8 +9,7 @@ import { FormLabel, FormMessage, } from "~/components/ui/form"; -import { Input } from "~/components/ui/input"; -import { Label } from "~/components/ui/label"; +import { Loader, X } from "lucide-react"; import { Select, SelectContent, @@ -29,15 +19,26 @@ import { SelectTrigger, SelectValue, } from "~/components/ui/select"; +import { useState, useTransition } from "react"; + +import { Button } from "~/components/ui/button"; +import { CATEGORIES } from "../data/categories.mock"; +import { CloudinaryAsset } from "~/types"; +import Image from "next/image"; +import { Input } from "~/components/ui/input"; +import { Label } from "~/components/ui/label"; +import { MAX_CHAR } from "./schema/schema"; import { Textarea } from "~/components/ui/textarea"; -import { useToast } from "~/components/ui/use-toast"; -import { useOrgContext } from "~/contexts/orgContext"; -import { useLocalStorage } from "~/hooks/use-local-storage"; +import WordCounter from "~/components/miscellaneous/WordCounter"; import { cn } from "~/lib/utils"; +import { createProduct } from "~/actions/product"; import { productSchema } from "~/schemas"; -import { CloudinaryAsset } from "~/types"; -import { CATEGORIES } from "../data/categories.mock"; -import { MAX_CHAR } from "./schema/schema"; +import { useForm } from "react-hook-form"; +import { useLocalStorage } from "~/hooks/use-local-storage"; +import { useOrgContext } from "~/contexts/orgContext"; +import { useToast } from "~/components/ui/use-toast"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; const NewProductModal = () => { const { setIsNewModal, isNewModal } = useOrgContext(); 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 index 0a6edfceb..20b1f69e3 100644 --- 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,17 +1,17 @@ +"use client"; + import { AnimatePresence, motion } from "framer-motion"; import { Loader2, X } from "lucide-react"; -import { useRouter } from "next-nprogress-bar"; +import { cn, formatPrice } from "~/lib/utils"; +import { deleteProduct, getProductDetails } from "~/actions/product"; import { startTransition, useEffect, useState, useTransition } from "react"; -import { deleteProduct, getProductDetails } from "~/actions/product"; import BlurImage from "~/components/miscellaneous/blur-image"; import { Button } from "~/components/ui/button"; -import { toast } from "~/components/ui/use-toast"; -import { useOrgContext } from "~/contexts/orgContext"; -import { useLocalStorage } from "~/hooks/use-local-storage"; -import useWindowWidth from "~/hooks/use-window-width"; -import { cn, formatPrice } from "~/lib/utils"; import { Product } from "~/types"; +import { useLocalStorage } from "~/hooks/use-local-storage"; +import { useOrgContext } from "~/contexts/orgContext"; +import { useRouter } from "next-nprogress-bar"; const variantProperties = { left: "50%", diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx new file mode 100644 index 000000000..df820d141 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -0,0 +1,367 @@ +"use client"; + +import { ChangeEvent, FormEvent, useState } from "react"; + +import Image from "next/image"; +import Link from "next/Link"; +import user from "../../../../../../public/images/user.png"; + +const ProductDetail = () => { + const [textValue, setTextValue] = useState("Product 2"); + const [messageValue, setmessageValue] = useState( + "A fusion of ripe bananas, pure honey, and succulent raspberries with our bread. Crafted to perfection.", + ); + const [image, setImage] = useState(); + const [smallQuantity, setSmallQuantity] = useState(0); + const [standardQuantity, setStandardQuantity] = useState(24); + const [largeQuantity, setLargeQuantity] = useState(0); + const [smallPrice, setSmallPrice] = useState("$12.00"); + const [standardPrice, setStandardPrice] = useState("$29.00"); + const [largePrice, setLargePrice] = useState("$32.00"); + + const handleSubmit = (event: FormEvent) => { + event.preventDefault(); + + if (!textValue.trim() || !messageValue.trim() || !smallQuantity || !standardQuantity || !largeQuantity || !smallPrice || !standardPrice || !largePrice || !largePrice || !image) { + alert("Please fill in all the necessary fields including your image before submitting."); + return; + } + alert("Details updated"); + }; + + const Discard = ()=> { + alert("Changes discard") + } + + const handleSmallQty = (event: ChangeEvent) => { + setSmallQuantity(Number(event.target.value)); + }; + + const handleStandardQty = (event: ChangeEvent) => { + setStandardQuantity(Number(event.target.value)); + }; + + const handleLargeQty = (event: ChangeEvent) => { + setLargeQuantity(Number(event.target.value)); + }; + + //upload media section + const handleImageChange = (event: ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setImage(reader.result as string); + }; + reader.readAsDataURL(file); + } + }; + + //comment section + const [comments, setComments] = useState([ + { + name: "Adetunji Oluwatobi", + date: "02 Jan, 2020", + time: "Wed 02:30pm", + comment: "Living a balanced lifestyle is essential...", + }, + { + name: "Afolabi Oyewole", + date: "02 Jan, 2020", + time: "Wed 02:30pm", + comment: "Living a balanced lifestyle is essential...", + }, + ]); + const [newComment, setNewComment] = useState(""); + + const handleCommentChange = ( + event: React.ChangeEvent, + ) => { + setNewComment(event.target.value); + }; + + const handleCommentSubmit = () => { + if (newComment.trim()) { + const currentDate = new Date(); + const formattedDate = `${currentDate.getDate()} ${currentDate.toLocaleString("default", { month: "short" })}, ${currentDate.getFullYear()}`; + const formattedTime = `${currentDate.toLocaleString("default", { weekday: "short" })} ${currentDate.getHours()}:${currentDate.getMinutes() < 10 ? "0" : ""}${currentDate.getMinutes()}pm`; + + const commentToAdd = { + name: "New User", + date: formattedDate, + time: formattedTime, + comment: newComment, + }; + + setComments([...comments, commentToAdd]); + setNewComment(""); + } + }; + + return ( +
+
+
+
+ + Products + + + {">"} + + + Product Details + +
+
+
+
+ +

Product 2

+ ● In stock +
+
+
+ Discard +
+ +
+
+ +
+
+
+

Product Details

+

+ Make quick changes to your product. +

+
+ +
+ + setTextValue(event.target.value)} + placeholder="Product title" + className="w-full rounded-md border border-gray-300 p-2 focus:outline-none" + /> +
+
+ + +
+
+ +
+

Stock

+

Add and remove products

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SizeStockPrice
Small + + + setSmallPrice(event.target.value)} + /> +
+
+
Standard + + + + setStandardPrice(event.target.value) + } + /> +
+
+
Large + + + setLargePrice(event.target.value)} + /> +
+ +
+ Add a Variant +
+
+
+ +
+
+

Media

+
+

+ Upload media for your product. +

+
+
+ {image ? ( + Uploaded + ) : ( +

Image here

+ )} +
+ +
+
+ +
+
+

Status

+

Availability

+
+ +
+
+

Archive

+

Archive a product.

+
+ +
+
+
+
+
+ +
+

Comments

+ {comments.map((comment, index) => ( +
+
+ User Avatar +
+

{comment.name}

+

{`${comment.date} ${comment.time}`}

+
+
+

{comment.comment}

+
+ ))} + +
+ +
+
+
+ ); +}; + +export default ProductDetail; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index ed5aa8a33..324697dbb 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -6,7 +6,7 @@ export interface InputProperties extends React.InputHTMLAttributes {} const Input = React.forwardRef( - ({ className, type, ...properties }, reference) => { + ({ className, type, value, ...properties }, reference) => { return ( ( "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50", className, )} + value={value} ref={reference} {...properties} /> From 1b8118537ef0d5e05a64c6a720058e5e5ed6f296 Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 13:50:19 +0100 Subject: [PATCH 02/18] feature: implemeted text area description --- .../products/_components/product-detail-modal.tsx | 2 ++ 1 file changed, 2 insertions(+) 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 index 20b1f69e3..e376eda90 100644 --- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx +++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx @@ -9,9 +9,11 @@ import { startTransition, useEffect, useState, useTransition } from "react"; import BlurImage from "~/components/miscellaneous/blur-image"; import { Button } from "~/components/ui/button"; import { Product } from "~/types"; +import { toast } from "~/components/ui/use-toast"; import { useLocalStorage } from "~/hooks/use-local-storage"; import { useOrgContext } from "~/contexts/orgContext"; import { useRouter } from "next-nprogress-bar"; +import useWindowWidth from "~/hooks/use-window-width"; const variantProperties = { left: "50%", From 2fcd1283cd50414babe4ccb9e8f67450f7fa74e2 Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 14:01:13 +0100 Subject: [PATCH 03/18] feature:implemented product description text area --- .../_components/new-product-modal.tsx | 36 +++++++------- .../_components/product-detail-modal.tsx | 10 ++-- .../products/mainproductdetailpage/page.tsx | 49 ++++++++++++------- 3 files changed, 55 insertions(+), 40 deletions(-) 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 982d7adc3..179d0c0f1 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 @@ -1,6 +1,16 @@ // components/admin/NewProductModal.tsx +import { zodResolver } from "@hookform/resolvers/zod"; import { AnimatePresence, motion } from "framer-motion"; +import { Loader, X } from "lucide-react"; +import Image from "next/image"; +import { useState, useTransition } from "react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { createProduct } from "~/actions/product"; +import WordCounter from "~/components/miscellaneous/WordCounter"; +import { Button } from "~/components/ui/button"; import { Form, FormControl, @@ -9,7 +19,8 @@ import { FormLabel, FormMessage, } from "~/components/ui/form"; -import { Loader, X } from "lucide-react"; +import { Input } from "~/components/ui/input"; +import { Label } from "~/components/ui/label"; import { Select, SelectContent, @@ -19,26 +30,15 @@ import { SelectTrigger, SelectValue, } from "~/components/ui/select"; -import { useState, useTransition } from "react"; - -import { Button } from "~/components/ui/button"; -import { CATEGORIES } from "../data/categories.mock"; -import { CloudinaryAsset } from "~/types"; -import Image from "next/image"; -import { Input } from "~/components/ui/input"; -import { Label } from "~/components/ui/label"; -import { MAX_CHAR } from "./schema/schema"; import { Textarea } from "~/components/ui/textarea"; -import WordCounter from "~/components/miscellaneous/WordCounter"; +import { useToast } from "~/components/ui/use-toast"; +import { useOrgContext } from "~/contexts/orgContext"; +import { useLocalStorage } from "~/hooks/use-local-storage"; import { cn } from "~/lib/utils"; -import { createProduct } from "~/actions/product"; import { productSchema } from "~/schemas"; -import { useForm } from "react-hook-form"; -import { useLocalStorage } from "~/hooks/use-local-storage"; -import { useOrgContext } from "~/contexts/orgContext"; -import { useToast } from "~/components/ui/use-toast"; -import { z } from "zod"; -import { zodResolver } from "@hookform/resolvers/zod"; +import { CloudinaryAsset } from "~/types"; +import { CATEGORIES } from "../data/categories.mock"; +import { MAX_CHAR } from "./schema/schema"; const NewProductModal = () => { const { setIsNewModal, isNewModal } = useOrgContext(); 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 index e376eda90..36f3da06d 100644 --- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx +++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx @@ -2,18 +2,18 @@ import { AnimatePresence, motion } from "framer-motion"; import { Loader2, X } from "lucide-react"; -import { cn, formatPrice } from "~/lib/utils"; -import { deleteProduct, getProductDetails } from "~/actions/product"; +import { useRouter } from "next-nprogress-bar"; import { startTransition, useEffect, useState, useTransition } from "react"; +import { deleteProduct, getProductDetails } from "~/actions/product"; import BlurImage from "~/components/miscellaneous/blur-image"; import { Button } from "~/components/ui/button"; -import { Product } from "~/types"; import { toast } from "~/components/ui/use-toast"; -import { useLocalStorage } from "~/hooks/use-local-storage"; import { useOrgContext } from "~/contexts/orgContext"; -import { useRouter } from "next-nprogress-bar"; +import { useLocalStorage } from "~/hooks/use-local-storage"; import useWindowWidth from "~/hooks/use-window-width"; +import { cn, formatPrice } from "~/lib/utils"; +import { Product } from "~/types"; const variantProperties = { left: "50%", diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index df820d141..9a81b7b82 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,11 +1,15 @@ "use client"; -import { ChangeEvent, FormEvent, useState } from "react"; - import Image from "next/image"; import Link from "next/Link"; +import { ChangeEvent, FormEvent, useState } from "react"; + import user from "../../../../../../public/images/user.png"; +const Discard = () => { + alert("Changes discard"); +}; + const ProductDetail = () => { const [textValue, setTextValue] = useState("Product 2"); const [messageValue, setmessageValue] = useState( @@ -22,16 +26,25 @@ const ProductDetail = () => { const handleSubmit = (event: FormEvent) => { event.preventDefault(); - if (!textValue.trim() || !messageValue.trim() || !smallQuantity || !standardQuantity || !largeQuantity || !smallPrice || !standardPrice || !largePrice || !largePrice || !image) { - alert("Please fill in all the necessary fields including your image before submitting."); + if ( + !textValue.trim() || + !messageValue.trim() || + !smallQuantity || + !standardQuantity || + !largeQuantity || + !smallPrice || + !standardPrice || + !largePrice || + !largePrice || + !image + ) { + alert( + "Please fill in all the necessary fields including your image before submitting.", + ); return; } alert("Details updated"); - }; - - const Discard = ()=> { - alert("Changes discard") - } + }; const handleSmallQty = (event: ChangeEvent) => { setSmallQuantity(Number(event.target.value)); @@ -57,7 +70,7 @@ const ProductDetail = () => { } }; - //comment section + //comment section const [comments, setComments] = useState([ { name: "Adetunji Oluwatobi", @@ -126,7 +139,10 @@ const ProductDetail = () => { ● In stock
-
+
Discard
))}
-
@@ -312,19 +310,10 @@ const ProductDetail = () => { + - + {/**variant*/}
-
-

Status

-

Availability

-
- -
+ {/*available*/}

Archive

Archive a product.

From c6d8448ec19ddb9489ec08bec9f3d02d400d6b3f Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 15:30:36 +0100 Subject: [PATCH 07/18] feature: Implement Stock Management Table --- .../products/mainproductdetailpage/page.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index 7548507ba..d7314ee53 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import { ChangeEvent, FormEvent, useState } from "react"; - import Image from "next/image"; import Link from "next/link"; +import { ChangeEvent, FormEvent, useState } from "react"; + import user from "../../../../../../public/images/user.png"; const Discard = () => { @@ -274,8 +274,6 @@ const ProductDetail = () => { - -
@@ -310,7 +308,8 @@ const ProductDetail = () => { + - {/**variant*/} + + {/**variant*/}
{/*available*/} From ab8e1d89b838b44ec682aa04bf42e3087398973a Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 15:52:32 +0100 Subject: [PATCH 08/18] feature:implemented adding a variant button --- .../products/mainproductdetailpage/page.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index d7314ee53..36452179e 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import Image from "next/image"; -import Link from "next/link"; import { ChangeEvent, FormEvent, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; import user from "../../../../../../public/images/user.png"; const Discard = () => { @@ -274,6 +274,10 @@ const ProductDetail = () => { + +
@@ -309,10 +313,9 @@ const ProductDetail = () => { - {/**variant*/}
- {/*available*/} + {/*availablelity*/}

Archive

Archive a product.

From 8acd95590277b6d01ad5268819c551aa84c81f9e Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 16:04:32 +0100 Subject: [PATCH 09/18] feature:implemented adding a variant button --- .../(user-dashboard)/products/mainproductdetailpage/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index 36452179e..98d98aaa9 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import { ChangeEvent, FormEvent, useState } from "react"; - import Image from "next/image"; import Link from "next/link"; +import { ChangeEvent, FormEvent, useState } from "react"; + import user from "../../../../../../public/images/user.png"; const Discard = () => { From abbb599856d99a50b63c5733cd37caf472952912 Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 16:15:24 +0100 Subject: [PATCH 10/18] feature:implemented availability dropdown --- .../products/mainproductdetailpage/page.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index 98d98aaa9..c98fe3896 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import Image from "next/image"; -import Link from "next/link"; import { ChangeEvent, FormEvent, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; import user from "../../../../../../public/images/user.png"; const Discard = () => { @@ -315,15 +315,17 @@ const ProductDetail = () => {
- {/*availablelity*/} -
-

Archive

-

Archive a product.

-
- +
+

Status

+

Availability

+
+
+
From 6cefc5bfe2b439a58aa67b33bc41014915a9b7ac Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 16:31:10 +0100 Subject: [PATCH 11/18] feature:implemented availability dropdown --- .../(user-dashboard)/products/mainproductdetailpage/page.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index c98fe3896..948083e48 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import { ChangeEvent, FormEvent, useState } from "react"; - import Image from "next/image"; import Link from "next/link"; +import { ChangeEvent, FormEvent, useState } from "react"; + import user from "../../../../../../public/images/user.png"; const Discard = () => { @@ -325,7 +325,6 @@ const ProductDetail = () => { - From 860a996ff2a7566f1f04c7863effa3042834f31a Mon Sep 17 00:00:00 2001 From: "Emma F. Mkpurunchi" Date: Sat, 24 Aug 2024 16:46:50 +0100 Subject: [PATCH 12/18] feature:implmentd product archive button --- .../products/mainproductdetailpage/page.tsx | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx index 948083e48..67d19c4e7 100644 --- a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx +++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx @@ -1,9 +1,9 @@ "use client"; -import Image from "next/image"; -import Link from "next/link"; import { ChangeEvent, FormEvent, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; import user from "../../../../../../public/images/user.png"; const Discard = () => { @@ -325,6 +325,14 @@ const ProductDetail = () => { +
+

Archive

+

Archive a product.

+
+ +
@@ -332,24 +340,7 @@ const ProductDetail = () => {

Comments

- {comments.map((comment, index) => ( -
-
- User Avatar -
-

{comment.name}

-

{`${comment.date} ${comment.time}`}

-
-
-

{comment.comment}

-
- ))} + {/*comment and reply*/}