feat(ca): Add analysis loading feature and update documentation to v5-Stable

competitor-analysis-app/components/InputForm.tsx

@@ -1,15 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { translations } from '../translations';
 
 interface InputFormProps {
     onStart: (startUrl: string, maxCompetitors: number, marketScope: string, language: 'de' | 'en') => void;
+    onLoadAnalysis: (state: any) => void;
 }
 
-const InputForm: React.FC<InputFormProps> = ({ onStart }) => {
+const InputForm: React.FC<InputFormProps> = ({ onStart, onLoadAnalysis }) => {
     const [startUrl, setStartUrl] = useState('https://www.mobilexag.de');
     const [maxCompetitors, setMaxCompetitors] = useState(12);
     const [marketScope, setMarketScope] = useState('DACH');
     const [language, setLanguage] = useState<'de' | 'en'>('de');
+    const fileInputRef = useRef<HTMLInputElement>(null);
 
     const t = translations[language];
 
@@ -18,6 +20,27 @@ const InputForm: React.FC<InputFormProps> = ({ onStart }) => {
         onStart(startUrl, maxCompetitors, marketScope, language);
     };
 
+    const handleLoadClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const json = JSON.parse(e.target?.result as string);
+                    onLoadAnalysis(json);
+                } catch (error) {
+                    console.error("Error parsing JSON:", error);
+                    alert("Fehler beim Lesen der Datei. Ist es eine valide JSON-Datei?");
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+
     const inputClasses = "w-full bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text border border-light-accent dark:border-brand-accent rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-highlight placeholder-light-subtle dark:placeholder-brand-light";
 
     return (
@@ -81,13 +104,34 @@ const InputForm: React.FC<InputFormProps> = ({ onStart }) => {
                         </button>
                     </div>
                 </div>
-                <div className="pt-4">
+                <div className="pt-4 space-y-4">
                     <button
                         type="submit"
                         className="w-full bg-brand-highlight hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105"
                     >
                         {t.inputForm.submitButton}
                     </button>
+                    
+                    <div className="relative flex py-2 items-center">
+                        <div className="flex-grow border-t border-light-accent dark:border-brand-accent"></div>
+                        <span className="flex-shrink-0 mx-4 text-light-subtle dark:text-brand-light text-sm">{t.inputForm.loadAnalysisLabel}</span>
+                        <div className="flex-grow border-t border-light-accent dark:border-brand-accent"></div>
+                    </div>
+
+                    <input 
+                        type="file" 
+                        ref={fileInputRef} 
+                        onChange={handleFileChange} 
+                        accept=".json" 
+                        className="hidden" 
+                    />
+                    <button
+                        type="button"
+                        onClick={handleLoadClick}
+                        className="w-full bg-light-accent hover:bg-gray-300 dark:bg-brand-accent dark:hover:bg-gray-600 text-light-text dark:text-white font-bold py-2 px-4 rounded-lg shadow transition duration-300"
+                    >
+                        {t.inputForm.loadButton}
+                    </button>
                 </div>
             </form>
         </div>