Implement stop sheet modal for map stop interactions (#27)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Co-authored-by: Ariel Costas Guerrero <ariel@costas.dev>

1 files changed, 65 insertions, 59 deletions

diff --git a/src/frontend/app/components/GroupedTable.tsx b/src/frontend/app/components/GroupedTable.tsx
index 3a16d89..47c2d31 100644
--- a/src/frontend/app/components/GroupedTable.tsx
+++ b/src/frontend/app/components/GroupedTable.tsx
@@ -2,73 +2,79 @@ import { type StopDetails } from "../routes/estimates-$id";
 import LineIcon from "./LineIcon";
 
 interface GroupedTable {
-    data: StopDetails;
-    dataDate: Date | null;
+  data: StopDetails;
+  dataDate: Date | null;
 }
 
 export const GroupedTable: React.FC<GroupedTable> = ({ data, dataDate }) => {
-    const formatDistance = (meters: number) => {
-        if (meters > 1024) {
-            return `${(meters / 1000).toFixed(1)} km`;
-        } else {
-            return `${meters} m`;
-        }
+  const formatDistance = (meters: number) => {
+    if (meters > 1024) {
+      return `${(meters / 1000).toFixed(1)} km`;
+    } else {
+      return `${meters} m`;
     }
+  };
 
-    const groupedEstimates = data.estimates.reduce((acc, estimate) => {
-        if (!acc[estimate.line]) {
-            acc[estimate.line] = [];
-        }
-        acc[estimate.line].push(estimate);
-        return acc;
-    }, {} as Record<string, typeof data.estimates>);
+  const groupedEstimates = data.estimates.reduce(
+    (acc, estimate) => {
+      if (!acc[estimate.line]) {
+        acc[estimate.line] = [];
+      }
+      acc[estimate.line].push(estimate);
+      return acc;
+    },
+    {} as Record<string, typeof data.estimates>,
+  );
 
-    const sortedLines = Object.keys(groupedEstimates).sort((a, b) => {
-        const firstArrivalA = groupedEstimates[a][0].minutes;
-        const firstArrivalB = groupedEstimates[b][0].minutes;
-        return firstArrivalA - firstArrivalB;
-    });
+  const sortedLines = Object.keys(groupedEstimates).sort((a, b) => {
+    const firstArrivalA = groupedEstimates[a][0].minutes;
+    const firstArrivalB = groupedEstimates[b][0].minutes;
+    return firstArrivalA - firstArrivalB;
+  });
 
-    return <table className="table">
-        <caption>Estimaciones de llegadas a las {dataDate?.toLocaleTimeString()}</caption>
+  return (
+    <table className="table">
+      <caption>
+        Estimaciones de llegadas a las {dataDate?.toLocaleTimeString()}
+      </caption>
 
-        <thead>
-            <tr>
-                <th>Línea</th>
-                <th>Ruta</th>
-                <th>Llegada</th>
-                <th>Distancia</th>
-            </tr>
-        </thead>
-
-        <tbody>
-            {sortedLines.map((line) => (
-                groupedEstimates[line].map((estimate, idx) => (
-                    <tr key={`${line}-${idx}`}>
-                        {idx === 0 && (
-                            <td rowSpan={groupedEstimates[line].length}>
-                                <LineIcon line={line} />
-                            </td>
-                        )}
-                        <td>{estimate.route}</td>
-                        <td>{`${estimate.minutes} min`}</td>
-                        <td>
-                            {estimate.meters > -1
-                                ? formatDistance(estimate.meters)
-                                : "No disponible"
-                            }
-                        </td>
-                    </tr>
-                ))
-            ))}
-        </tbody>
+      <thead>
+        <tr>
+          <th>Línea</th>
+          <th>Ruta</th>
+          <th>Llegada</th>
+          <th>Distancia</th>
+        </tr>
+      </thead>
 
-        {data?.estimates.length === 0 && (
-            <tfoot>
-                <tr>
-                    <td colSpan={4}>No hay estimaciones disponibles</td>
-                </tr>
-            </tfoot>
+      <tbody>
+        {sortedLines.map((line) =>
+          groupedEstimates[line].map((estimate, idx) => (
+            <tr key={`${line}-${idx}`}>
+              {idx === 0 && (
+                <td rowSpan={groupedEstimates[line].length}>
+                  <LineIcon line={line} />
+                </td>
+              )}
+              <td>{estimate.route}</td>
+              <td>{`${estimate.minutes} min`}</td>
+              <td>
+                {estimate.meters > -1
+                  ? formatDistance(estimate.meters)
+                  : "No disponible"}
+              </td>
+            </tr>
+          )),
         )}
+      </tbody>
+
+      {data?.estimates.length === 0 && (
+        <tfoot>
+          <tr>
+            <td colSpan={4}>No hay estimaciones disponibles</td>
+          </tr>
+        </tfoot>
+      )}
     </table>
-}
+  );
+};