Initial commit

resources/js/components/EvaluationStatusSummary.tsx

@@ -0,0 +1,63 @@
+import { type EvaluationRun } from "@/hooks/useRoundEvaluationRun";
+
+type EvaluationStatusSummaryProps = {
+  loading: boolean;
+  hasLoaded: boolean;
+  run: EvaluationRun | null;
+  isOfficialRun: boolean;
+  stepProgressPercent: number | null;
+};
+
+export default function EvaluationStatusSummary({
+  loading,
+  hasLoaded,
+  run,
+  isOfficialRun,
+  stepProgressPercent,
+}: EvaluationStatusSummaryProps) {
+  if (loading && !hasLoaded) {
+    return <div className="text-sm text-foreground-600">Načítám stav…</div>;
+  }
+  if (!loading && !run && hasLoaded) {
+    return <div className="text-sm text-foreground-600">Vyhodnocení zatím nebylo spuštěno.</div>;
+  }
+  if (!loading && run && !isOfficialRun) {
+    return <div className="text-sm text-foreground-600">Žádné oficiální vyhodnocení zatím neběží.</div>;
+  }
+  if (!run || !isOfficialRun) {
+    return null;
+  }
+
+  return (
+    <div className="text-sm text-foreground-700 space-y-1">
+      <div>
+        <span className="font-semibold">Stav:</span> {run.status ?? "—"}
+      </div>
+      <div>
+        <span className="font-semibold">Krok:</span> {run.current_step ?? "—"}
+      </div>
+      <div>
+        <span className="font-semibold">Typ:</span> {run.rules_version ?? "—"}
+      </div>
+      {run.result_type && (
+        <div>
+          <span className="font-semibold">Výsledek:</span> {run.result_type}
+        </div>
+      )}
+      {run.progress_total !== null && run.progress_total !== undefined && (
+        <div className="space-y-1 pt-2">
+          <div className="text-xs text-foreground-500">
+            {run.progress_done ?? 0}/{run.progress_total}{" "}
+            {stepProgressPercent !== null ? `(${stepProgressPercent}%)` : ""}
+          </div>
+          <div className="h-2 w-full rounded bg-divider">
+            <div
+              className="h-2 rounded bg-primary"
+              style={{ width: `${stepProgressPercent ?? 0}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}