Add version number and fix warnings

frontend/src/components/AboutModal.tsx

@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from 'react';
+import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
+import { VERSION } from '../config/version';
+
+// Use the same API base URL as other API calls
+const API_BASE_URL = process.env.NODE_ENV === 'production' 
+  ? '/api'  // Use nginx proxy in production
+  : 'http://localhost:8000';  // Direct backend connection in development
+
+interface AboutModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
+  // Use body scroll lock when modal is open
+  useBodyScrollLock(isOpen);
+
+  const [backendVersion, setBackendVersion] = useState<string>('Loading...');
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchBackendVersion();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  const fetchBackendVersion = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/`);
+      const data = await response.json();
+      setBackendVersion(data.version || 'Unknown');
+    } catch (error) {
+      console.error('Error fetching backend version:', error);
+      setBackendVersion('Error loading');
+    }
+  };
+
+  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"
+      onClick={(e) => {
+        // Close modal if clicking on backdrop
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div 
+        className="relative top-20 mx-auto p-6 border w-full max-w-md shadow-lg rounded-md bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mt-3">
+          <div className="flex justify-between items-center mb-6">
+            <h3 className="text-xl font-semibold text-gray-900">
+              About {VERSION.name}
+            </h3>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 p-1"
+            >
+              <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>
+
+          <div className="space-y-4">
+            {/* App Info */}
+            <div className="text-center mb-6">
+              <div className="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                </svg>
+              </div>
+              <p className="text-gray-600 text-sm">
+                A comprehensive grocery shopping tracker to manage your shopping events, products, and expenses.
+              </p>
+            </div>
+
+            {/* Version Information */}
+            <div className="bg-gray-50 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">Version Information</h4>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Frontend:</span>
+                  <span className="font-mono text-gray-900">v{VERSION.frontend}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Backend:</span>
+                  <span className="font-mono text-gray-900">v{backendVersion}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Build Date:</span>
+                  <span className="font-mono text-gray-900">{VERSION.buildDate}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Features */}
+            <div className="bg-blue-50 rounded-lg p-4">
+              <h4 className="font-medium text-blue-900 mb-3">Key Features</h4>
+              <ul className="text-sm text-blue-800 space-y-1">
+                <li>• Track shopping events and expenses</li>
+                <li>• Manage products, brands, and categories</li>
+                <li>• Mobile-responsive design</li>
+                <li>• Import/Export data functionality</li>
+                <li>• Real-time calculations and analytics</li>
+              </ul>
+            </div>
+
+            {/* Technical Info */}
+            <div className="bg-green-50 rounded-lg p-4">
+              <h4 className="font-medium text-green-900 mb-3">Technology Stack</h4>
+              <div className="text-sm text-green-800 space-y-1">
+                <div><strong>Frontend:</strong> React, TypeScript, Tailwind CSS</div>
+                <div><strong>Backend:</strong> FastAPI, Python, SQLite</div>
+                <div><strong>Mobile:</strong> Responsive web design</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Close Button */}
+          <div className="flex justify-end pt-6 mt-6 border-t border-gray-200">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutModal; 

frontend/src/components/AddBrandModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { brandApi } from '../services/api';
 import { Brand } from '../types';
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@@ -40,27 +40,7 @@ const AddBrandModal: React.FC<AddBrandModalProps> = ({ isOpen, onClose, onBrandA
     setError('');
   }, [editBrand, isOpen]);
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      } else if (event.key === 'Enter' && !event.shiftKey && !loading) {
-        event.preventDefault();
-        if (formData.name.trim()) {
-          handleSubmit(event as any);
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, formData, loading, onClose]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData.name.trim()) {
       setError('Please enter a brand name');
@@ -94,7 +74,31 @@ const AddBrandModal: React.FC<AddBrandModalProps> = ({ isOpen, onClose, onBrandA
     } finally {
       setLoading(false);
     }
-  };
+  }, [isEditMode, editBrand, formData.name, onBrandAdded, onClose]);
+
+  // Keyboard event handling
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) return;
+      
+      if (event.key === 'Escape') {
+        onClose();
+      } else if (event.key === 'Enter' && !loading) {
+        event.preventDefault();
+        if (formData.name.trim()) {
+          handleSubmit(event as any);
+        }
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, formData.name, loading, onClose, handleSubmit]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;

frontend/src/components/AddGroceryCategoryModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { GroceryCategory, GroceryCategoryCreate } from '../types';
 import { groceryCategoryApi } from '../services/api';
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@@ -28,25 +28,7 @@ const AddGroceryCategoryModal: React.FC<AddGroceryCategoryModalProps> = ({ categ
     }
   }, [category]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      } else if (event.key === 'Enter' && !event.shiftKey && !loading) {
-        event.preventDefault();
-        if (formData.name.trim()) {
-          handleSubmit(event as any);
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [formData, loading, onClose]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
     setMessage('');
@@ -70,7 +52,25 @@ const AddGroceryCategoryModal: React.FC<AddGroceryCategoryModalProps> = ({ categ
     } finally {
       setLoading(false);
     }
-  };
+  }, [isEditMode, category, formData, onClose]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      } else if (event.key === 'Enter' && !event.shiftKey && !loading) {
+        event.preventDefault();
+        if (formData.name.trim()) {
+          handleSubmit(event as any);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [formData, loading, onClose, handleSubmit]);
 
   return (
     <div 

frontend/src/components/AddShopModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { shopApi, brandApi, brandInShopApi } from '../services/api';
 import { Shop, Brand, BrandInShop } from '../types';
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
@@ -86,31 +86,7 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
     setError('');
   }, [editShop, isOpen]);
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      } else if (event.key === 'Enter' && !event.shiftKey && !loading) {
-        // Only trigger submit if not in a textarea and form is valid
-        const target = event.target as HTMLElement;
-        if (target.tagName !== 'TEXTAREA') {
-          event.preventDefault();
-          if (formData.name.trim() && formData.city.trim()) {
-            handleSubmit(event as any);
-          }
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, formData, loading, onClose]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData.name.trim() || !formData.city.trim()) {
       setError('Please fill in all required fields');
@@ -131,7 +107,7 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
       let shopId: number;
       
       if (isEditMode && editShop) {
-        const updatedShop = await shopApi.update(editShop.id, shopData);
+        await shopApi.update(editShop.id, shopData);
         shopId = editShop.id;
       } else {
         const newShop = await shopApi.create(shopData);
@@ -180,7 +156,28 @@ const AddShopModal: React.FC<AddShopModalProps> = ({ isOpen, onClose, onShopAdde
     } finally {
       setLoading(false);
     }
-  };
+  }, [isEditMode, editShop, formData, onShopAdded, onClose]);
+
+  // Keyboard event handling
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) return;
+      
+      if (event.key === 'Escape') {
+        onClose();
+      } else if (event.key === 'Enter' && !event.shiftKey && !loading) {
+        event.preventDefault();
+        if (formData.name.trim() && formData.city.trim()) {
+          handleSubmit(event as any);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, formData, loading, onClose, handleSubmit]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;

frontend/src/components/GroceryCategoryList.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { GroceryCategory } from '../types';
 import { groceryCategoryApi } from '../services/api';
 import AddGroceryCategoryModal from './AddGroceryCategoryModal';

frontend/src/components/ShopList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Shop, BrandInShop } from '../types';
 import { shopApi, brandInShopApi } from '../services/api';
@@ -21,6 +21,36 @@ const ShopList: React.FC = () => {
   const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
   const [shopBrands, setShopBrands] = useState<Record<number, BrandInShop[]>>({});
 
+  const loadShopBrands = useCallback(async (shopId: number) => {
+    try {
+      const response = await brandInShopApi.getByShop(shopId);
+      setShopBrands(prev => ({
+        ...prev,
+        [shopId]: response.data
+      }));
+    } catch (err) {
+      console.error('Error loading shop brands:', err);
+    }
+  }, []);
+
+  const fetchShops = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await shopApi.getAll();
+      setShops(response.data);
+      
+      // Load brands for all shops
+      for (const shop of response.data) {
+        loadShopBrands(shop.id);
+      }
+    } catch (err) {
+      setError('Failed to fetch shops');
+      console.error('Error fetching shops:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [loadShopBrands]);
+
   useEffect(() => {
     fetchShops();
     
@@ -30,7 +60,7 @@ const ShopList: React.FC = () => {
       // Remove the parameter from URL
       setSearchParams({});
     }
-  }, [searchParams, setSearchParams]);
+  }, [searchParams, setSearchParams, fetchShops]);
 
   // Handle clicking outside popup to close it
   useEffect(() => {
@@ -51,36 +81,6 @@ const ShopList: React.FC = () => {
     };
   }, [showBrandsPopup]);
 
-  const fetchShops = async () => {
-    try {
-      setLoading(true);
-      const response = await shopApi.getAll();
-      setShops(response.data);
-      
-      // Load brands for all shops
-      for (const shop of response.data) {
-        loadShopBrands(shop.id);
-      }
-    } catch (err) {
-      setError('Failed to fetch shops');
-      console.error('Error fetching shops:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadShopBrands = async (shopId: number) => {
-    try {
-      const response = await brandInShopApi.getByShop(shopId);
-      setShopBrands(prev => ({
-        ...prev,
-        [shopId]: response.data
-      }));
-    } catch (err) {
-      console.error('Error loading shop brands:', err);
-    }
-  };
-
   const handleShopAdded = () => {
     fetchShops(); // Refresh the shops list
   };
@@ -123,7 +123,6 @@ const ShopList: React.FC = () => {
     const brands = shopBrands[shop.id] || [];
     if (brands.length === 0) return;
     
-    const rect = mouseEvent.currentTarget.getBoundingClientRect();
     const popupWidth = 300;
     const popupHeight = 200;
     
@@ -156,7 +155,6 @@ const ShopList: React.FC = () => {
     if (brands.length === 0) return;
     
     mouseEvent.stopPropagation();
-    const rect = mouseEvent.currentTarget.getBoundingClientRect();
     const popupWidth = 300;
     const popupHeight = 200;