From 3227c7bc6bd233c92b1cf54bec689f0582dca547 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 1 Dec 2025 22:25:56 +0100
Subject: refactor: replace StopSheet with StopSummarySheet and update related
 components

- Deleted StopSheet and StopSheetSkeleton components.
- Introduced StopSummarySheet and StopSummarySheetSkeleton components.
- Updated ConsolidatedCirculationCard to support a reduced view.
- Modified ConsolidatedCirculationList to accept a reduced prop.
- Adjusted map route to use StopSummarySheet.
- Cleaned up CSS styles related to the stop sheet components.
- Enhanced error handling and loading states in the new summary sheet.
- Updated stop report logic to filter out empty next streets.
---
 .../Stops/ConsolidatedCirculationList.tsx          | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

(limited to 'src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx')

diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
index 547fdf7..088f978 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
@@ -2,18 +2,19 @@ import { useTranslation } from "react-i18next";
 import { type ConsolidatedCirculation } from "~routes/stops-$id";
 import { ConsolidatedCirculationCard } from "./ConsolidatedCirculationCard";
 
+import { useCallback } from "react";
 import "./ConsolidatedCirculationList.css";
 
-interface RegularTableProps {
+interface ConsolidatedCirculationListProps {
   data: ConsolidatedCirculation[];
-  dataDate: Date | null;
   onCirculationClick?: (estimate: ConsolidatedCirculation, index: number) => void;
+  reduced?: boolean;
 }
 
-export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
+export const ConsolidatedCirculationList: React.FC<ConsolidatedCirculationListProps> = ({
   data,
-  dataDate,
   onCirculationClick,
+  reduced,
 }) => {
   const { t } = useTranslation();
 
@@ -23,28 +24,31 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
       (b.realTime?.minutes ?? b.schedule?.minutes ?? 999)
   );
 
+  const generateKey = useCallback((estimate: ConsolidatedCirculation) => {
+    if (estimate.realTime && estimate.schedule) {
+      return `rt-${estimate.schedule.tripId}`;
+    }
+
+    return `sch-${estimate.schedule ? estimate.schedule.tripId : estimate.line + "-" + estimate.route}`;
+  }, []);
+
   return (
     <>
-      <div className="consolidated-circulation-caption">
-        {t("estimates.caption", "Estimaciones de llegadas a las {{time}}", {
-          time: dataDate?.toLocaleTimeString(),
-        })}
-      </div>
-
       {sortedData.length === 0 ? (
         <div className="consolidated-circulation-no-data">
           {t("estimates.none", "No hay estimaciones disponibles")}
         </div>
       ) : (
-        <>
+        <div className="flex flex-col gap-3">
           {sortedData.map((estimate, idx) => (
             <ConsolidatedCirculationCard
-              key={idx}
+              reduced={reduced}
+              key={generateKey(estimate)}
               estimate={estimate}
               onMapClick={() => onCirculationClick?.(estimate, idx)}
             />
           ))}
-        </>
+        </div>
       )}
     </>
   );
-- 
cgit v1.3