From d40bcdbff4a94501e44c87e3feae02cd5b1ab13a Mon Sep 17 00:00:00 2001 From: print-signs Date: Tue, 17 Oct 2023 16:52:15 +0530 Subject: [PATCH] product page updated --- src/views/Categories/categories.js | 2 +- src/views/Products/AddProduct.js | 754 ++++++++++++++------------- src/views/Products/EditProduct.js | 806 +++++++++++++++-------------- src/views/Products/ViewProduct.js | 240 +++++---- 4 files changed, 961 insertions(+), 841 deletions(-) diff --git a/src/views/Categories/categories.js b/src/views/Categories/categories.js index 3d5ad4a..5e16b04 100644 --- a/src/views/Categories/categories.js +++ b/src/views/Categories/categories.js @@ -34,7 +34,7 @@ const Categories = () => { const [saveLoding, setSaveLoading] = useState(true); const [edit, setEdit] = useState(false); const [categoryName, setCategoryName] = useState(""); - const [success, setSuccess] = useState(false); + const [categoryId, setCategoryId] = useState(""); const [category, setCategory] = useState([]); const [itemPerPage, setItemPerPage] = useState(10); diff --git a/src/views/Products/AddProduct.js b/src/views/Products/AddProduct.js index c412f5d..ed2d730 100644 --- a/src/views/Products/AddProduct.js +++ b/src/views/Products/AddProduct.js @@ -1,383 +1,427 @@ - - - -import React, { useEffect, useState } from 'react' -import Button from '@material-ui/core/Button' -import { Link, useNavigate } from 'react-router-dom' -import swal from 'sweetalert' -import axios from 'axios' -import { isAutheticated } from 'src/auth' +import React, { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link, useNavigate } from "react-router-dom"; +import swal from "sweetalert"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; // import { WebsiteURL } from '../WebsiteURL' const AddProduct = () => { - const token = isAutheticated() - const navigate = useNavigate() - const [data, setData] = useState({ - image: [], - imageURL: [], - name: '', - description: '', + const token = isAutheticated(); + const navigate = useNavigate(); - price: '', + const [loading, setLoading] = useState(false); + const [allTax, setAllTax] = useState([]); + const [categories, setCategoies] = useState([]); + const [imagesPreview, setImagesPreview] = useState([]); + const [allimage, setAllImage] = useState([]); - }) + useEffect(() => { + const getAllTax = async () => { + const res = await axios.get(`/api/tax/view_tax`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res.data) { + setAllTax(res.data); + } + }; + getAllTax(); + getCategories(); + }, [token]); + const [data, setData] = useState({ + image: [], + imageURL: [], + name: "", + description: "", + price: "", + category: "", + }); - const [loading, setLoading] = useState(false) - const [allTax, setAllTax] = useState([]) + const getCategories = async () => { + try { + const response = await axios.get("/api/category/getCategories", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); - const [imagesPreview, setImagesPreview] = useState([]); - const [allimage, setAllImage] = useState([]); - - - useEffect(() => { - const getAllTax = async () => { - const res = await axios.get(`/api/tax/view_tax`, { - headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, - }) - if (res.data) { - setAllTax(res.data) - } - } - getAllTax() - - }, [token]) - - const handleChange = (e) => { - - if (e.target.id === 'image') { - if ( - e.target.files[0]?.type === 'image/jpeg' || - e.target.files[0]?.type === 'image/png' || - e.target.files[0]?.type === 'image/jpg' - ) { - if (imagesPreview.length > 3) { - swal({ - title: 'Warning', - text: 'maximum Four image Upload ', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - return - } - // only for file preview------------------------------------ - const files = Array.from(e.target.files); - files.forEach((file) => { - const reader = new FileReader(); - - reader.onload = () => { - if (reader.readyState === 2) { - setImagesPreview((old) => [...old, reader.result]); - - } - }; - - reader.readAsDataURL(file) - }); - // ----------------------------------------------------------------------------- - - - setData((prev) => ({ - ...prev, - - - image: [...data.image, ...e.target.files], - })) - return - } else { - swal({ - title: 'Warning', - text: 'Upload jpg, jpeg, png only.', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - setData((prev) => ({ - ...prev, - imageURL: '', - image: '', - })) - e.target.value = null - return - } - } - setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) + if (response.status === 200) { + setCategoies(response?.data?.categories); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); } + }; - - const TaxRatechange = async (e) => { - let taxDetails = { - name: e.target.value.slice(12, 16), - rate: Number(e.target.value.slice(4, 6)), - - taxId: e.target.value.slice(24) - + const handleChange = (e) => { + if (e.target.id === "image") { + if ( + e.target.files[0]?.type === "image/jpeg" || + e.target.files[0]?.type === "image/png" || + e.target.files[0]?.type === "image/jpg" + ) { + if (imagesPreview.length > 3) { + swal({ + title: "Warning", + text: "maximum Four image Upload ", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; } + // only for file preview------------------------------------ + const files = Array.from(e.target.files); + files.forEach((file) => { + const reader = new FileReader(); - let trRate = taxDetails.rate / 100 - let PriceWithT = Number(data.price); - PriceWithT += +((PriceWithT * trRate).toFixed()); - - //price_Level_2_With_Tax - let price_Level_2_With_Tax = Number(data.price_Level_2); - price_Level_2_With_Tax += +((price_Level_2_With_Tax * trRate).toFixed()); - // - //price_Level_3_With_Tax - let price_Level_3_With_Tax = Number(data.price_Level_3); - price_Level_3_With_Tax += +((price_Level_3_With_Tax * trRate).toFixed()); - setData((prev) => ({ - ...prev, - price_With_Tax: PriceWithT, - - price_Level_2_With_Tax: price_Level_2_With_Tax, - - - price_Level_3_With_Tax: price_Level_3_With_Tax, - taxId: taxDetails.taxId - - })) - } - - // console.log(data.image.length) - const handleSubmit = () => { - if ( - data.name.trim() === '' || - - data.description.trim() === '' || - data.price === '' || - data.image === '' - // data.price_With_Tax === '' || - // data.price_Level_2 === '' || - // data.price_Level_2_With_Tax === '' || - // data.price_Level_3 === '' || - // data.price_Level_3_With_Tax === '' || - // data.imageURL.trim() === '' - ) { - swal({ - title: 'Warning', - text: 'Fill all mandatory fields', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - return - } - setLoading(true) - const formData = new FormData() - formData.append('name', data.name) - - formData.append('description', data.description) - formData.append('price', data.price) - - - - - data.image.forEach((Singleimage) => { - // console.log(Singleimage) - formData.append("image", Singleimage); + reader.onload = () => { + if (reader.readyState === 2) { + setImagesPreview((old) => [...old, reader.result]); + } + }; + reader.readAsDataURL(file); }); + // ----------------------------------------------------------------------------- + setData((prev) => ({ + ...prev, - axios - .post(`/api/product/create/`, formData, { - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'multipart/formdata', - 'Access-Control-Allow-Origin': '*', - }, - }) - .then((res) => { - swal({ - title: 'Added', - text: 'Product added successfully!', - icon: 'success', - button: 'ok', - }) - setLoading(false) - navigate('/products', { replace: true }) - }) - .catch((err) => { - setLoading(false) - const message = err.response?.data?.message ? err.response?.data?.message : 'Something went wrong!' - swal({ - title: 'Warning', - text: message, - icon: 'error', - button: 'Retry', - dangerMode: true, - }) - }) + image: [...data.image, ...e.target.files], + })); + return; + } else { + swal({ + title: "Warning", + text: "Upload jpg, jpeg, png only.", + icon: "error", + button: "Close", + dangerMode: true, + }); + setData((prev) => ({ + ...prev, + imageURL: "", + image: "", + })); + e.target.value = null; + return; + } } + setData((prev) => ({ ...prev, [e.target.id]: e.target.value })); + }; - return ( -
-
-
-
{ + // console.log(Singleimage) + formData.append("image", Singleimage); + }); + + axios + .post(`/api/product/create/`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Added", + text: "Product added successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + navigate("/products", { replace: true }); + }) + .catch((err) => { + setLoading(false); + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + console.log(data); + + return ( +
+
+
+
-
- Add Product -
-
-

-
- -
- - - - -
-
-
+ > +
+ Add Product
-
-
-
-
-
- - handleChange(e)} - /> - {data.name ? <> - {25 - data.name.length} characters left - : <> - - }
- -
- - handleChange(e)} - /> - {data.description ? <> - {100 - data.description.length} characters left - : <> - } -
- - -
- - handleChange(e)} - /> -

Upload jpg, jpeg and png only*

-
-
*Please Upload maximum four images
- - -
- - {imagesPreview.map((image, index) => ( - Product Preview - ))} -
- - -
-
-
-
-
-
- - -
- - handleChange(e)} - - /> -
- - - - - - - - - {allTax.length > 0 &&
- -
- } -
-
-
+
+

+ +
+ + + + +
+
- ) -} +
+
+
+
+
+
+ + handleChange(e)} + /> + {data.name ? ( + <> + + {25 - data.name.length} characters left + + + ) : ( + <> + )}{" "} +
-export default AddProduct +
+ + handleChange(e)} + /> + {data.description ? ( + <> + + {100 - data.description.length} characters left + + + ) : ( + <> + )} +
+ +
+ + handleChange(e)} + /> +

+ Upload jpg, jpeg and png only* +

+
+
+ + *Please Upload maximum four images + +
+ +
+ {imagesPreview.map((image, index) => ( + Product Preview + ))} +
+
+
+
+
+
+
+
+ + handleChange(e)} + /> +
+
+ + +
+ + {allTax.length > 0 && ( +
+ {" "} + +
+ )} +
+
+
+
+
+ ); +}; + +export default AddProduct; diff --git a/src/views/Products/EditProduct.js b/src/views/Products/EditProduct.js index b6d06da..2a1e94d 100644 --- a/src/views/Products/EditProduct.js +++ b/src/views/Products/EditProduct.js @@ -1,414 +1,458 @@ - -import React, { useEffect, useState } from 'react' -import Button from '@material-ui/core/Button' -import { Link, useNavigate, useParams } from 'react-router-dom' -import swal from 'sweetalert' -import axios from 'axios' -import { isAutheticated } from 'src/auth' +import React, { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import swal from "sweetalert"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; // import { WebsiteURL } from '../WebsiteURL' const EditProduct = () => { - const id = useParams()?.id + const id = useParams()?.id; - const token = isAutheticated() - const navigate = useNavigate() - const [data, setData] = useState({ - image: [], - imageURL: [], - name: '', - description: '', + const token = isAutheticated(); + const navigate = useNavigate(); + const [data, setData] = useState({ + image: [], + imageURL: [], + name: "", + description: "", + category: "", - price: '', + price: "", + }); + const [loading, setLoading] = useState(false); + const [allTax, setAllTax] = useState([]); + const [categories, setCatgories] = useState([]); + const [imagesPreview, setImagesPreview] = useState([]); - }) + //get Productdata + const getProduct = async () => { + axios + .get(`/api/product/getOne/${id}`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // console.log(res.data?.product?.image) + // if (res.data?.product?.image) { + // res.data?.product?.image.map(item => { + // }) + // } - const [loading, setLoading] = useState(false) - const [allTax, setAllTax] = useState([]) - - const [imagesPreview, setImagesPreview] = useState([]); - //get Productdata - const getProduct = async () => { - - axios - .get(`/api/product/getOne/${id}`, { - headers: { - 'Access-Control-Allow-Origin': '*', - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - // console.log(res.data?.product?.image) - // if (res.data?.product?.image) { - // res.data?.product?.image.map(item => { - // }) - - // } - - // setImagesPreview(res.data?.product?.image) - setData((prev) => ({ - ...prev, - ...res.data?.product, - imageURL: res.data?.product?.image?.url, - })) - }) - .catch((err) => { }) - } - // console.log(imagesPreview) - useEffect(() => { - getProduct() - }, []) - - - - useEffect(() => { - const getAllTax = async () => { - const res = await axios.get(`/api/tax/view_tax`, { - headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, - }) - if (res.data) { - setAllTax(res.data) - } - } - getAllTax() - - }, [token]) - - const handleChange = (e) => { - - if (e.target.id === 'image') { - if ( - e.target.files[0]?.type === 'image/jpeg' || - e.target.files[0]?.type === 'image/png' || - e.target.files[0]?.type === 'image/jpg' - ) { - if (imagesPreview.length > 3) { - swal({ - title: 'Warning', - text: 'maximum Four image Upload ', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - return - } - // only for file preview------------------------------------ - const files = Array.from(e.target.files); - files.forEach((file) => { - const reader = new FileReader(); - - reader.onload = () => { - if (reader.readyState === 2) { - setImagesPreview((old) => [...old, reader.result]); - - } - }; - - reader.readAsDataURL(file) - }); - // ----------------------------------------------------------------------------- - - - setData((prev) => ({ - ...prev, - - - image: [...data.image, ...e.target.files], - })) - return - } else { - swal({ - title: 'Warning', - text: 'Upload jpg, jpeg, png only.', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - setData((prev) => ({ - ...prev, - imageURL: '', - image: '', - })) - e.target.value = null - return - } - } - setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) - } - - - const TaxRatechange = async (e) => { - let taxDetails = { - name: e.target.value.slice(12, 16), - rate: Number(e.target.value.slice(4, 6)), - - taxId: e.target.value.slice(24) - - } - - let trRate = taxDetails.rate / 100 - let PriceWithT = Number(data.price); - PriceWithT += +((PriceWithT * trRate).toFixed()); - - //price_Level_2_With_Tax - let price_Level_2_With_Tax = Number(data.price_Level_2); - price_Level_2_With_Tax += +((price_Level_2_With_Tax * trRate).toFixed()); - // - //price_Level_3_With_Tax - let price_Level_3_With_Tax = Number(data.price_Level_3); - price_Level_3_With_Tax += +((price_Level_3_With_Tax * trRate).toFixed()); + // setImagesPreview(res.data?.product?.image) setData((prev) => ({ - ...prev, - price_With_Tax: PriceWithT, + ...prev, + ...res.data?.product, + imageURL: res.data?.product?.image?.url, + })); + }) + .catch((err) => {}); + }; + // console.log(imagesPreview) - price_Level_2_With_Tax: price_Level_2_With_Tax, + const getCategories = async () => { + try { + const response = await axios.get("/api/category/getCategories", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); - - price_Level_3_With_Tax: price_Level_3_With_Tax, - taxId: taxDetails.taxId - - })) + if (response.status === 200) { + setCatgories(response?.data?.categories); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); } + }; + useEffect(() => { + getProduct(); + getCategories(); + }, []); - // console.log(data.image.length) - const handleSubmit = () => { - if ( - data.name.trim() === '' || + useEffect(() => { + const getAllTax = async () => { + const res = await axios.get(`/api/tax/view_tax`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res.data) { + setAllTax(res.data); + } + }; + getAllTax(); + }, [token]); - data.description.trim() === '' || - data.price === '' || - data.image === '' - // data.price_With_Tax === '' || - // data.price_Level_2 === '' || - // data.price_Level_2_With_Tax === '' || - // data.price_Level_3 === '' || - // data.price_Level_3_With_Tax === '' || - // data.imageURL.trim() === '' - ) { - swal({ - title: 'Warning', - text: 'Fill all mandatory fields', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - return + const handleChange = (e) => { + if (e.target.id === "image") { + if ( + e.target.files[0]?.type === "image/jpeg" || + e.target.files[0]?.type === "image/png" || + e.target.files[0]?.type === "image/jpg" + ) { + if (imagesPreview.length > 3) { + swal({ + title: "Warning", + text: "maximum Four image Upload ", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; } - setLoading(true) - const formData = new FormData() - formData.append('name', data.name) + // only for file preview------------------------------------ + const files = Array.from(e.target.files); + files.forEach((file) => { + const reader = new FileReader(); - formData.append('description', data.description) - formData.append('price', data.price) - - - - - data.image.forEach((Singleimage) => { - formData.append("image", Singleimage); + reader.onload = () => { + if (reader.readyState === 2) { + setImagesPreview((old) => [...old, reader.result]); + } + }; + reader.readAsDataURL(file); }); + // ----------------------------------------------------------------------------- + setData((prev) => ({ + ...prev, - axios - .put(`/api/product/update/${id}`, formData, { - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'multipart/formdata', - 'Access-Control-Allow-Origin': '*', - }, - }) - .then((res) => { - swal({ - title: 'Updated', - text: 'Product Updated successfully!', - icon: 'success', - button: 'ok', - }) - setLoading(false) - navigate('/products', { replace: true }) - }) - .catch((err) => { - setLoading(false) - const message = err.response?.data?.message ? err.response?.data?.message : 'Something went wrong!' - swal({ - title: 'Warning', - text: message, - icon: 'error', - button: 'Retry', - dangerMode: true, - }) - }) + image: [...data.image, ...e.target.files], + })); + return; + } else { + swal({ + title: "Warning", + text: "Upload jpg, jpeg, png only.", + icon: "error", + button: "Close", + dangerMode: true, + }); + setData((prev) => ({ + ...prev, + imageURL: "", + image: "", + })); + e.target.value = null; + return; + } } + setData((prev) => ({ ...prev, [e.target.id]: e.target.value })); + }; - return ( -
-
-
-
{ + formData.append("image", Singleimage); + }); + + axios + .put(`/api/product/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: "Product Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + navigate("/products", { replace: true }); + }) + .catch((err) => { + setLoading(false); + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + return ( +
+
+
+
-
- Edit Product -
-
-

-
- -
- - - - -
-
-
+ > +
+ Edit Product
-
-
-
-
-
- - handleChange(e)} - /> - {data.name ? <> - {25 - data.name.length} characters left - : <> - - }
- -
- - handleChange(e)} - /> - {data.description ? <> - {100 - data.description.length} characters left - : <> - } -
- - -
- - handleChange(e)} - /> -

Upload jpg, jpeg and png only*

-
-
*Please Upload maximum four images
- - - {imagesPreview.length > 0 &&
- - {imagesPreview.map((image, index) => ( - Product Preview - ))} -
} - - -
-
-
-
-
-
- - -
- - handleChange(e)} - - /> -
- - - - - - - - - {allTax.length > 0 &&
- -
- } -
-
-
+
+

+ +
+ + + + +
+
- ) -} +
+
+
+
+
+
+ + handleChange(e)} + /> + {data.name ? ( + <> + + {25 - data.name.length} characters left + + + ) : ( + <> + )}{" "} +
-export default EditProduct +
+ + handleChange(e)} + /> + {data.description ? ( + <> + + {100 - data.description.length} characters left + + + ) : ( + <> + )} +
+
+ + handleChange(e)} + /> +

+ Upload jpg, jpeg and png only* +

+
+
+ + *Please Upload maximum four images + +
+ + {imagesPreview.length > 0 && ( +
+ {imagesPreview.map((image, index) => ( + Product Preview + ))} +
+ )} +
+
+
+
+
+
+
+ + handleChange(e)} + /> +
+
+ + +
+ + {allTax.length > 0 && ( +
+ {" "} + +
+ )} +
+
+
+
+
+ ); +}; + +export default EditProduct; diff --git a/src/views/Products/ViewProduct.js b/src/views/Products/ViewProduct.js index f7bc654..4ea6287 100644 --- a/src/views/Products/ViewProduct.js +++ b/src/views/Products/ViewProduct.js @@ -1,64 +1,60 @@ - - import axios from "axios"; import React, { useEffect, useState, useCallback, useMemo } from "react"; -import swal from 'sweetalert'; +import swal from "sweetalert"; import { Link, useParams } from "react-router-dom"; import { isAutheticated } from "src/auth"; function ViewProduct() { - const [product, setProduct] = useState([]) - const { id } = useParams(); - const token = isAutheticated(); + const [product, setProduct] = useState([]); + const { id } = useParams(); + const token = isAutheticated(); - const getProduct = useCallback(async () => { - let res = await axios.get( - `/api/product/getOne/${id}`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - console.log(res.data.product) - setProduct(res.data.product) + const getProduct = useCallback(async () => { + let res = await axios.get(`/api/product/getOne/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + setProduct(res.data.product); + }, [token]); - }, [token]); + useEffect(() => { + getProduct(); + }, [getProduct]); - useEffect(() => { - getProduct(); - }, [getProduct]); + //change time formate + function formatAMPM(date) { + var hours = new Date(date).getHours(); + var minutes = new Date(date).getMinutes(); + var ampm = hours >= 12 ? "PM" : "AM"; + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + minutes = minutes < 10 ? "0" + minutes : minutes; + var strTime = hours + ":" + minutes + " " + ampm; + return strTime; + } - - - - - //change time formate - function formatAMPM(date) { - var hours = new Date(date).getHours(); - var minutes = new Date(date).getMinutes(); - var ampm = hours >= 12 ? 'PM' : 'AM'; - hours = hours % 12; - hours = hours ? hours : 12; // the hour '0' should be '12' - minutes = minutes < 10 ? '0' + minutes : minutes; - var strTime = hours + ':' + minutes + ' ' + ampm; - return strTime; - } - - - return ( -
-
-
- {/* */} -
-
-
-

Product

- - {/*
+ return ( +
+
+
+ {/* */} +
+
+
+

Product

+ + + + {/*
  1. CMD-App @@ -66,63 +62,99 @@ function ViewProduct() {
  2. CMD-Category
*/} -
-
-
- {/* */} - -
-
-
-
-
- -
-
- - - - - - - {product.image && } - - - - - {/* - */} - - - - - - - - - -
Id
{product?._id}
Name {product?.name}
image - {product.image.map(i => - - )} -
Description{product?.description}
Base Price₹{product?.price}
Product Time{product?.time}
Location{product?.location}
Created On - {new Date(`${product?.createdAt}`).toDateString()} , {`${formatAMPM(product?.createdAt)}`} -
Updated At - {new Date(`${product?.updatedAt}`).toDateString()} , {`${formatAMPM(product?.updatedAt)}`} -
-
- - - {/* */} -
-
-
-
-
- {/* */} +
+
+ {/* */} + +
+
+
+
+
+
+ + + + {" "} + + + + + + + {product.image && ( + + + + + )} + + + + + + + + + + {/* + */} + + + + + + + + + + + + + + + +
Id +
{product?._id}
+
Name {product?.name}
image + {product.image.map((i) => ( + + ))} +
Description{product?.description}
Base Price₹{product?.price}
Product Time{product?.time}
Location{product?.location}
Created On + {new Date(`${product?.createdAt}`).toDateString()} + + {" "} + , {`${formatAMPM(product?.createdAt)}`} + +
Updated At + {new Date(`${product?.updatedAt}`).toDateString()} + + {" "} + , {`${formatAMPM(product?.updatedAt)}`} + +
Category + {product.category !== "" + ? product.category + : "Category not selected "} +
+
+ + {/* */} +
+
+
+
- ); + {/* */} +
+
+ ); } export default ViewProduct;