fix: Display charging station detail data by fetching server-side and passing via JSON script

tools/citrineos-core-main/apps/operator-ui/src/lib/client/pages/charging-stations/detail/charging.station.detail.card.tsx

@@ -29,7 +29,7 @@ import { CanAccess, Link, useCustom, useDelete, useList, useOne, useTranslate }
 import { instanceToPlain } from 'class-transformer';
 import { ChevronLeft, Edit, Info, MoreHorizontal, RefreshCw, Trash2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Card, CardContent, CardHeader } from '@lib/client/components/ui/card';
 import { cardGridStyle, cardHeaderFlex } from '@lib/client/styles/card';
@@ -67,8 +67,33 @@ export const ChargingStationDetailCard = ({
   const dispatch = useDispatch();
   const translate = useTranslate();
   const [showInfoText, setShowInfoText] = useState(false);
-  const [station, setStation] = useState<any>(serverStation || null);
-  const [isLoading, setIsLoading] = useState(!serverStation);
+  const [station, setStation] = useState<any>(() => {
+    // Try to read from server-rendered JSON script
+    if (typeof window !== 'undefined') {
+      const script = document.getElementById('station-data');
+      if (script) {
+        try {
+          return JSON.parse(script.textContent || 'null');
+        } catch (e) {
+          console.error('Failed to parse station data:', e);
+        }
+      }
+    }
+    return serverStation || null;
+  });
+  const [isLoading, setIsLoading] = useState(() => {
+    // If we have data from server, don't show loading
+    if (typeof window !== 'undefined') {
+      const script = document.getElementById('station-data');
+      if (script && script.textContent) {
+        try {
+          const data = JSON.parse(script.textContent);
+          return !data;
+        } catch (e) {}
+      }
+    }
+    return !serverStation;
+  });
 
   useEffect(() => {
     if (!id) return;

tools/citrineos-core-main/apps/operator-ui/src/lib/client/pages/charging-stations/detail/charging.station.detail.tsx

@@ -1,7 +1,6 @@
 // SPDX-FileCopyrightText: 2025 Contributors to the CitrineOS Project
 //
 // SPDX-License-Identifier: Apache-2.0
-'use client';
 
 import React from 'react';
 import { ChargingStationDetailCard } from '@lib/client/pages/charging-stations/detail/charging.station.detail.card';
@@ -26,9 +25,16 @@ export const ChargingStationDetail: React.FC<ChargingStationDetailProps> = ({ pa
   }
 
   return (
-    <div className={`${pageMargin} {pageFlex}`}>
-      <ChargingStationDetailCard id={id} imageUrl={null} serverStation={station} />
-      <ChargingStationDetailTabsCard id={id} />
+    <>
+      <script
+        id="station-data"
+        type="application/json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(station || null) }}
+      />
+      <div className={`${pageMargin} ${pageFlex}`}>
+        <ChargingStationDetailCard id={id} imageUrl={null} />
+        <ChargingStationDetailTabsCard id={String(id)} />
       </div>
+    </>
   );
 };