From cb480209326b37ff640e446bfa4d23b28533ac72 Mon Sep 17 00:00:00 2001
From: salirezav <s.alireza.v@gmail.com>
Date: Mon, 1 Dec 2025 15:40:32 -0500
Subject: [PATCH] Enhance CameraPage UI and improve loading indicators

- Updated loading indicators with larger sizes and improved animations for better visibility.
- Enhanced error banner styling and increased padding for a more user-friendly experience.
- Adjusted stream status and recording status sections for improved readability and consistency in font sizes.
- Refined MQTT message log display with better spacing and text sizes for clearer information presentation.
- Improved overall layout and styling of the CameraPage component for a more polished user interface.
---
 .../src/components/CameraPage.tsx             | 140 +++++++++---------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/management-dashboard-web-app/src/components/CameraPage.tsx b/management-dashboard-web-app/src/components/CameraPage.tsx
index 14077df..f1fb68d 100644
--- a/management-dashboard-web-app/src/components/CameraPage.tsx
+++ b/management-dashboard-web-app/src/components/CameraPage.tsx
@@ -279,10 +279,10 @@ export function CameraPage({ cameraName }: CameraPageProps) {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+      <div className="h-screen flex items-center justify-center bg-gray-900">
         <div className="text-center text-white">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
-          <p className="mt-4">Loading camera data...</p>
+          <div className="animate-spin rounded-full h-16 w-16 border-b-3 border-white mx-auto"></div>
+          <p className="mt-6 text-2xl font-semibold">Loading camera data...</p>
         </div>
       </div>
     )
@@ -291,23 +291,23 @@ export function CameraPage({ cameraName }: CameraPageProps) {
   const healthStatus = getHealthStatus()
 
   return (
-    <div className="min-h-screen bg-gray-900 flex">
+    <div className="h-screen bg-gray-900 flex overflow-hidden">
       {/* Left Side - Live Stream (3/5) */}
-      <div className="flex-[3] flex flex-col bg-black">
+      <div className="flex-[3] flex flex-col bg-black overflow-hidden">
         {/* Auto-recording Error Banner */}
         {autoRecordingError && (
-          <div className="bg-red-600 text-white px-4 py-3 flex items-center justify-between animate-pulse">
-            <div className="flex items-center space-x-2">
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <div className="bg-red-600 text-white px-6 py-5 flex items-center justify-between animate-pulse">
+            <div className="flex items-center space-x-3">
+              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
               </svg>
-              <span className="font-semibold">{autoRecordingError}</span>
+              <span className="font-semibold text-xl">{autoRecordingError}</span>
             </div>
             <button
               onClick={() => setAutoRecordingError(null)}
-              className="text-white hover:text-gray-200"
+              className="text-white hover:text-gray-200 p-2"
             >
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
               </svg>
             </button>
@@ -315,7 +315,7 @@ export function CameraPage({ cameraName }: CameraPageProps) {
         )}
 
         {/* Stream Container */}
-        <div className="flex-1 flex items-center justify-center relative">
+        <div className="flex-1 flex items-center justify-center relative min-h-0">
           {isStreaming && streamStatus === 'streaming' ? (
             <img
               ref={imgRef}
@@ -340,32 +340,32 @@ export function CameraPage({ cameraName }: CameraPageProps) {
             />
           ) : streamStatus === 'starting' ? (
             <div className="text-center text-white">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
-              <p className="text-lg">Starting stream...</p>
+              <div className="animate-spin rounded-full h-16 w-16 border-b-3 border-white mx-auto mb-6"></div>
+              <p className="text-2xl font-semibold">Starting stream...</p>
             </div>
           ) : (
             <div className="text-center text-gray-500">
-              <svg className="w-24 h-24 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-32 h-32 mx-auto mb-6 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
               </svg>
-              <p className="text-lg">Stream not active</p>
-              <p className="text-sm mt-2">Click "Start Stream" to begin</p>
+              <p className="text-2xl font-semibold">Stream not active</p>
+              <p className="text-xl mt-4">Click "Start Stream" to begin</p>
             </div>
           )}
 
           {/* Camera Label Overlay */}
-          <div className="absolute top-4 left-4 z-10">
-            <div className="bg-black bg-opacity-75 text-white px-3 py-1 rounded-md text-sm font-medium">
+          <div className="absolute top-6 left-6 z-10">
+            <div className="bg-black bg-opacity-75 text-white px-5 py-3 rounded-lg text-xl font-semibold">
               {cameraName} - Live View
             </div>
           </div>
 
           {/* Stream Status Indicator */}
           {isStreaming && (
-            <div className="absolute bottom-4 right-4 z-10">
-              <div className="flex items-center space-x-2 bg-black bg-opacity-75 text-white px-3 py-1 rounded-md">
-                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                <span className="text-sm">LIVE</span>
+            <div className="absolute bottom-6 right-6 z-10">
+              <div className="flex items-center space-x-3 bg-black bg-opacity-75 text-white px-5 py-3 rounded-lg">
+                <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="text-xl font-semibold">LIVE</span>
               </div>
             </div>
           )}
@@ -373,27 +373,27 @@ export function CameraPage({ cameraName }: CameraPageProps) {
       </div>
 
       {/* Right Side - Controls & Info (2/5) */}
-      <div className="flex-[2] bg-gray-800 text-white p-6 overflow-y-auto">
-        <h1 className="text-2xl font-bold mb-6">{cameraName.toUpperCase()}</h1>
+      <div className="flex-[2] bg-gray-800 text-white p-8 overflow-y-auto h-full">
+        <h1 className="text-4xl font-bold mb-8">{cameraName.toUpperCase()}</h1>
 
         {/* Health Status */}
-        <div className="mb-6">
-          <h2 className="text-lg font-semibold mb-2">Health Status</h2>
-          <div className={`p-3 rounded-md ${
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Health Status</h2>
+          <div className={`p-5 rounded-lg ${
             healthStatus.status === 'healthy' ? 'bg-green-600' :
             healthStatus.status === 'error' ? 'bg-red-600' :
             'bg-yellow-600'
           }`}>
-            <div className="flex items-center space-x-2">
-              <div className={`w-3 h-3 rounded-full ${
+            <div className="flex items-center space-x-3">
+              <div className={`w-5 h-5 rounded-full ${
                 healthStatus.status === 'healthy' ? 'bg-green-200' :
                 healthStatus.status === 'error' ? 'bg-red-200' :
                 'bg-yellow-200'
               }`}></div>
-              <span className="font-medium">{healthStatus.message}</span>
+              <span className="font-medium text-xl">{healthStatus.message}</span>
             </div>
             {cameraStatus?.device_info && (
-              <div className="mt-2 text-sm opacity-90">
+              <div className="mt-4 text-lg opacity-90">
                 <div>Model: {cameraStatus.device_info.model || 'N/A'}</div>
                 <div>Serial: {cameraStatus.device_info.serial_number || 'N/A'}</div>
               </div>
@@ -402,12 +402,12 @@ export function CameraPage({ cameraName }: CameraPageProps) {
         </div>
 
         {/* Stream Controls */}
-        <div className="mb-6">
-          <h2 className="text-lg font-semibold mb-2">Stream Control</h2>
-          <div className="bg-gray-700 p-4 rounded-md">
-            <div className="mb-3">
-              <div className="text-sm text-gray-300 mb-1">Status:</div>
-              <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Stream Control</h2>
+          <div className="bg-gray-700 p-6 rounded-lg">
+            <div className="mb-5">
+              <div className="text-xl text-gray-300 mb-2">Status:</div>
+              <div className={`inline-flex items-center px-4 py-2 rounded-full text-lg font-medium ${
                 streamStatus === 'streaming' ? 'bg-green-600 text-white' :
                 streamStatus === 'error' ? 'bg-red-600 text-white' :
                 'bg-gray-600 text-gray-200'
@@ -415,11 +415,11 @@ export function CameraPage({ cameraName }: CameraPageProps) {
                 {getStreamStatusText()}
               </div>
             </div>
-            <div className="flex space-x-2">
+            <div className="flex space-x-3">
               <button
                 onClick={isStreaming ? stopStreaming : startStreaming}
                 disabled={streamStatus === 'starting' || streamStatus === 'stopping'}
-                className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
+                className={`flex-1 px-6 py-4 rounded-lg font-semibold text-xl transition-colors ${
                   isStreaming
                     ? 'bg-red-600 hover:bg-red-700 disabled:bg-red-800'
                     : 'bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800'
@@ -432,26 +432,26 @@ export function CameraPage({ cameraName }: CameraPageProps) {
         </div>
 
         {/* Recording Status */}
-        <div className="mb-6">
-          <h2 className="text-lg font-semibold mb-2">Recording Status</h2>
-          <div className="bg-gray-700 p-4 rounded-md">
-            <div className="mb-3">
-              <div className="text-sm text-gray-300 mb-1">Status:</div>
-              <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Recording Status</h2>
+          <div className="bg-gray-700 p-6 rounded-lg">
+            <div className="mb-5">
+              <div className="text-xl text-gray-300 mb-2">Status:</div>
+              <div className={`inline-flex items-center px-4 py-2 rounded-full text-lg font-medium ${
                 isRecording ? 'bg-red-600 text-white' : 'bg-gray-600 text-gray-200'
               }`}>
                 {isRecording ? 'Recording Now' : 'Not Recording'}
               </div>
             </div>
             {isRecording && cameraStatus?.current_recording_file && (
-              <div className="text-sm text-gray-300 mb-2">
+              <div className="text-lg text-gray-300 mb-4">
                 File: {cameraStatus.current_recording_file.split('/').pop()}
               </div>
             )}
-            <div className="flex space-x-2">
+            <div className="flex space-x-3">
               <button
                 onClick={isRecording ? stopRecording : startRecording}
-                className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
+                className={`flex-1 px-6 py-4 rounded-lg font-semibold text-xl transition-colors ${
                   isRecording
                     ? 'bg-red-600 hover:bg-red-700'
                     : 'bg-green-600 hover:bg-green-700'
@@ -464,33 +464,33 @@ export function CameraPage({ cameraName }: CameraPageProps) {
         </div>
 
         {/* MQTT Message Log */}
-        <div className="mb-6">
-          <h2 className="text-lg font-semibold mb-2">MQTT Message Log</h2>
-          <div className="bg-gray-700 rounded-md overflow-hidden">
-            <div className="max-h-64 overflow-y-auto p-2 space-y-2">
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">MQTT Message Log</h2>
+          <div className="bg-gray-700 rounded-lg overflow-hidden">
+            <div className="max-h-96 overflow-y-auto p-4 space-y-3">
               {mqttEvents.length === 0 ? (
-                <div className="text-center text-gray-400 py-4">
+                <div className="text-center text-gray-400 py-6 text-lg">
                   No MQTT messages received yet
                 </div>
               ) : (
                 mqttEvents.map((event, index) => (
                   <div
                     key={`${event.message_number}-${index}`}
-                    className="bg-gray-800 p-2 rounded text-sm"
+                    className="bg-gray-800 p-4 rounded-lg text-base"
                   >
-                    <div className="flex justify-between items-start mb-1">
-                      <span className="font-medium text-blue-300">{event.machine_name}</span>
-                      <span className="text-gray-400 text-xs">{formatTimestamp(event.timestamp)}</span>
+                    <div className="flex justify-between items-start mb-2">
+                      <span className="font-semibold text-blue-300 text-lg">{event.machine_name}</span>
+                      <span className="text-gray-400 text-base">{formatTimestamp(event.timestamp)}</span>
                     </div>
-                    <div className="text-gray-300">
+                    <div className="text-gray-300 text-lg">
                       <span className="text-gray-400">State: </span>
-                      <span className={`font-medium ${
+                      <span className={`font-semibold ${
                         event.normalized_state === 'on' ? 'text-green-400' : 'text-red-400'
                       }`}>
                         {event.normalized_state.toUpperCase()}
                       </span>
                     </div>
-                    <div className="text-xs text-gray-500 mt-1">
+                    <div className="text-base text-gray-500 mt-2">
                       Topic: {event.topic}
                     </div>
                   </div>
@@ -502,20 +502,20 @@ export function CameraPage({ cameraName }: CameraPageProps) {
 
         {/* Auto-Recording Info */}
         {cameraStatus && cameraStatus.auto_recording_enabled && (
-          <div className="mb-6">
-            <h2 className="text-lg font-semibold mb-2">Auto-Recording</h2>
-            <div className="bg-gray-700 p-4 rounded-md">
-              <div className="text-sm text-gray-300">
-                <div className="mb-1">
-                  <span className="text-green-400">✓ Enabled</span>
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold mb-4">Auto-Recording</h2>
+            <div className="bg-gray-700 p-6 rounded-lg">
+              <div className="text-lg text-gray-300">
+                <div className="mb-3">
+                  <span className="text-green-400 text-xl font-semibold">✓ Enabled</span>
                 </div>
                 {cameraConfig && (
-                  <div className="text-xs mt-2">
-                    Machine Topic: <span className="font-mono">{cameraConfig.machine_topic}</span>
+                  <div className="text-base mt-3">
+                    Machine Topic: <span className="font-mono text-lg">{cameraConfig.machine_topic}</span>
                   </div>
                 )}
                 {cameraStatus.auto_recording_failure_count > 0 && (
-                  <div className="text-red-400 mt-2 text-xs">
+                  <div className="text-red-400 mt-3 text-lg font-semibold">
                     Failures: {cameraStatus.auto_recording_failure_count}
                   </div>
                 )}