wip

apps/companion/renderer/components/RaceCreationSuccessScreen.tsx

@@ -0,0 +1,78 @@
+/**
+ * RaceCreationSuccessScreen component
+ * Displays the successful race creation result with session details.
+ */
+
+import React from 'react';
+
+interface RaceCreationResult {
+  sessionId: string;
+  sessionName: string;
+  trackId: string;
+  carIds: string[];
+  finalPrice: string;
+  createdAt: Date;
+}
+
+interface RaceCreationSuccessScreenProps {
+  result: RaceCreationResult;
+}
+
+export const RaceCreationSuccessScreen: React.FC<RaceCreationSuccessScreenProps> = ({
+  result,
+}) => {
+  return (
+    <div className="race-creation-success-screen">
+      <div className="success-container">
+        <div className="success-header">
+          <h2>✅ Race Created Successfully!</h2>
+        </div>
+
+        <div className="success-details">
+          <div className="detail-section">
+            <h3>Session Information</h3>
+            <div className="detail-row">
+              <span className="detail-label">Session Name:</span>
+              <span className="detail-value">{result.sessionName}</span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">Session ID:</span>
+              <span className="detail-value">{result.sessionId}</span>
+            </div>
+          </div>
+
+          <div className="detail-section">
+            <h3>Track & Cars</h3>
+            <div className="detail-row">
+              <span className="detail-label">Track:</span>
+              <span className="detail-value">{result.trackId}</span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">Cars:</span>
+              <span className="detail-value">{result.carIds.join(', ')}</span>
+            </div>
+          </div>
+
+          <div className="detail-section">
+            <h3>Financial</h3>
+            <div className="detail-row">
+              <span className="detail-label">Final Price:</span>
+              <span className="detail-value price">{result.finalPrice}</span>
+            </div>
+          </div>
+
+          <div className="detail-section">
+            <h3>Created</h3>
+            <div className="detail-row">
+              <span className="detail-label">Timestamp:</span>
+              <span className="detail-value">
+                {result.createdAt.toISOString().split('T')[0]} at{' '}
+                {result.createdAt.toLocaleTimeString()}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};