feat: implement shop CRUD operations and fix address deletion bug

- Add shop creation, editing, and deletion functionality
- Create AddShopModal and ConfirmDeleteModal components
- Add missing backend PUT/DELETE endpoints for shops
- Fix address field not clearing when edited to empty value

backend/main.py

@@ -94,6 +94,30 @@ def read_shop(shop_id: int, db: Session = Depends(get_db)):
         raise HTTPException(status_code=404, detail="Shop not found")
     return shop
 
+@app.put("/shops/{shop_id}", response_model=schemas.Shop)
+def update_shop(shop_id: int, shop_update: schemas.ShopUpdate, db: Session = Depends(get_db)):
+    shop = db.query(models.Shop).filter(models.Shop.id == shop_id).first()
+    if shop is None:
+        raise HTTPException(status_code=404, detail="Shop not found")
+    
+    update_data = shop_update.dict()
+    for field, value in update_data.items():
+        setattr(shop, field, value)
+    
+    db.commit()
+    db.refresh(shop)
+    return shop
+
+@app.delete("/shops/{shop_id}")
+def delete_shop(shop_id: int, db: Session = Depends(get_db)):
+    shop = db.query(models.Shop).filter(models.Shop.id == shop_id).first()
+    if shop is None:
+        raise HTTPException(status_code=404, detail="Shop not found")
+    
+    db.delete(shop)
+    db.commit()
+    return {"message": "Shop deleted successfully"}
+
 # Shopping Event endpoints
 @app.post("/shopping-events/", response_model=schemas.ShoppingEventResponse)
 def create_shopping_event(event: schemas.ShoppingEventCreate, db: Session = Depends(get_db)):

frontend/src/components/AddShopModal.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react';
+import { shopApi } from '../services/api';
+import { Shop } from '../types';
+
+interface AddShopModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onShopAdded: () => void;
+  editShop?: Shop | null;
+}
+
+interface ShopFormData {
+  name: string;
+  city: string;
+  address?: string;
+}
+
+const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdded, editShop }) => {
+  const [formData, setFormData] = useState<ShopFormData>({
+    name: '',
+    city: '',
+    address: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const isEditMode = !!editShop;
+
+  // Initialize form data when editing
+  useEffect(() => {
+    if (editShop) {
+      setFormData({
+        name: editShop.name,
+        city: editShop.city,
+        address: editShop.address || ''
+      });
+    } else {
+      setFormData({
+        name: '',
+        city: '',
+        address: ''
+      });
+    }
+    setError('');
+  }, [editShop, isOpen]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name.trim() || !formData.city.trim()) {
+      setError('Please fill in all required fields');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+      
+      const trimmedAddress = formData.address?.trim();
+      const shopData = {
+        name: formData.name.trim(),
+        city: formData.city.trim(),
+        address: trimmedAddress && trimmedAddress.length > 0 ? trimmedAddress : null
+      };
+      
+      if (isEditMode && editShop) {
+        await shopApi.update(editShop.id, shopData);
+      } else {
+        await shopApi.create(shopData);
+      }
+      
+      // Reset form
+      setFormData({
+        name: '',
+        city: '',
+        address: ''
+      });
+      
+      onShopAdded();
+      onClose();
+    } catch (err) {
+      setError(`Failed to ${isEditMode ? 'update' : 'add'} shop. Please try again.`);
+      console.error(`Error ${isEditMode ? 'updating' : 'adding'} shop:`, err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    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 Shop' : 'Add New Shop'}
+            </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">
+                Shop 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., Target, Whole Foods, Kroger"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="city" className="block text-sm font-medium text-gray-700">
+                City *
+              </label>
+              <input
+                type="text"
+                id="city"
+                name="city"
+                value={formData.city}
+                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., San Francisco, New York"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+                Address (Optional)
+              </label>
+              <textarea
+                id="address"
+                name="address"
+                value={formData.address}
+                onChange={handleChange}
+                rows={3}
+                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., 123 Main St, Downtown"
+              />
+            </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 Shop' : 'Add Shop')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddShopModal; 

frontend/src/components/ConfirmDeleteModal.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface ConfirmDeleteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  isLoading?: boolean;
+}
+
+const ConfirmDeleteModal: React.FC<ConfirmDeleteModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  isLoading = false
+}) => {
+  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 items-center mb-4">
+            <div className="flex-shrink-0">
+              <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <div className="ml-4">
+              <h3 className="text-lg font-medium text-gray-900">{title}</h3>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <p className="text-sm text-gray-600">{message}</p>
+          </div>
+
+          <div className="flex justify-end space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isLoading}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              disabled={isLoading}
+              className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmDeleteModal; 

frontend/src/components/ShopList.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { Shop } from '../types';
 import { shopApi } from '../services/api';
+import AddShopModal from './AddShopModal';
+import ConfirmDeleteModal from './ConfirmDeleteModal';
 
 const ShopList: React.FC = () => {
   const [shops, setShops] = useState<Shop[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingShop, setEditingShop] = useState<Shop | null>(null);
+  const [deletingShop, setDeletingShop] = useState<Shop | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
 
   useEffect(() => {
     fetchShops();
@@ -24,6 +30,44 @@ const ShopList: React.FC = () => {
     }
   };
 
+  const handleShopAdded = () => {
+    fetchShops(); // Refresh the shops list
+  };
+
+  const handleEditShop = (shop: Shop) => {
+    setEditingShop(shop);
+    setIsModalOpen(true);
+  };
+
+  const handleDeleteShop = (shop: Shop) => {
+    setDeletingShop(shop);
+  };
+
+  const confirmDelete = async () => {
+    if (!deletingShop) return;
+
+    try {
+      setDeleteLoading(true);
+      await shopApi.delete(deletingShop.id);
+      setDeletingShop(null);
+      fetchShops(); // Refresh the shops list
+    } catch (err) {
+      console.error('Error deleting shop:', err);
+      setError('Failed to delete shop. Please try again.');
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingShop(null);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setDeletingShop(null);
+  };
+
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
@@ -36,7 +80,10 @@ const ShopList: React.FC = () => {
     <div className="space-y-6">
       <div className="flex justify-between items-center">
         <h1 className="text-2xl font-bold text-gray-900">Shops</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 Shop
         </button>
       </div>
@@ -63,10 +110,16 @@ const ShopList: React.FC = () => {
                 <div className="flex items-center justify-between mb-4">
                   <h3 className="text-lg font-medium text-gray-900">{shop.name}</h3>
                   <div className="flex space-x-2">
-                    <button className="text-indigo-600 hover:text-indigo-900 text-sm">
+                    <button 
+                      onClick={() => handleEditShop(shop)}
+                      className="text-indigo-600 hover:text-indigo-900 text-sm"
+                    >
                       Edit
                     </button>
-                    <button className="text-red-600 hover:text-red-900 text-sm">
+                    <button 
+                      onClick={() => handleDeleteShop(shop)}
+                      className="text-red-600 hover:text-red-900 text-sm"
+                    >
                       Delete
                     </button>
                   </div>
@@ -102,6 +155,22 @@ const ShopList: React.FC = () => {
           </div>
         )}
       </div>
+
+      <AddShopModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        onShopAdded={handleShopAdded}
+        editShop={editingShop}
+      />
+
+      <ConfirmDeleteModal
+        isOpen={!!deletingShop}
+        onClose={handleCloseDeleteModal}
+        onConfirm={confirmDelete}
+        title="Delete Shop"
+        message={`Are you sure you want to delete "${deletingShop?.name}"? This action cannot be undone.`}
+        isLoading={deleteLoading}
+      />
     </div>
   );
 };

frontend/src/types/index.ts

@@ -30,7 +30,7 @@ export interface Shop {
 export interface ShopCreate {
   name: string;
   city: string;
-  address?: string;
+  address?: string | null;
 }
 
 export interface GroceryInEvent {