Add Firebase emulator support and debug panel for document reprocessing; remove unused formatDocumentData.js

Author: Novapool

frontend/src/components/DocumentProcessingStatus.tsx

@@ -274,6 +274,27 @@ const DocumentProcessingStatus: React.FC<DocumentProcessingStatusProps> = ({ onP
         </button>
       )}
 
+      {process.env.NODE_ENV === 'development' && (
+        <div style={styles.debugPanel}>
+          <h3>Debug Panel</h3>
+          <button 
+            onClick={() => {
+              const functions = getFunctions();
+              const reprocessDocuments = httpsCallable(functions, 'reprocessDocuments');
+              setStatus('Force reprocessing documents...');
+              reprocessDocuments({}).then(result => {
+                setStatus(`Reprocessing complete: ${JSON.stringify((result.data as any).stats)}`);
+              }).catch(err => {
+                setError(`Reprocessing failed: ${err.message}`);
+              });
+            }}
+            style={styles.debugButton}
+          >
+            Force Reprocess Documents
+          </button>
+        </div>
+      )}
+
       {documents.length > 0 && (
         <div style={styles.documentsList}>
           <h3>Document Details</h3>
@@ -335,6 +356,23 @@ const DocumentProcessingStatus: React.FC<DocumentProcessingStatusProps> = ({ onP
 };
 
 const styles = {
+  debugPanel: {
+    backgroundColor: '#f8f9fa',
+    padding: '15px',
+    marginBottom: '20px',
+    borderRadius: '4px',
+    border: '1px solid #dee2e6'
+  },
+  debugButton: {
+    backgroundColor: '#dc3545',
+    color: 'white',
+    border: 'none',
+    padding: '8px 16px',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    marginTop: '10px'
+  },
   container: {
     padding: '20px',
     backgroundColor: '#f9f9f9',

frontend/src/firebase/config.ts

@@ -1,6 +1,8 @@
 import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
-import { getFunctions } from 'firebase/functions';
+import { getAuth, connectAuthEmulator } from 'firebase/auth';
+import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
+import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
+import { getStorage, connectStorageEmulator } from 'firebase/storage';
 
 const firebaseConfig = {
   apiKey: "AIzaSyBCStWgpFwe5aTJvZO1V1t_dIG3NOxfYts",
@@ -13,6 +15,18 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 
-// Get Auth instance
+// Get service instances
 export const auth = getAuth(app);
 export const functions = getFunctions(app);
+export const firestore = getFirestore(app);
+export const storage = getStorage(app);
+
+// Connect to emulators in development mode
+if (process.env.NODE_ENV === 'development') {
+  // Use { disableWarnings: true } to prevent the "running in emulator mode" banner
+  connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+  connectFunctionsEmulator(functions, 'localhost', 5001);
+  connectFirestoreEmulator(firestore, 'localhost', 8080);
+  connectStorageEmulator(storage, 'localhost', 9199);
+  console.log('Using Firebase emulators');
+}