Initial commit

src/components/SharedAssessmentView.jsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { calculateTotal, getAchievement, getPatTypeColor } from '../utils/patCalculations'
+
+const formatDate = (value) => {
+  if (!value) return '—'
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.getTime())) return value
+  return new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(parsed)
+}
+
+const formatValue = (value) => {
+  if (value === '' || value === null || typeof value === 'undefined') return '—'
+  return value
+}
+
+const ValueRow = ({ label, values = [] }) => (
+  <div className="flex flex-wrap items-center gap-2">
+    <span className="min-w-10 text-sm font-semibold text-gray-600 dark:text-gray-300">{label}</span>
+    {values.map((value, index) => (
+      <span
+        key={`${label}-${index}`}
+        className="min-w-12 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-center text-sm font-medium text-gray-800 dark:text-gray-100"
+      >
+        {formatValue(value)}
+      </span>
+    ))}
+  </div>
+)
+
+export default function SharedAssessmentView({ assessment }) {
+  if (!assessment) return null
+
+  const totalPoints = calculateTotal(assessment.exercises || [])
+  const achievement = getAchievement(assessment.patType, totalPoints)
+
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-950 p-6 text-gray-900 dark:text-gray-100">
+      <div className="max-w-5xl mx-auto">
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-800">
+          <div className="flex justify-between items-start gap-4 mb-6 flex-wrap">
+            <div>
+              <p className="text-xs uppercase tracking-[0.2em] text-sky-700 dark:text-sky-300">Geteilter Test</p>
+              <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mt-2">
+                {assessment.name || 'PAT Test'}
+              </h1>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                Dieser Link zeigt nur diesen einen Test im Nur-Lesen-Modus.
+              </p>
+            </div>
+
+            <span
+              className={`px-4 py-2 rounded-full text-sm font-semibold ${getPatTypeColor(assessment.patType)}`}
+            >
+              {assessment.patType}
+            </span>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-3 mb-6 bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
+            <div>
+              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Datum</p>
+              <p className="mt-1 text-lg font-semibold">{formatDate(assessment.datum)}</p>
+            </div>
+            <div>
+              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Gesamtpunkte</p>
+              <p className="mt-1 text-lg font-semibold text-green-600 dark:text-green-300">
+                {totalPoints.toFixed(0)}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Bewertung</p>
+              <p className="mt-1 text-lg font-semibold">{achievement.name}</p>
+            </div>
+          </div>
+
+          {(assessment.exercises || []).map((exercise, index) => (
+            <div key={`${exercise.name}-${index}`} className="mb-6 border-b pb-4 border-gray-200 dark:border-gray-800">
+              <div className="flex items-start justify-between gap-3 mb-3 flex-wrap">
+                <div>
+                  <h2 className="font-bold text-lg text-gray-700 dark:text-gray-200">{exercise.name}</h2>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    Soll {exercise.soll} · Faktor {exercise.faktor}
+                  </p>
+                </div>
+                <div className="rounded-lg bg-green-50 dark:bg-green-900/30 px-4 py-2">
+                  <p className="text-xs uppercase tracking-wide text-green-700 dark:text-green-300">Points</p>
+                  <p className="text-xl font-bold text-green-700 dark:text-green-200">
+                    {(exercise.points || 0).toFixed(0)}
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                {exercise.subA && exercise.subB ? (
+                  <>
+                    <ValueRow label={exercise.subLabels?.[0] || 'a)'} values={exercise.subA} />
+                    <ValueRow label={exercise.subLabels?.[1] || 'b)'} values={exercise.subB} />
+                  </>
+                ) : (
+                  <ValueRow label="Werte" values={exercise.values || []} />
+                )}
+              </div>
+
+              <div className="grid md:grid-cols-3 gap-3 mt-4">
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-900/30 px-4 py-3">
+                  <p className="text-xs uppercase tracking-wide text-blue-700 dark:text-blue-300">Durchschnitt</p>
+                  <p className="text-lg font-semibold text-blue-700 dark:text-blue-200">
+                    {(exercise.durchschnitt || 0).toFixed(2)}
+                  </p>
+                </div>
+                <div className="rounded-lg bg-gray-50 dark:bg-gray-800 px-4 py-3">
+                  <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Soll</p>
+                  <p className="text-lg font-semibold">{exercise.soll}</p>
+                </div>
+                <div className="rounded-lg bg-gray-50 dark:bg-gray-800 px-4 py-3">
+                  <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Faktor</p>
+                  <p className="text-lg font-semibold">{exercise.faktor}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          <div className="mt-6 bg-gradient-to-r from-green-100 to-blue-100 dark:from-gray-800 dark:to-gray-700 p-6 rounded-lg">
+            <div className="flex justify-between items-center gap-4 flex-wrap mb-4">
+              <span className="text-2xl font-bold text-gray-800 dark:text-gray-100">Ergebnis</span>
+              <span className="text-4xl font-bold text-green-600 dark:text-green-300">{totalPoints.toFixed(0)}</span>
+            </div>
+
+            <div className={`mt-4 px-6 py-4 rounded-lg ${achievement.color} ${achievement.text} text-center`}>
+              <p className="text-2xl font-bold">{achievement.name}</p>
+              {achievement.subtitle && <p className="text-lg mt-2">{achievement.subtitle}</p>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}