add grocery to product

frontend/src/components/AddGroceryModal.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { groceryApi } from '../services/api';
+import { Grocery } from '../types';
+
+interface AddGroceryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroceryAdded: () => void;
+  editGrocery?: Grocery | null;
+}
+
+interface GroceryFormData {
+  name: string;
+  category: string;
+}
+
+const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGroceryAdded, editGrocery }) => {
+  const [formData, setFormData] = useState<GroceryFormData>({
+    name: '',
+    category: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const categories = [
+    'Produce', 'Meat & Seafood', 'Dairy & Eggs', 'Pantry', 'Frozen', 
+    'Bakery', 'Beverages', 'Snacks', 'Health & Beauty', 'Household', 'Other'
+  ];
+
+  const isEditMode = !!editGrocery;
+
+  // Initialize form data when editing
+  useEffect(() => {
+    if (editGrocery) {
+      setFormData({
+        name: editGrocery.name,
+        category: editGrocery.category
+      });
+    } else {
+      setFormData({
+        name: '',
+        category: ''
+      });
+    }
+    setError('');
+  }, [editGrocery, isOpen]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name.trim() || !formData.category.trim()) {
+      setError('Please fill in all required fields');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+      
+      const groceryData = {
+        name: formData.name.trim(),
+        category: formData.category.trim()
+      };
+      
+      if (isEditMode && editGrocery) {
+        await groceryApi.update(editGrocery.id, groceryData);
+      } else {
+        await groceryApi.create(groceryData);
+      }
+      
+      // Reset form
+      setFormData({
+        name: '',
+        category: ''
+      });
+      
+      onGroceryAdded();
+      onClose();
+    } catch (err) {
+      setError(`Failed to ${isEditMode ? 'update' : 'add'} grocery. Please try again.`);
+      console.error(`Error ${isEditMode ? 'updating' : 'adding'} grocery:`, err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div className="mt-3">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-lg font-medium text-gray-900">
+              {isEditMode ? 'Edit Grocery' : 'Add New Grocery'}
+            </h3>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {error && (
+            <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                Grocery Name *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                required
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="e.g., Milk, Bread, Apples"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="category" className="block text-sm font-medium text-gray-700">
+                Category *
+              </label>
+              <select
+                id="category"
+                name="category"
+                value={formData.category}
+                onChange={handleChange}
+                required
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              >
+                <option value="">Select a category</option>
+                {categories.map(cat => (
+                  <option key={cat} value={cat}>{cat}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                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 ? (isEditMode ? 'Updating...' : 'Adding...') : (isEditMode ? 'Update Grocery' : 'Add Grocery')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddGroceryModal; 

frontend/src/components/AddProductModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { productApi, brandApi } from '../services/api';
-import { Product, Brand } from '../types';
+import { productApi, brandApi, groceryApi } from '../services/api';
+import { Product, Brand, Grocery } from '../types';
 
 interface AddProductModalProps {
   isOpen: boolean;
@@ -11,7 +11,7 @@ interface AddProductModalProps {
 
 interface ProductFormData {
   name: string;
-  category: string;
+  grocery_id?: number;
   brand_id?: number;
   organic: boolean;
   weight?: number;
@@ -21,27 +21,24 @@ interface ProductFormData {
 const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onProductAdded, editProduct }) => {
   const [formData, setFormData] = useState<ProductFormData>({
     name: '',
-    category: '',
+    grocery_id: undefined,
     brand_id: undefined,
     organic: false,
     weight: undefined,
     weight_unit: 'piece'
   });
   const [brands, setBrands] = useState<Brand[]>([]);
+  const [groceries, setGroceries] = useState<Grocery[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
 
-  const categories = [
-    'Produce', 'Meat & Seafood', 'Dairy & Eggs', 'Pantry', 'Frozen', 
-    'Bakery', 'Beverages', 'Snacks', 'Health & Beauty', 'Household', 'Other'
-  ];
-
   const weightUnits = ['piece', 'g', 'kg', 'lb', 'oz', 'ml', 'l'];
 
-  // Fetch brands when modal opens
+  // Fetch brands and groceries when modal opens
   useEffect(() => {
     if (isOpen) {
       fetchBrands();
+      fetchGroceries();
     }
   }, [isOpen]);
 
@@ -54,12 +51,21 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
     }
   };
 
+  const fetchGroceries = async () => {
+    try {
+      const response = await groceryApi.getAll();
+      setGroceries(response.data);
+    } catch (err) {
+      console.error('Error fetching groceries:', err);
+    }
+  };
+
   // Populate form when editing
   useEffect(() => {
     if (editProduct) {
       setFormData({
         name: editProduct.name,
-        category: editProduct.category,
+        grocery_id: editProduct.grocery_id,
         brand_id: editProduct.brand_id,
         organic: editProduct.organic,
         weight: editProduct.weight,
@@ -69,7 +75,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
       // Reset form for adding new product
       setFormData({
         name: '',
-        category: '',
+        grocery_id: undefined,
         brand_id: undefined,
         organic: false,
         weight: undefined,
@@ -81,7 +87,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!formData.name.trim() || !formData.category.trim()) {
+    if (!formData.name.trim() || !formData.grocery_id) {
       setError('Please fill in all required fields with valid values');
       return;
     }
@@ -91,9 +97,12 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
       setError('');
       
       const productData = {
-        ...formData,
+        name: formData.name.trim(),
+        grocery_id: formData.grocery_id!,
+        brand_id: formData.brand_id || undefined,
+        organic: formData.organic,
         weight: formData.weight || undefined,
-        brand_id: formData.brand_id || undefined
+        weight_unit: formData.weight_unit
       };
       
       if (editProduct) {
@@ -107,7 +116,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
       // Reset form
       setFormData({
         name: '',
-        category: '',
+        grocery_id: undefined,
         brand_id: undefined,
         organic: false,
         weight: undefined,
@@ -130,7 +139,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
       ...prev,
       [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked 
              : type === 'number' ? (value === '' ? undefined : Number(value))
-             : name === 'brand_id' ? (value === '' ? undefined : Number(value))
+             : name === 'brand_id' || name === 'grocery_id' ? (value === '' ? undefined : Number(value))
              : value
     }));
   };
@@ -174,25 +183,27 @@ const AddProductModal: React.FC<AddProductModalProps> = ({ isOpen, onClose, onPr
                 onChange={handleChange}
                 required
                 className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                placeholder="e.g., Organic Bananas"
+                placeholder="e.g., Whole Foods Organic Milk"
               />
             </div>
 
             <div>
-              <label htmlFor="category" className="block text-sm font-medium text-gray-700">
-                Category *
+              <label htmlFor="grocery_id" className="block text-sm font-medium text-gray-700">
+                Grocery Type *
               </label>
               <select
-                id="category"
-                name="category"
-                value={formData.category}
+                id="grocery_id"
+                name="grocery_id"
+                value={formData.grocery_id || ''}
                 onChange={handleChange}
                 required
                 className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
               >
-                <option value="">Select a category</option>
-                {categories.map(cat => (
-                  <option key={cat} value={cat}>{cat}</option>
+                <option value="">Select a grocery type</option>
+                {groceries.map(grocery => (
+                  <option key={grocery.id} value={grocery.id}>
+                    {grocery.name} ({grocery.category})
+                  </option>
                 ))}
               </select>
             </div>

frontend/src/components/GroceryList.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Grocery } from '../types';
+import { groceryApi } from '../services/api';
+import AddGroceryModal from './AddGroceryModal';
+import ConfirmDeleteModal from './ConfirmDeleteModal';
+
+const GroceryList: React.FC = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [groceries, setGroceries] = useState<Grocery[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingGrocery, setEditingGrocery] = useState<Grocery | null>(null);
+  const [deletingGrocery, setDeletingGrocery] = useState<Grocery | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    fetchGroceries();
+    
+    // Check if we should auto-open the modal
+    if (searchParams.get('add') === 'true') {
+      setIsModalOpen(true);
+      // Remove the parameter from URL
+      setSearchParams({});
+    }
+  }, [searchParams, setSearchParams]);
+
+  const fetchGroceries = async () => {
+    try {
+      setLoading(true);
+      const response = await groceryApi.getAll();
+      setGroceries(response.data);
+    } catch (err) {
+      setError('Failed to fetch groceries');
+      console.error('Error fetching groceries:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGroceryAdded = () => {
+    fetchGroceries(); // Refresh the groceries list
+  };
+
+  const handleEditGrocery = (grocery: Grocery) => {
+    setEditingGrocery(grocery);
+    setIsModalOpen(true);
+  };
+
+  const handleDeleteGrocery = (grocery: Grocery) => {
+    setDeletingGrocery(grocery);
+  };
+
+  const confirmDelete = async () => {
+    if (!deletingGrocery) return;
+
+    try {
+      setDeleteLoading(true);
+      await groceryApi.delete(deletingGrocery.id);
+      setDeletingGrocery(null);
+      fetchGroceries(); // Refresh the groceries list
+    } catch (err: any) {
+      console.error('Error deleting grocery:', err);
+      // Handle specific error message from backend
+      if (err.response?.status === 400) {
+        setError('Cannot delete grocery: products are still associated with this grocery');
+      } else {
+        setError('Failed to delete grocery. Please try again.');
+      }
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingGrocery(null);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setDeletingGrocery(null);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-gray-900">Groceries</h1>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          Add New Grocery
+        </button>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+          {error}
+        </div>
+      )}
+
+      <div className="bg-white shadow rounded-lg overflow-hidden">
+        {groceries.length === 0 ? (
+          <div className="text-center py-12">
+            <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">No groceries</h3>
+            <p className="mt-1 text-sm text-gray-500">Get started by adding your first grocery item.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+            {groceries.map((grocery) => (
+              <div key={grocery.id} className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-medium text-gray-900">{grocery.name}</h3>
+                  <div className="flex space-x-2">
+                    <button 
+                      onClick={() => handleEditGrocery(grocery)}
+                      className="text-indigo-600 hover:text-indigo-900 text-sm"
+                    >
+                      Edit
+                    </button>
+                    <button 
+                      onClick={() => handleDeleteGrocery(grocery)}
+                      className="text-red-600 hover:text-red-900 text-sm"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+                
+                <div className="space-y-2">
+                  <div className="flex items-center text-sm">
+                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                      {grocery.category}
+                    </span>
+                  </div>
+                  
+                  <div className="flex items-center text-sm text-gray-600">
+                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    Added {new Date(grocery.created_at).toLocaleDateString()}
+                  </div>
+                  
+                  {grocery.updated_at && (
+                    <div className="flex items-center text-sm text-gray-600">
+                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      Updated {new Date(grocery.updated_at).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <AddGroceryModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        onGroceryAdded={handleGroceryAdded}
+        editGrocery={editingGrocery}
+      />
+
+      <ConfirmDeleteModal
+        isOpen={!!deletingGrocery}
+        onClose={handleCloseDeleteModal}
+        onConfirm={confirmDelete}
+        title="Delete Grocery"
+        message={`Are you sure you want to delete "${deletingGrocery?.name}"? This action cannot be undone.`}
+        isLoading={deleteLoading}
+      />
+    </div>
+  );
+};
+
+export default GroceryList; 

frontend/src/components/ProductList.tsx

@@ -123,7 +123,7 @@ const ProductList: React.FC = () => {
                   Name
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Category
+                  Grocery
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Brand
@@ -148,9 +148,8 @@ const ProductList: React.FC = () => {
                     </div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
-                      {product.category}
-                    </span>
+                    <div className="text-sm text-gray-900">{product.grocery.name}</div>
+                    <div className="text-xs text-gray-500">{product.grocery.category}</div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                     {product.brand ? product.brand.name : '-'}