From 17f6cc915520ab91fe4ab5f2fdcdbbc1dff50920 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 24 Feb 2026 03:52:42 +0000
Subject: [PATCH] Fix broken imports and types in SurveyWizard

Co-authored-by: alfieprojectsdev <11991855+alfieprojectsdev@users.noreply.github.com>
---
 field-logic/package-lock.json               |   7 +
 field-logic/package.json                    |   1 +
 field-logic/src/components/SurveyWizard.tsx | 271 ++++++++++----------
 3 files changed, 145 insertions(+), 134 deletions(-)

diff --git a/field-logic/package-lock.json b/field-logic/package-lock.json
index 9c7e74f..dcb9689 100644
--- a/field-logic/package-lock.json
+++ b/field-logic/package-lock.json
@@ -13,6 +13,7 @@
         "@types/react": "^19.2.10",
         "@types/react-dom": "^19.2.3",
         "astro": "^5.16.16",
+        "dexie": "^4.3.0",
         "idb": "^8.0.3",
         "nanostores": "^1.1.0",
         "react": "^19.2.4",
@@ -3084,6 +3085,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dexie": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.3.0.tgz",
+      "integrity": "sha512-5EeoQpJvMKHe6zWt/FSIIuRa3CWlZeIl6zKXt+Lz7BU6RoRRLgX9dZEynRfXrkLcldKYCBiz7xekTEylnie1Ug==",
+      "license": "Apache-2.0"
+    },
     "node_modules/diff": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
diff --git a/field-logic/package.json b/field-logic/package.json
index b47e2ed..59b8c41 100644
--- a/field-logic/package.json
+++ b/field-logic/package.json
@@ -14,6 +14,7 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "astro": "^5.16.16",
+    "dexie": "^4.3.0",
     "idb": "^8.0.3",
     "nanostores": "^1.1.0",
     "react": "^19.2.4",
diff --git a/field-logic/src/components/SurveyWizard.tsx b/field-logic/src/components/SurveyWizard.tsx
index 4f7bc72..24a2e45 100644
--- a/field-logic/src/components/SurveyWizard.tsx
+++ b/field-logic/src/components/SurveyWizard.tsx
@@ -1,144 +1,147 @@
-import React, { useState, useEffect } from 'react';
-import { SurveyEngine } from '../lib/engine';
-import type { SurveyDefinition, SurveyNode } from '../lib/types';
-import '../styles/main.css';
+import React, { useState, useEffect } from "react";
+import { SurveyEngine } from "../lib/SurveyEngine";
+import type { SurveyDefinition, SurveyNode } from "../types/schema";
+import "../styles/main.css";
 
 interface Props {
-    definition: SurveyDefinition;
+  definition: SurveyDefinition;
 }
 
 export const SurveyWizard: React.FC<Props> = ({ definition }) => {
-    const [engine] = useState(() => new SurveyEngine(definition));
-    const [currentNode, setCurrentNode] = useState<SurveyNode | null>(null);
-    const [inputValue, setInputValue] = useState<any>(null);
-    const [isStarted, setIsStarted] = useState(false);
-
-    useEffect(() => {
-        // Start the engine
-        try {
-            const startNode = engine.start();
-            setCurrentNode(startNode);
-            setIsStarted(true);
-        } catch (e) {
-            console.error(e);
-        }
-    }, [engine]);
-
-    const handleNext = () => {
-        if (currentNode?.type === 'summary') {
-            alert('Survey Completed! Data would be saved here.');
-            return;
-        }
-
-        const nextNode = engine.next(inputValue);
-        setCurrentNode(nextNode);
-        setInputValue(null); // Reset input for next question
-    };
-
-    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    const handleChoiceSelect = (value: any) => {
-        setInputValue(value);
-    };
-
-    if (!currentNode) {
-        if (isStarted) return <div className="survey-container">Survey Completed</div>;
-        return <div className="survey-container">Loading...</div>;
+  const [engine] = useState(() => new SurveyEngine(definition));
+  const [currentNode, setCurrentNode] = useState<SurveyNode | null>(null);
+  const [inputValue, setInputValue] = useState<any>(null);
+  const [isStarted, setIsStarted] = useState(false);
+
+  useEffect(() => {
+    // Start the engine
+    try {
+      const startNode = engine.start();
+      setCurrentNode(startNode);
+      setIsStarted(true);
+    } catch (e) {
+      console.error(e);
     }
+  }, [engine]);
 
-    const renderContent = () => {
-        const { type, content } = currentNode;
-
-        switch (type) {
-            case 'info':
-                return (
-                    <div>
-                        <h1>{content.label || 'Information'}</h1>
-                        <p>{content.text}</p>
-                    </div>
-                );
-
-            case 'text':
-                return (
-                    <div>
-                        <h1>{content.question}</h1>
-                        {content.helper_text && <p className="helper">{content.helper_text}</p>}
-                        <div className="input-group">
-                            <input
-                                type="text"
-                                value={inputValue || ''}
-                                onChange={handleTextChange}
-                                placeholder="Type your answer..."
-                                autoFocus
-                            />
-                        </div>
-                    </div>
-                );
-
-            case 'single_choice':
-                return (
-                    <div>
-                        <h1>{content.question}</h1>
-                        <div className="choices">
-                            {content.options?.map((opt) => (
-                                <button
-                                    key={opt.value}
-                                    className={`choice-btn ${inputValue === opt.value ? 'selected' : ''}`}
-                                    onClick={() => handleChoiceSelect(opt.value)}
-                                >
-                                    {opt.label}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                );
-
-            case 'boolean':
-                return (
-                    <div>
-                        <h1>{content.question}</h1>
-                        <div className="choices">
-                            <button
-                                className={`choice-btn ${inputValue === true ? 'selected' : ''}`}
-                                onClick={() => handleChoiceSelect(true)}
-                            >
-                                {content.label_true || 'Yes'}
-                            </button>
-                            <button
-                                className={`choice-btn ${inputValue === false ? 'selected' : ''}`}
-                                onClick={() => handleChoiceSelect(false)}
-                            >
-                                {content.label_false || 'No'}
-                            </button>
-                        </div>
-                    </div>
-                );
-
-            case 'summary':
-                return (
-                    <div>
-                        <h1>Survey Complete</h1>
-                        <p>{content.text}</p>
-                    </div>
-                );
-
-            default:
-                return <div>Unknown node type: {type}</div>;
-        }
-    };
-
-    return (
-        <div className="survey-container">
-            {renderContent()}
-
-            <div className="actions">
-                {/* Disable next if required and no input (simplified validation) */}
-                <button className="primary" onClick={handleNext}>
-                    {currentNode.type === 'summary' ? 'Finish' : 'Next'}
+  const handleNext = () => {
+    if (currentNode?.type === "summary") {
+      alert("Survey Completed! Data would be saved here.");
+      return;
+    }
+
+    const nextNode = engine.submitAnswer(inputValue);
+    setCurrentNode(nextNode);
+    setInputValue(null); // Reset input for next question
+  };
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleChoiceSelect = (value: any) => {
+    setInputValue(value);
+  };
+
+  if (!currentNode) {
+    if (isStarted)
+      return <div className="survey-container">Survey Completed</div>;
+    return <div className="survey-container">Loading...</div>;
+  }
+
+  const renderContent = () => {
+    const { type, content } = currentNode;
+
+    switch (type) {
+      case "info":
+        return (
+          <div>
+            <h1>{content.label || "Information"}</h1>
+            <p>{content.text}</p>
+          </div>
+        );
+
+      case "text":
+        return (
+          <div>
+            <h1>{content.question}</h1>
+            {content.helper_text && (
+              <p className="helper">{content.helper_text}</p>
+            )}
+            <div className="input-group">
+              <input
+                type="text"
+                value={inputValue || ""}
+                onChange={handleTextChange}
+                placeholder="Type your answer..."
+                autoFocus
+              />
+            </div>
+          </div>
+        );
+
+      case "single_choice":
+        return (
+          <div>
+            <h1>{content.question}</h1>
+            <div className="choices">
+              {content.options?.map((opt) => (
+                <button
+                  key={opt.value}
+                  className={`choice-btn ${inputValue === opt.value ? "selected" : ""}`}
+                  onClick={() => handleChoiceSelect(opt.value)}
+                >
+                  {opt.label}
                 </button>
+              ))}
             </div>
-        </div>
-    );
+          </div>
+        );
+
+      case "boolean":
+        return (
+          <div>
+            <h1>{content.question}</h1>
+            <div className="choices">
+              <button
+                className={`choice-btn ${inputValue === true ? "selected" : ""}`}
+                onClick={() => handleChoiceSelect(true)}
+              >
+                {content.label_true || "Yes"}
+              </button>
+              <button
+                className={`choice-btn ${inputValue === false ? "selected" : ""}`}
+                onClick={() => handleChoiceSelect(false)}
+              >
+                {content.label_false || "No"}
+              </button>
+            </div>
+          </div>
+        );
+
+      case "summary":
+        return (
+          <div>
+            <h1>Survey Complete</h1>
+            <p>{content.text}</p>
+          </div>
+        );
+
+      default:
+        return <div>Unknown node type: {type}</div>;
+    }
+  };
+
+  return (
+    <div className="survey-container">
+      {renderContent()}
+
+      <div className="actions">
+        {/* Disable next if required and no input (simplified validation) */}
+        <button className="primary" onClick={handleNext}>
+          {currentNode.type === "summary" ? "Finish" : "Next"}
+        </button>
+      </div>
+    </div>
+  );
 };