Add duplicate button to ProductList

frontend/src/App.tsx

@@ -108,18 +108,6 @@ function Navigation({ onImportExportClick, onAboutClick }: { onImportExportClick
               
               {/* Mobile Action Buttons */}
               <div className="border-t border-gray-200 pt-3 mt-3 space-y-1">
-                <button
-                  onClick={() => {
-                    onImportExportClick();
-                    setIsMobileMenuOpen(false);
-                  }}
-                  className="block w-full text-left px-3 py-2 text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-gray-50"
-                >
-                  <svg className="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                  </svg>
-                  Import / Export
-                </button>
                 <button
                   onClick={() => {
                     onAboutClick();

frontend/src/components/AddProductModal.tsx

@@ -8,6 +8,7 @@ interface AddProductModalProps {
   onClose: () => void;
   onProductAdded: () => void;
   editProduct?: Product | null;
+  duplicateProduct?: Product | null;
 }
 
 interface ProductFormData {
@@ -19,7 +20,7 @@ interface ProductFormData {
   weight_unit: string;
 }
 
-const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onProductAdded, editProduct }) => {
+const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onProductAdded, editProduct, duplicateProduct }) => {
   const [formData, setFormData] = useState<ProductFormData>({
     name: '',
     category_id: undefined,
@@ -64,7 +65,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
     }
   };
 
-  // Populate form when editing
+  // Populate form when editing or duplicating
   useEffect(() => {
     if (editProduct) {
       setFormData({
@@ -75,6 +76,15 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
         weight: editProduct.weight,
         weight_unit: editProduct.weight_unit
       });
+    } else if (duplicateProduct) {
+      setFormData({
+        name: duplicateProduct.name,
+        category_id: duplicateProduct.category_id,
+        brand_id: duplicateProduct.brand_id,
+        organic: duplicateProduct.organic,
+        weight: duplicateProduct.weight,
+        weight_unit: duplicateProduct.weight_unit
+      });
     } else {
       // Reset form for adding new product
       setFormData({
@@ -87,7 +97,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
       });
     }
     setError('');
-  }, [editProduct, isOpen]);
+  }, [editProduct, duplicateProduct, isOpen]);
 
   const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
@@ -187,7 +197,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
         <div className="mt-3">
           <div className="flex justify-between items-center mb-4">
             <h3 className="text-lg font-medium text-gray-900">
-              {editProduct ? 'Edit Product' : 'Add New Product'}
+              {editProduct ? 'Edit Product' : duplicateProduct ? 'Duplicate Product' : 'Add New Product'}
             </h3>
             <button
               onClick={onClose}
@@ -324,8 +334,8 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
                 className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {loading 
-                  ? (editProduct ? 'Updating...' : 'Adding...') 
-                  : (editProduct ? 'Update Product' : 'Add Product')
+                  ? (editProduct ? 'Updating...' : duplicateProduct ? 'Duplicating...' : 'Adding...') 
+                  : (editProduct ? 'Update Product' : duplicateProduct ? 'Duplicate Product' : 'Add Product')
                 }
               </button>
             </div>

frontend/src/components/ProductList.tsx

@@ -14,6 +14,7 @@ const ProductList: React.FC = () => {
   const [editingProduct, setEditingProduct] = useState<Product | null>(null);
   const [deletingProduct, setDeletingProduct] = useState<Product | null>(null);
   const [deleteLoading, setDeleteLoading] = useState(false);
+  const [duplicatingProduct, setDuplicatingProduct] = useState<Product | null>(null);
   const [sortField, setSortField] = useState<string>('name');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
 
@@ -46,6 +47,11 @@ const ProductList: React.FC = () => {
     setIsModalOpen(true);
   };
 
+  const handleDuplicate = (product: Product) => {
+    setDuplicatingProduct(product);
+    setIsModalOpen(true);
+  };
+
   const handleDelete = (product: Product) => {
     setDeletingProduct(product);
   };
@@ -73,6 +79,7 @@ const ProductList: React.FC = () => {
   const handleCloseModal = () => {
     setIsModalOpen(false);
     setEditingProduct(null);
+    setDuplicatingProduct(null);
   };
 
   const handleCloseDeleteModal = () => {
@@ -176,6 +183,7 @@ const ProductList: React.FC = () => {
         <button 
           onClick={() => {
             setEditingProduct(null);
+            setDuplicatingProduct(null);
             setIsModalOpen(true);
           }}
           className="w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 sm:py-2 px-4 rounded text-base sm:text-sm"
@@ -271,6 +279,12 @@ const ProductList: React.FC = () => {
                         >
                           Edit
                         </button>
+                        <button 
+                          onClick={() => handleDuplicate(product)}
+                          className="text-green-600 hover:text-green-900 mr-3"
+                        >
+                          Duplicate
+                        </button>
                         <button 
                           onClick={() => handleDelete(product)}
                           className="text-red-600 hover:text-red-900"
@@ -317,6 +331,12 @@ const ProductList: React.FC = () => {
                     >
                       Edit
                     </button>
+                    <button 
+                      onClick={() => handleDuplicate(product)}
+                      className="flex-1 text-center py-2 px-4 border border-green-300 text-green-600 hover:bg-green-50 rounded-md text-sm font-medium"
+                    >
+                      Duplicate
+                    </button>
                     <button 
                       onClick={() => handleDelete(product)}
                       className="flex-1 text-center py-2 px-4 border border-red-300 text-red-600 hover:bg-red-50 rounded-md text-sm font-medium"
@@ -336,6 +356,7 @@ const ProductList: React.FC = () => {
         onClose={handleCloseModal}
         onProductAdded={handleProductAdded}
         editProduct={editingProduct}
+        duplicateProduct={duplicatingProduct}
       />
 
       <ConfirmDeleteModal