Admin Product DashBoard

52 |

54 | 55 | 56 | 57 |

59 | {/*show success or error message*/} 60 | {message && 61 | ( 62 |

63 | {message.text} 64 |

65 | ) 66 | } 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | {products.map((product, index) =>( 82 | 83 | 86 | 87 | 88 | 89 | 90 | 91 | 100 | 101 | )) 102 | } 103 | 104 | 105 |

Image	Product Name	Product Desc	Category	Size	Price	Actions
84 \| 85 \|	{product.prodname}	{product.proddesc}	{product.category.charAt(0).toUpperCase() + product.category.slice(1)}	{product.size}	${product.price["$numberDecimal"]}	92 \| 93 \| 96 \| 99 \|

106 |

98 |

99 | {productId ? 'Edit Product' : 'Add New Product'}

100 |

101 | 102 | View Products 103 | 104 |

105 |

106 |

107 | Product Name 108 | 109 |

110 |

111 | Product Description 112 |

115 |                 </div>
116 |                 <div className='mb-4 grid grid-cols-2 gap-2'>
117 |                     <label className='text-sm font-medium text-gray-700'>Category</label>
118 |                     <select
119 |                         name='category'
120 |                         value={newProduct.category}
121 |                         onChange={handleChange}
122 |                         className={formControlClass} required
123 |                         >   
124 |                             <option value=''>Select a category</option>
125 |                             <option value='men'>Men</option>
126 |                             <option value='women'>Women</option>
127 |                             <option value='kids'>Kids</option>      
128 |                     </select>                  
129 |                 </div>
130 |                 <div className='mb-4 grid grid-cols-2 gap-2'>
131 |                     <label className='text-sm font-medium text-gray-700'>Size</label>
132 |                     <select name="size" value ={newProduct.size} onChange={handleChange} className={formControlClass} required>
133 |                         <option value=''>Select size</option>
134 |                         <option value='S'>S</option>
135 |                         <option value='M'>M</option>
136 |                         <option value='L'>L</option>
137 |                         <option value='XL'>XL</option>
138 |                     </select>
139 |                 </div>
140 |                 <div className='mb-4 grid grid-cols-2 gap-2'>
141 |                     <label className='text-sm font-medium text-gray-700'>Price</label>
142 |                     <input type="number" name="price" value={newProduct.price["$numberDecimal"]} onChange={handleChange} className={formControlClass} step="0.01" required/>
143 |                     {error.price && <span className="text-red-500 text-sm">{error.price}</span>}
144 |                 </div>
145 |                 <div className='mb-4 grid grid-cols-2 gap-2'>
146 |                     <label className='text-sm font-medium text-gray-700'>Image URL</label>
147 |                     <input type="text" name="image" value={newProduct.image} onChange ={handleChange} className={formControlClass} required/>                    
148 |                 </div>
149 |                 {error.general && <div className="text-red-500 text-sm mb-4">{error.general}</div>}
150 | 
151 |                  {/* Show success message */}
152 |                 {successMessage && <div className="text-green-500 text-sm mb-4">{successMessage}</div>}
153 | 
154 | 
155 |                 <div className='flex justify-end'>
156 |                     <button type="submit" className='bg-black text-white p-2 rounded-md w-32 h-8 mr-4 flex items-center justify-center cursor-pointer text-xs'>
157 |                     {productId ? 'Update Product' : 'Add Product'}</button>
158 |                 </div>
159 | 
160 |             </form>
161 |         </div>
162 |     )
163 | }
164 | 
165 | 
166 | export default AddOrEditProduct;

--------------------------------------------------------------------------------
/src/pages/Cart.jsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import {useState, useEffect} from 'react'
  3 | import './Cart.css'
  4 | import { PencilIcon, TrashIcon } from '@heroicons/react/solid';
  5 | 
  6 | function Cart({ cartItems, setCart }){
  7 |    
  8 |     const [subtotal, setSubtotal] = useState(0);
  9 |     const [totalTax, setTotalTax] = useState(0);
 10 | 
 11 |       //Handle adding quantity
 12 |       const handleAdd = (index) =>{
 13 |         const updatedCart =[...cartItems];
 14 |         updatedCart[index].quantity = (updatedCart[index].quantity || 1) + 1;
 15 |         setCart (updatedCart);       
 16 |       }
 17 |       //handle subtracting quantity
 18 |       const handleSubtract = (index) =>{
 19 |         const updatedCart =[...cartItems];
 20 |         if(updatedCart[index].quantity >1){
 21 |             updatedCart[index].quantity -= 1;
 22 |             setCart(updatedCart);            
 23 |         }       
 24 |         
 25 |       }
 26 |       //handle delete from cart
 27 |       const handleDelete = (index) =>{
 28 |         const updatedCart= cartItems.filter((items, i) => i !== index);
 29 |         setCart(updatedCart);        
 30 |       }
 31 | 
 32 |       useEffect(() =>{
 33 |         let calculatedSubTotal = 0;
 34 |         let calculatedTax =0;
 35 | 
 36 |         cartItems.forEach((item)=>{
 37 |             const itemPrice= parseFloat(item.price["$numberDecimal"])
 38 |             const itemQuantity = isNaN(item.quantity) || item.quantity <= 0 ? 1 : item.quantity; 
 39 | 
 40 |             console.log(item.price["$numberDecimal"]);
 41 |             console.log(itemQuantity);
 42 | 
 43 |            //calculate total price and tax  
 44 |             if (!isNaN(itemPrice) && itemQuantity > 0) { 
 45 |                 const itemTotal = itemPrice * itemQuantity;
 46 |                 const itemTax = itemTotal * (item.tax/100)
 47 | 
 48 |                 calculatedSubTotal += itemTotal;
 49 |                 calculatedTax += itemTax;
 50 |             }
 51 |         },[cartItems]);
 52 | 
 53 |         setSubtotal(calculatedSubTotal);
 54 |         setTotalTax(calculatedTax);
 55 |       },[cartItems])
 56 |    
 57 |     return(
 58 |       
 59 |             <div className ="cart-container">
 60 |                 <h2 class="text-xl font-semibold  text-blue-900">SHOPPING CART</h2>
 61 |                 <hr/>
 62 |                 {cartItems.length === 0 ? (
 63 |                     <div className="flex flex-col items-center justify-center text-center">
 64 |                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-16 h-16 text-gray-500">
 65 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l3.6 7.2 1.2 2.4h6.4l1.2-2.4L19 3h2M6 3l3 6h9l3-6m-5 12v2m-1-2H7v2h7m0-2v-2H7v2h7zm1 2v2m0-2h3m0 0l1-3M4 6l1 3m0 0h2m0 0l1-3m7 13v-2H7z" />
 66 |                         </svg>
 67 |                             <p className="text-sm font-semibold text-gray-600 mt-4">Your cart is empty!</p>
 68 |                     </div>
 69 |                                         ):(
 70 |                     <ul>
 71 |                         {cartItems.map((item, index) => (
 72 |                             <li key={index} className='cart-item'>
 73 |                                 <div className='cart-item-image-container'>
 74 |                                     <img src={item.image} alt ={item.prodname} className="cart-item-image"/>
 75 |                                 </div>
 76 |                                 <div className='cart-item-details-container'>
 77 |                                     <div className='cart-item-details'>
 78 |                                         <p className="carttitle">{item.prodname}</p>
 79 |                                         <p className="cartprice">Price: ${parseFloat(item.price["$numberDecimal"]).toFixed(2)}</p>
 80 |                                         <p className="carttitle">Size: {item.size}</p>
 81 |                                     </div>
 82 |                                     <div className="cart-item-quantity">
 83 |                                         <button className ="quantity-btn" onClick={() => handleSubtract(index)}>-</button>
 84 |                                         <input
 85 |                                             type="number"
 86 |                                             value={item.quantity || 1}  // Directly set the value from state
 87 |                                             min="1"
 88 |                                             className="quantity-input w-8"
 89 |                                             onChange={(e) => {
 90 |                                             const updatedCart = [...cartItems];
 91 |                                             const newQuantity = parseInt(e.target.value, 10) || 1;  // Ensure valid number
 92 |                                             updatedCart[index].quantity = newQuantity;
 93 |                                             setCart(updatedCart);                                            
 94 |                                             }}
 95 |                                         />
 96 |                                         <button className ="quantity-btn" onClick={() => handleAdd(index)}>+</button> 
 97 |                                         <span className='cartprice'>
 98 |                                         
 99 |                                             {
100 |                                                  (() => {
101 |                                                     const price = parseFloat(item.price["$numberDecimal"]);
102 |                                                     const quantity = isNaN(item.quantity) || item.quantity <=0 ? 1 : item.quantity;
103 |                                                     const total = isNaN(price) || price <= 0 || !item.price["$numberDecimal"]
104 |                                                       ? '0.00'
105 |                                                       : (price * quantity).toFixed(2);  //quantity * price
106 |                                                     return `$${total}`;
107 |                                                   })()
108 |                                               }
109 |                                         </span> 
110 |                                         <div>
111 |                                             <button onClick={() => handleDelete(index)}>
112 |                                                 <TrashIcon className="h-5 w-5 text-yellow-900 hover:text-red-700 cursor-pointer" />
113 |                                             </button>
114 |                                         </div>                                   
115 |                                     </div>
116 |                                                                      
117 |                                     
118 |                                 </div>
119 |                                                                 
120 |                             </li>
121 |                         ))}
122 |                     </ul>
123 |                 )}
124 |                   <div className="cart-summary">
125 |                     <div className='subtotal-container'>
126 |                         <div>
127 |                             <p className='textsubtotal'>Subtotal:</p>
128 |                         </div>
129 |                         <div>
130 |                             <p className='cart-subtotal'>${subtotal.toFixed(2)} USD</p>
131 |                         </div>
132 |                     </div>
133 |                      
134 |                     <p className='carttitle'>Taxes and shipping calculated at checkout</p>
135 |                     <div className="terms-container carttitle">
136 |                         <input type="checkbox" id="terms" />
137 |                         <label htmlFor="terms">I agree with the terms and conditions.</label>
138 |                     </div>
139 |                     <div className='checkout-button-container '>                        
140 |                         <button className="bg-black text-white p-2 rounded-md w-32 h-8 flex items-center justify-center cursor-pointer text-xs">Check Out</button>
141 |                     </div>
142 |                 </div>
143 |             </div>        
144 |     );
145 | }
146 | 
147 | export default Cart;

--------------------------------------------------------------------------------

No matching products found for your selection.

VIVA Fashions

38 | Cannot find related articles for your search!! 39 |

Loading....

25 | {product.prodname} 26 |

28 | {`Size - ${product.size}`} 29 |

31 | { 32 | product.price && product.price["$numberDecimal"] 33 | ? `$${product.price["$numberDecimal"]}` 34 | : ""} 35 |

Loading...

Admin Product DashBoard

99 | {productId ? 'Edit Product' : 'Add New Product'}