add rest of SimulationSummary styling

igloo-4002 · Sep 18, 2023 · 8d7e669 · 8d7e669
1 parent 5243663
commit 8d7e669
Showing 1 changed file with 69 additions and 10 deletions.
diff --git a/src/components/SimulationHistory/SimulationSummary.tsx b/src/components/SimulationHistory/SimulationSummary.tsx
@@ -1,4 +1,7 @@
+import { useState } from 'react';
+
 import { getSimulationAnalytics } from '~/api/network';
+import { formatISOString } from '~/helpers/date/formatter';
 import { SimulationHistory } from '~/zustand/useSimulationHistory';
 
 interface SimulationSummaryProps {
@@ -10,25 +13,81 @@ export function SimulationSummary({
   histroyItem,
   simulationNumber,
 }: SimulationSummaryProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
   const summary = getSimulationAnalytics(histroyItem.simulation.output);
 
-  const startDateTime = new Date(histroyItem.startTime).toLocaleString();
-  const endDateTime = new Date(histroyItem.endTime).toLocaleString();
+  const startDateTime = formatISOString(histroyItem.startTime);
+  const endDateTime = formatISOString(histroyItem.endTime);
 
   return (
     <div className="bg-white p-4 rounded-lg shadow-md w-full">
-      <h2 className="text-xl font-semibold mb-2">Simulation Summary</h2>
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <h3 className="text-lg font-medium">Start Time:</h3>
-          <p>{startDateTime}</p>
+      <div className="flex flex-col justify-between gap-2">
+        <h2 className="text-xl font-semibold">
+          Simulation Summary #{simulationNumber}
+        </h2>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h3 className="text-lg font-medium">Start Time:</h3>
+            <p>{startDateTime.date}</p>
+            <p>{startDateTime.time}</p>
+          </div>
+          <div>
+            <h3 className="text-lg font-medium">End Time:</h3>
+            <p>{endDateTime.date}</p>
+            <p>{endDateTime.time}</p>
+          </div>
         </div>
         <div>
-          <h3 className="text-lg font-medium">End Time:</h3>
-          <p>{endDateTime}</p>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-blue-500"
+          >
+            {isExpanded ? 'Hide Details' : 'Show Details'}
+          </button>
         </div>
       </div>
-      {/* Render Simulation Info and Output here */}
+
+      {isExpanded && (
+        <div className="flex flex-col gap-2 mt-6 bg-gray-100 p-3 rounded-lg">
+          <h3 className="text-lg font-semibold text-gray-700">
+            Detailed Simulation Metrics
+          </h3>
+          <div className="flex flex-col gap-2">
+            <div>
+              <span className="font-medium text-gray-600">
+                Average Time Spent Per Car:
+              </span>{' '}
+              <span className="text-gray-800">
+                {summary.averageDuration} seconds
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-600">
+                Average Waiting Time Per Car:
+              </span>{' '}
+              <span className="text-gray-800">
+                {summary.averageWaiting} seconds
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-600">
+                Average Time Lost Due to Congestion:
+              </span>{' '}
+              <span className="text-gray-800">
+                {summary.averageTimeLoss} seconds
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-600">
+                Total Cars Completed Simulation:
+              </span>{' '}
+              <span className="text-gray-800">
+                {summary.totalNumberOfCarsThatCompleted}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }