fix add grocery

frontend/src/components/AddGroceryModal.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import { groceryApi } from '../services/api';
+
+interface AddGroceryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroceryAdded: () => void;
+}
+
+interface GroceryFormData {
+  name: string;
+  price: number;
+  category: string;
+  organic: boolean;
+  weight?: number;
+  weight_unit: string;
+}
+
+const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGroceryAdded }) => {
+  const [formData, setFormData] = useState<GroceryFormData>({
+    name: '',
+    price: 0,
+    category: '',
+    organic: false,
+    weight: undefined,
+    weight_unit: 'piece'
+  });
+  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'];
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name.trim() || !formData.category.trim() || formData.price <= 0) {
+      setError('Please fill in all required fields with valid values');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+      
+      const groceryData = {
+        ...formData,
+        weight: formData.weight || undefined
+      };
+      
+      await groceryApi.create(groceryData);
+      
+      // Reset form
+      setFormData({
+        name: '',
+        price: 0,
+        category: '',
+        organic: false,
+        weight: undefined,
+        weight_unit: 'piece'
+      });
+      
+      onGroceryAdded();
+      onClose();
+    } catch (err) {
+      setError('Failed to add grocery. Please try again.');
+      console.error('Error adding grocery:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked 
+             : type === 'number' ? (value === '' ? undefined : Number(value))
+             : 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">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">
+                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., Organic Bananas"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="price" className="block text-sm font-medium text-gray-700">
+                Price ($) *
+              </label>
+              <input
+                type="number"
+                id="price"
+                name="price"
+                value={formData.price || ''}
+                onChange={handleChange}
+                required
+                min="0"
+                step="0.01"
+                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="0.00"
+              />
+            </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="grid grid-cols-2 gap-3">
+              <div>
+                <label htmlFor="weight" className="block text-sm font-medium text-gray-700">
+                  Weight/Quantity
+                </label>
+                <input
+                  type="number"
+                  id="weight"
+                  name="weight"
+                  value={formData.weight || ''}
+                  onChange={handleChange}
+                  min="0"
+                  step="0.01"
+                  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="1"
+                />
+              </div>
+              <div>
+                <label htmlFor="weight_unit" className="block text-sm font-medium text-gray-700">
+                  Unit
+                </label>
+                <select
+                  id="weight_unit"
+                  name="weight_unit"
+                  value={formData.weight_unit}
+                  onChange={handleChange}
+                  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"
+                >
+                  {weightUnits.map(unit => (
+                    <option key={unit} value={unit}>{unit}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="organic"
+                name="organic"
+                checked={formData.organic}
+                onChange={handleChange}
+                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+              />
+              <label htmlFor="organic" className="ml-2 block text-sm text-gray-900">
+                Organic
+              </label>
+            </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 ? 'Adding...' : 'Add Grocery'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddGroceryModal; 

frontend/src/components/GroceryList.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Grocery } from '../types';
 import { groceryApi } from '../services/api';
+import AddGroceryModal from './AddGroceryModal';
 
 const GroceryList: React.FC = () => {
   const [groceries, setGroceries] = useState<Grocery[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     fetchGroceries();
@@ -36,6 +38,10 @@ const GroceryList: React.FC = () => {
     }
   };
 
+  const handleGroceryAdded = () => {
+    fetchGroceries(); // Refresh the list
+  };
+
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
@@ -48,7 +54,10 @@ const GroceryList: React.FC = () => {
     <div className="space-y-6">
       <div className="flex justify-between items-center">
         <h1 className="text-2xl font-bold text-gray-900">Groceries</h1>
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <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>
@@ -135,6 +144,12 @@ const GroceryList: React.FC = () => {
           </table>
         )}
       </div>
+
+      <AddGroceryModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onGroceryAdded={handleGroceryAdded}
+      />
     </div>
   );
 };