updating frontend code

frontend/src/components/ProductForm.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { X, ChevronLeft, Plus, Trash2 } from "lucide-react";
 
 const ProductForm = ({
   editingProduct,
@@ -50,63 +51,64 @@ const ProductForm = ({
   };
 
   return (
-    <div className="bg-white border-2 border-gray-200 rounded-md p-6 shadow-lg">
+    <div className="bg-white border border-gray-200 shadow-md p-6">
       {/* Back Button */}
       <button
         onClick={onCancel}
-        className="mb-4 text-sm text-emerald-600 hover:text-emerald-800 flex items-center font-medium"
+        className="mb-4 text-blue-600 hover:text-blue-800 flex items-center gap-1"
       >
-        ← Back to Listings
+        <ChevronLeft size={16} />
+        <span>Back to Listings</span>
       </button>
 
-      <h3 className="text-xl font-bold text-gray-800 mb-6 border-b-2 border-gray-100 pb-3">
+      <h3 className="text-xl font-bold text-gray-800 mb-6 border-b border-gray-200 pb-3">
         {editingProduct?.id ? "Edit Your Product" : "List a New Product"}
       </h3>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {/* Product Name */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
             Product Name
           </label>
           <input
             type="text"
-            value={editingProduct.name}
+            value={editingProduct.name || ""}
             onChange={(e) =>
               setEditingProduct({ ...editingProduct, name: e.target.value })
             }
-            className="w-full px-4 py-2 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
           />
         </div>
 
         {/* Price */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
             Price ($)
           </label>
           <input
             type="number"
-            value={editingProduct.price}
+            value={editingProduct.price || ""}
             onChange={(e) =>
               setEditingProduct({
                 ...editingProduct,
                 price: e.target.value,
               })
             }
-            className="w-full px-4 py-2 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
           />
         </div>
 
-        {/* Categories - Dropdown with Add button */}
+        {/* Categories */}
         <div className="md:col-span-2">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
             Categories
           </label>
           <div className="flex gap-2">
             <select
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
-              className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+              className="flex-1 px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
             >
               <option value="" disabled>
                 Select a category
@@ -125,61 +127,62 @@ const ProductForm = ({
               type="button"
               onClick={addCategory}
               disabled={!selectedCategory}
-              className="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
+              className="px-3 py-2 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
             >
-              Add
+              <Plus size={16} />
+              <span>Add</span>
             </button>
           </div>
 
           {/* Selected Categories */}
           {(editingProduct.categories || []).length > 0 ? (
-            <div className="mt-3 flex flex-wrap gap-2">
+            <div className="mt-2 flex flex-wrap gap-2">
               {(editingProduct.categories || []).map((category) => (
                 <span
                   key={category}
-                  className="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-emerald-100 text-emerald-800"
+                  className="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800"
                 >
                   {category}
                   <button
                     type="button"
                     onClick={() => removeCategory(category)}
-                    className="ml-2 text-emerald-600 hover:text-emerald-800"
+                    className="ml-1 text-blue-600 hover:text-blue-800"
                   >
-                    ×
+                    <X size={14} />
                   </button>
                 </span>
               ))}
             </div>
           ) : (
-            <p className="text-xs text-gray-500 mt-2">
+            <p className="text-xs text-gray-500 mt-1">
               Please select at least one category
             </p>
           )}
         </div>
 
-        {/* Status - Updated to Unsold/Sold */}
+        {/* Status */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
             Status
           </label>
           <select
-            value={editingProduct.status}
+            value={editingProduct.status || "Unsold"}
             onChange={(e) =>
               setEditingProduct({
                 ...editingProduct,
                 status: e.target.value,
               })
             }
-            className="w-full px-4 py-2 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
           >
             <option value="Unsold">Unsold</option>
             <option value="Sold">Sold</option>
           </select>
         </div>
 
-        {/* Description - New Field */}
+        {/* Description */}
         <div className="md:col-span-2">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
             Description
           </label>
           <textarea
@@ -191,19 +194,17 @@ const ProductForm = ({
               })
             }
             rows="4"
-            className="w-full px-4 py-2 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
             placeholder="Describe your product in detail..."
           ></textarea>
         </div>
 
-        {/* Simplified Image Upload */}
+        {/* Image Upload */}
         <div className="md:col-span-2">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Product Images{" "}
-            <span className="text-gray-500 text-sm">(Max 5)</span>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Product Images <span className="text-gray-500">(Max 5)</span>
           </label>
 
-          {/* Simple file input */}
           <input
             type="file"
             accept="image/*"
@@ -212,7 +213,7 @@ const ProductForm = ({
               const files = Array.from(e.target.files).slice(0, 5);
               setEditingProduct((prev) => ({
                 ...prev,
-                images: [...prev.images, ...files].slice(0, 5),
+                images: [...(prev.images || []), ...files].slice(0, 5),
               }));
             }}
             className="hidden"
@@ -220,30 +221,41 @@ const ProductForm = ({
           />
           <label
             htmlFor="image-upload"
-            className="block w-full p-3 border-2 border-dashed border-emerald-200 bg-emerald-50 rounded-md text-center cursor-pointer hover:bg-emerald-100 transition-colors"
+            className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
           >
-            <span className="text-emerald-700 font-medium">
+            <span className="text-blue-600 font-medium">
               Click to upload images
             </span>
           </label>
 
           {/* Image previews */}
-          {editingProduct.images.length > 0 && (
-            <div className="mt-4">
-              <p className="text-sm text-gray-600 mb-2">
-                {editingProduct.images.length}{" "}
-                {editingProduct.images.length === 1 ? "image" : "images"}{" "}
-                selected
-              </p>
-              <div className="flex flex-wrap gap-3">
+          {(editingProduct.images || []).length > 0 && (
+            <div className="mt-3">
+              <div className="flex justify-between items-center mb-2">
+                <p className="text-sm text-gray-600">
+                  {editingProduct.images.length}{" "}
+                  {editingProduct.images.length === 1 ? "image" : "images"}{" "}
+                  selected
+                </p>
+                <button
+                  onClick={() =>
+                    setEditingProduct((prev) => ({ ...prev, images: [] }))
+                  }
+                  className="text-sm text-red-600 hover:text-red-800 flex items-center gap-1"
+                >
+                  <Trash2 size={14} />
+                  <span>Clear all</span>
+                </button>
+              </div>
+              <div className="flex flex-wrap gap-2">
                 {editingProduct.images.map((img, idx) => (
                   <div
                     key={idx}
-                    className="relative w-20 h-20 border-2 border-gray-200 rounded-md overflow-hidden"
+                    className="relative w-20 h-20 border border-gray-200 overflow-hidden"
                   >
                     <img
                       src={URL.createObjectURL(img)}
-                      alt={`Product image ${idx + 1}`}
+                      alt={`Product ${idx + 1}`}
                       className="w-full h-full object-cover"
                     />
                     <button
@@ -256,22 +268,11 @@ const ProductForm = ({
                         }));
                       }}
                       className="absolute top-0 right-0 bg-white bg-opacity-80 w-6 h-6 flex items-center justify-center text-gray-700 hover:text-red-600"
-                      title="Remove image"
                     >
-                      &times;
+                      <X size={14} />
                     </button>
                   </div>
                 ))}
-                {editingProduct.images.length > 0 && (
-                  <button
-                    onClick={() =>
-                      setEditingProduct((prev) => ({ ...prev, images: [] }))
-                    }
-                    className="text-sm text-red-600 hover:text-red-800 mt-2"
-                  >
-                    Clear all
-                  </button>
-                )}
               </div>
             </div>
           )}
@@ -279,16 +280,16 @@ const ProductForm = ({
       </div>
 
       {/* Actions */}
-      <div className="mt-8 flex justify-end gap-4 border-t-2 border-gray-100 pt-4">
+      <div className="mt-6 flex justify-end gap-3 border-t border-gray-200 pt-4">
         <button
           onClick={onCancel}
-          className="bg-gray-100 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-200 font-medium"
+          className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200"
         >
           Cancel
         </button>
         <button
           onClick={onSave}
-          className="bg-emerald-600 text-white px-8 py-2 rounded-md hover:bg-emerald-700 font-medium"
+          className="bg-blue-600 text-white px-6 py-2 hover:bg-blue-700"
         >
           {editingProduct.id ? "Update Product" : "Add Product"}
         </button>