Footer

src/components/Footer/Footer.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
+
+function DatabaseFooter() {
+  const [dbVersion, setDbVersion] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Fetch DB version on mount
+  useEffect(() => {
+    fetchDatabaseVersion()
+      .then(data => setDbVersion(data.database_version))
+      .catch(err => setError(err.message));
+  }, []);
+
+  const handleImport = async () => {
+    setImporting(true);
+    setError(null);
+    try {
+      await triggerFullImport();
+      // After import, refresh DB version
+      const data = await fetchDatabaseVersion();
+      setDbVersion(data.database_version);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '0',
+        right: '0',
+        padding: '0.5rem 1rem',
+        background: '#f0f0f0',
+        borderTopLeftRadius: '8px',
+        border: '1px solid #ccc',
+        fontSize: '0.9rem',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem'
+      }}
+    >
+      <span>DB Version: {dbVersion || 'Loading...'}</span>
+      <button onClick={handleImport} disabled={importing}>
+        {importing ? 'Importing...' : 'Full Import'}
+      </button>
+      {error && <span style={{ color: 'red' }}>{error}</span>}
+    </div>
+  );
+}
+
+export default DatabaseFooter;

src/pages/HomePage.jsx

@@ -4,6 +4,7 @@ import CardRow from '../components/CardRow/CardRow';
 import SearchBar from '../components/SearchBar/SearchBar';
 import { CardContext } from '../store/CardContext';
 import { fetchCards, fetchCardImage } from '../services/api';
+import DatabaseFooter from '../components/DatabaseFooter/DatabaseFooter';
 
 // Debounce hook
 function useDebouncedValue(value, delay = 250) {
@@ -87,6 +88,7 @@ function HomePage() {
           <p>Click a card to see its image</p>
         )}
       </div>
+      <DatabaseFooter />
     </div>
   );
 }