From 5fe19423712d99777ddba4722ae7d7426d4e511c Mon Sep 17 00:00:00 2001 From: Aba Nicaisse Date: Mon, 29 Jul 2024 20:20:51 +0300 Subject: [PATCH 1/5] Feat: create superadmin product detail edit page (team KIMIKO). --- .../ProductTable/product-table.tsx | 73 +----- .../ProductTable/single-product-row.tsx | 82 ++++++ .../admin/products/data/mock.products.ts | 5 + .../admin/products/edit/[productID]/page.tsx | 234 ++++++++++++++++++ .../products/edit/[productID]/shoe-pic.jpg | Bin 0 -> 4595981 bytes 5 files changed, 325 insertions(+), 69 deletions(-) create mode 100644 src/app/dashboard/(admin)/admin/products/_components/ProductTable/single-product-row.tsx create mode 100644 src/app/dashboard/(admin)/admin/products/edit/[productID]/page.tsx create mode 100644 src/app/dashboard/(admin)/admin/products/edit/[productID]/shoe-pic.jpg diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx index 558392a29..0fdae48e3 100644 --- a/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx +++ b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx @@ -1,17 +1,8 @@ -"use client"; +// "use client"; -import clsx from "clsx"; -import { ChevronLeft, ChevronRight, EllipsisVertical } from "lucide-react"; -import { useState } from "react"; +import { ChevronLeft, ChevronRight } from "lucide-react"; import { Button } from "~/components/ui/button"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuTrigger, -} from "~/components/ui/dropdown-menu"; import { Pagination, PaginationContent, @@ -23,68 +14,12 @@ import { Table, TableBody, TableCaption, - TableCell, TableHead, TableHeader, TableRow, } from "~/components/ui/table"; -import { Product, products } from "../../data/mock.products"; -import DeleteDialog from "../ProductModal/delete-dialog"; - -const ProductRow = ({ product }: { product: Product }) => { - const [isDialogOpen, setIsDialogOpen] = useState(false); - const handleOpenDialog = () => setIsDialogOpen(true); - const handleCloseDialog = () => setIsDialogOpen(false); - return ( - <> - - -
-
- - {product.name} - -
- - {product.price} - {product.totalSold} - -
- {product.status} -
- - {product.createdAt} - - - - - - - Actions - Edit - - Delete - - - - - - {isDialogOpen && } - - ); -}; +import { products } from "../../data/mock.products"; +import ProductRow from "./single-product-row"; const ProductTable = () => { return ( diff --git a/src/app/dashboard/(admin)/admin/products/_components/ProductTable/single-product-row.tsx b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/single-product-row.tsx new file mode 100644 index 000000000..625dabc55 --- /dev/null +++ b/src/app/dashboard/(admin)/admin/products/_components/ProductTable/single-product-row.tsx @@ -0,0 +1,82 @@ +"use client"; + +import clsx from "clsx"; +import { EllipsisVertical } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +import { Button } from "~/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, +} from "~/components/ui/dropdown-menu"; +import { TableCell, TableRow } from "~/components/ui/table"; +import { Product } from "../../data/mock.products"; +import DeleteDialog from "../ProductModal/delete-dialog"; + +const ProductRow = ({ product }: { product: Product }) => { + const router = useRouter(); + const [isDialogOpen, setIsDialogOpen] = useState(false); + const handleOpenDialog = () => setIsDialogOpen(true); + const handleCloseDialog = () => setIsDialogOpen(false); + return ( + <> + + +
+
+ + {product.name} + +
+ + {product.price} + {product.totalSold} + +
+ {product.status} +
+ + {product.createdAt} + + + + + + + Actions + { + router.push(`./products/edit/${product.id}`); + }} + > + Edit + + + Delete + + + + + + {isDialogOpen && } + + ); +}; + +export default ProductRow; diff --git a/src/app/dashboard/(admin)/admin/products/data/mock.products.ts b/src/app/dashboard/(admin)/admin/products/data/mock.products.ts index fef492c68..867d96010 100644 --- a/src/app/dashboard/(admin)/admin/products/data/mock.products.ts +++ b/src/app/dashboard/(admin)/admin/products/data/mock.products.ts @@ -1,4 +1,5 @@ export interface Product { + id: string; name: string; price: string; totalSold: string; @@ -8,6 +9,7 @@ export interface Product { export const products: Product[] = [ { + id: "product-1", name: "Hypernova Headphones", price: "$129.99", totalSold: "25", @@ -15,6 +17,7 @@ export const products: Product[] = [ createdAt: "2024-07-16 10:36AM", }, { + id: "product-2", name: "Galaxy Tablet", price: "$399.99", totalSold: "40", @@ -22,6 +25,7 @@ export const products: Product[] = [ createdAt: "2024-07-14 03:15PM", }, { + id: "product-3", name: "Astro Smartwatch", price: "$199.99", totalSold: "15", @@ -29,6 +33,7 @@ export const products: Product[] = [ createdAt: "2024-07-10 09:20AM", }, { + id: "product-4", name: "Nebula Laptop", price: "$899.99", totalSold: "50", diff --git a/src/app/dashboard/(admin)/admin/products/edit/[productID]/page.tsx b/src/app/dashboard/(admin)/admin/products/edit/[productID]/page.tsx new file mode 100644 index 000000000..cd31779ec --- /dev/null +++ b/src/app/dashboard/(admin)/admin/products/edit/[productID]/page.tsx @@ -0,0 +1,234 @@ +import { ArrowLeft } from "lucide-react"; +import Image from "next/image"; + +import shoeImg from "~/app/dashboard/(admin)/admin/products/edit/[productID]/shoe-pic.jpg"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "~/components/ui/table"; +import { Product, products } from "../../data/mock.products"; + +const EditProductDetail = ({ params }: { params: { productID: string } }) => { + const productImg = shoeImg; + const product: Product = products?.filter( + ({ id }) => id === params.productID, + )[0]; + return ( + <> +
+
+ +

+ Product Detail +

+
+ +
+
+
+
+

+ Product Detail +

+

+ Make quick changes to your product +

+
+
+
+ + +
+
+ +