sync assessment with calc via context

.eslintrc.json

@@ -35,7 +35,8 @@
     },
     {
       "files": [
-        "src/app/components/factorSlider/FactorSlider.tsx"
+        "src/app/components/factorSlider/FactorSlider.tsx",
+        "src/app/context/AssessmentContext.tsx"
       ],
       "rules": {
         "react-refresh/only-export-components": "off"

src/app/app.tsx

@@ -18,15 +18,18 @@
 
 import { Route, Routes } from 'react-router-dom';
 import Home from './pages/home';
+import { AssessmentProvider } from './context/AssessmentContext';
 
 export function App() {
   return (
-    <Routes>
-      <Route
-        path="/"
-        Component={Home}
-      />
-    </Routes>
+    <AssessmentProvider>
+      <Routes>
+        <Route
+          path="/"
+          Component={Home}
+        />
+      </Routes>
+    </AssessmentProvider>
   );
 }
 

src/app/components/calculator/Calculator.tsx

@@ -10,8 +10,7 @@ export interface CalculatorProps {
 }
 
 function Calculator(props: CalculatorProps) {
-
-  const [factors, setFactors] = useState<Factor[]>(initialFactors || []); // Add fallback
+  const [factors, setFactors] = useState<Factor[]>(() => (initialFactors || []).map(f => ({ ...f })));
 
   const handleScoreChange = (index: number, value: number) => {
     const newFactors = [...factors];
@@ -27,6 +26,10 @@ function Calculator(props: CalculatorProps) {
     }
   };
 
+  const handleAssessmentReset = () => {
+    setFactors((initialFactors || []).map(f => ({ ...f })));
+  };
+
   const calculateCompositeScore = () => {
     return (factors || []).reduce((acc, factor) => acc + factor.score * factor.weight, 0);
   };
@@ -73,6 +76,7 @@ function Calculator(props: CalculatorProps) {
           <CompositeScoreDisplay 
             score={calculateCompositeScore()} 
             onQuestionnaireScoreUpdate={handleQuestionnaireScoreUpdate}
+            onAssessmentReset={handleAssessmentReset}
           />
 
           {/* Maturity Level Indicator */}

src/app/components/compositeScoreDisplay/CompositeScoreDisplay.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render } from '../../../test-utils';
 
 import CompositeScoreDisplay from './CompositeScoreDisplay';
 

src/app/components/compositeScoreDisplay/CompositeScoreDisplay.tsx

@@ -2,79 +2,41 @@ import React, { useState } from 'react';
 import { Button } from 'primereact/button';
 import styles from './CompositeScoreDisplay.module.scss';
 import QuestionnaireDialog from '../questionnaire/QuestionnaireDialog';
-
-interface AssessmentResult {
-  sectionName: string;
-  score: number;
-  maxScore: number;
-  answers: { questionId: string; questionText: string; selectedAnswer: string; pointsEarned: number; maxPoints: number }[];
-  completedAt: Date;
-}
+import { useAssessmentContext } from '../../context/AssessmentContext';
 
 export interface CompositeScoreDisplayProps {
   score: number;
   onQuestionnaireScoreUpdate?: (sectionIndex: number, score: number) => void;
+  /**
+   * Optional callback invoked after the guided assessment has been reset
+   * and the assessment dialog has been closed. Use this to perform any
+   * additional cleanup or UI updates when starting a new assessment.
+   */
+  onAssessmentReset?: () => void;
+  'data-testid'?: string;
 }
 
-const CompositeScoreDisplay: React.FC<CompositeScoreDisplayProps> = ({ score, onQuestionnaireScoreUpdate }) => {
+const CompositeScoreDisplay: React.FC<CompositeScoreDisplayProps> = ({
+  score,
+  onQuestionnaireScoreUpdate,
+  onAssessmentReset,
+  'data-testid': testId,
+}) => {
   const [open, setOpen] = useState(false);
-  const [assessmentResults, setAssessmentResults] = useState<AssessmentResult[]>([]);
-  const [isAssessmentComplete, setIsAssessmentComplete] = useState(false);
-
-  const handleAssessmentComplete = (results: AssessmentResult[]) => {
-    setAssessmentResults(results);
-    setIsAssessmentComplete(true);
-  };
-
-  const generateQuickReport = () => {
-    if (!isAssessmentComplete) return;
-
-    const totalScore = assessmentResults.reduce((sum, result) => sum + result.score, 0);
-    const maxTotalScore = assessmentResults.length * 25;
-    const overallPercentage = (totalScore / maxTotalScore) * 100;
-
-    let maturityLevel = 'Developing';
-    if (overallPercentage >= 80) maturityLevel = 'Expert';
-    else if (overallPercentage >= 65) maturityLevel = 'Advanced';
-    else if (overallPercentage >= 45) maturityLevel = 'Intermediate';
-    else if (overallPercentage >= 25) maturityLevel = 'Basic';
-
-    const quickReport = `# PolydraIQ™ Assessment Summary
-
-**Overall Score:** ${totalScore.toFixed(1)} / ${maxTotalScore} (${overallPercentage.toFixed(1)}%)
-**Maturity Level:** ${maturityLevel}
-**Completed:** ${new Date().toLocaleDateString()}
-
-${assessmentResults.map(result => `
-**${result.sectionName}:** ${result.score.toFixed(1)}/25 (${((result.score / 25) * 100).toFixed(1)}%)`).join('')}
-
-*Complete assessment details available in the Guided Assessment dialog.*`;
+  const [dialogKey, setDialogKey] = useState(0);
+  const { isAssessmentComplete, printReport, resetAssessment } = useAssessmentContext();
 
-    const printWindow = window.open('', '_blank');
-    if (printWindow) {
-      printWindow.document.write(`
-        <html>
-          <head>
-            <title>PolydraIQ Assessment Summary</title>
-            <style>
-              body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 40px auto; padding: 20px; }
-              h1 { color: #0ea5e9; border-bottom: 2px solid #0ea5e9; padding-bottom: 10px; }
-              strong { color: #1f2937; }
-              @media print { body { margin: 0; padding: 15px; } }
-            </style>
-          </head>
-          <body>
-            <pre style="white-space: pre-wrap; font-family: inherit;">${quickReport.replace(/\\*/g, '').replace(/#/g, '')}</pre>
-          </body>
-        </html>
-      `);
-      printWindow.document.close();
-      printWindow.print();
+  const handleResetAssessment = () => {
+    resetAssessment();
+    setDialogKey((k) => k + 1);
+    setOpen(false);
+    if (onAssessmentReset) {
+      onAssessmentReset();
     }
   };
 
   return (
-    <div className="composite-score">
+    <div className="composite-score" data-testid={testId}>
       <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', alignItems: 'center', marginBottom: '20px' }}>
         <Button 
           icon="pi pi-compass" 
@@ -88,12 +50,12 @@ ${assessmentResults.map(result => `
           icon="pi pi-file-pdf"
           size="small"
           rounded
-          label="Quick Report"
+          label="Print Report"
           outlined={!isAssessmentComplete}
           severity={isAssessmentComplete ? "success" : "secondary"}
           disabled={!isAssessmentComplete}
-          onClick={generateQuickReport}
-          tooltip={isAssessmentComplete ? "Generate printable summary" : "Complete the Guided Assessment first"}
+          onClick={printReport}
+          tooltip={isAssessmentComplete ? "Print assessment report" : "Complete the Guided Assessment first"}
           style={{ 
             opacity: isAssessmentComplete ? 1 : 0.7,
             borderWidth: isAssessmentComplete ? '2px' : '1px'
@@ -102,15 +64,33 @@ ${assessmentResults.map(result => `
       </div>
       <h2>Composite Quality Score: {score.toFixed(2)}</h2>
       {isAssessmentComplete && (
-        <div style={{ color: '#059669', fontSize: '14px', fontWeight: '500' }}>
-          ✅ Assessment Completed - Detailed report available in Guided Assessment
+        <div style={{ marginTop: '4px' }}>
+          <div style={{ color: '#059669', fontSize: '14px', fontWeight: 500 }}>
+            ✅ Assessment Completed - Detailed report available in Guided Assessment
+          </div>
+          <button
+            type="button"
+            onClick={handleResetAssessment}
+            style={{
+              marginTop: '4px',
+              padding: 0,
+              border: 'none',
+              background: 'none',
+              color: '#2563eb',
+              fontSize: '12px',
+              cursor: 'pointer',
+              textDecoration: 'underline',
+            }}
+          >
+            Start a new assessment
+          </button>
         </div>
       )}
       <QuestionnaireDialog 
+        key={dialogKey}
         open={open} 
         onClose={() => setOpen(false)} 
         onScoreUpdate={onQuestionnaireScoreUpdate}
-        onAssessmentComplete={handleAssessmentComplete}
       />
     </div>
   );