Add version number and fix warnings

backend/main.py

@@ -5,14 +5,15 @@ from sqlalchemy import text
 from typing import List
 import models, schemas
 from database import engine, get_db
+from version import __version__, __app_name__, __description__
 
 # Create database tables
 models.Base.metadata.create_all(bind=engine)
 
 app = FastAPI(
-    title="Product Tracker API",
+    title=__app_name__,
-    description="API for tracking product prices and shopping events",
+    description=__description__,
-    version="1.0.0"
+    version=__version__
 )
 
 # CORS middleware for React frontend
@@ -92,7 +93,7 @@ def build_shopping_event_response(event: models.ShoppingEvent, db: Session) -> s
 # Root endpoint
 @app.get("/")
 def read_root():
-    return {"message": "Product Tracker API", "version": "1.0.0"}
+    return {"message": __app_name__, "version": __version__, "name": "Groceries Tracker Backend"}
 
 # Product endpoints
 @app.post("/products/", response_model=schemas.Product)

backend/version.py

@@ -0,0 +1,8 @@
+"""
+Version configuration for Groceries Tracker Backend
+Single source of truth for version information
+"""
+
+__version__ = "1.0.0"
+__app_name__ = "Groceries Tracker API"
+__description__ = "API for tracking grocery shopping events, products, and expenses" 

frontend/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "product-tracker-frontend",
+  "name": "groceries-tracker-frontend",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@types/node": "^20.10.5",

frontend/src/App.tsx

@@ -7,8 +7,9 @@ import ShoppingEventList from './components/ShoppingEventList';
 import BrandList from './components/BrandList';
 import GroceryCategoryList from './components/GroceryCategoryList';
 import ImportExportModal from './components/ImportExportModal';
+import AboutModal from './components/AboutModal';
 
-function Navigation({ onImportExportClick }: { onImportExportClick: () => void }) {
+function Navigation({ onImportExportClick, onAboutClick }: { onImportExportClick: () => void; onAboutClick: () => void }) {
   const location = useLocation();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   
@@ -74,8 +75,8 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
             </button>
           </div>
 
-          {/* Import/Export Button */}
+          {/* Desktop Action Buttons */}
-          <div className="hidden sm:flex items-center">
+          <div className="hidden sm:flex items-center space-x-2">
             <button
               onClick={onImportExportClick}
               className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-100 hover:text-white hover:bg-blue-700 rounded-md transition-colors"
@@ -85,6 +86,15 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
               </svg>
               <span className="hidden sm:inline">Import / Export</span>
             </button>
+            <button
+              onClick={onAboutClick}
+              className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-100 hover:text-white hover:bg-blue-700 rounded-md transition-colors"
+            >
+              <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span className="hidden sm:inline">About</span>
+            </button>
           </div>
         </div>
 
@@ -95,6 +105,34 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
               {navLinks.map(({ path, label }) => (
                 <NavLink key={path} path={path} label={label} mobile />
               ))}
+              
+              {/* 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();
+                    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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  About
+                </button>
+              </div>
             </div>
           </div>
         )}
@@ -105,6 +143,7 @@ function Navigation({ onImportExportClick }: { onImportExportClick: () => void }
 
 function App() {
   const [showImportExportModal, setShowImportExportModal] = useState(false);
+  const [showAboutModal, setShowAboutModal] = useState(false);
 
   const handleDataChanged = () => {
     // This will be called when data is imported, but since we're at the app level,
@@ -115,7 +154,10 @@ function App() {
   return (
     <Router>
       <div className="min-h-screen bg-gray-50">
-        <Navigation onImportExportClick={() => setShowImportExportModal(true)} />
+        <Navigation 
+          onImportExportClick={() => setShowImportExportModal(true)} 
+          onAboutClick={() => setShowAboutModal(true)}
+        />
         <main className="py-6 md:py-10">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <Routes>
@@ -134,6 +176,11 @@ function App() {
           onClose={() => setShowImportExportModal(false)}
           onDataChanged={handleDataChanged}
         />
+        
+        <AboutModal
+          isOpen={showAboutModal}
+          onClose={() => setShowAboutModal(false)}
+        />
       </div>
     </Router>
   );

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(() => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-    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) => {
     e.preventDefault();
     if (!formData.name.trim()) {
       setError('Please enter a brand name');
@@ -94,8 +74,32 @@ 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;
     setFormData(prev => ({

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 handleSubmit = useCallback(async (e: React.FormEvent) => {
-    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) => {
     e.preventDefault();
     setLoading(true);
     setMessage('');
@@ -70,8 +52,26 @@ 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 
       className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"

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(() => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-    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) => {
     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,8 +156,29 @@ 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;
     setFormData(prev => ({

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;
     

frontend/src/config/version.ts

@@ -0,0 +1,7 @@
+import packageJson from '../../package.json';
+
+export const VERSION = {
+  frontend: packageJson.version,
+  buildDate: new Date().toISOString().split('T')[0], // YYYY-MM-DD format
+  name: "Groceries Tracker"
+};