From 739c470f8d54cdfa0a690ba3d1622729930d3457 Mon Sep 17 00:00:00 2001
From: Thebinary-bard <susmita78907@gmail.com>
Date: Wed, 12 Aug 2026 21:56:36 +0530
Subject: [PATCH 1/2] feat: simplify dashboard controls and remove redundant
 metrics

---
 frontend/src/components/EarthTwin.tsx | 64 ++++-----------------------
 frontend/src/pages/Dashboard.tsx      | 27 ++---------
 2 files changed, 12 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/EarthTwin.tsx b/frontend/src/components/EarthTwin.tsx
index 3337893..93cbb76 100644
--- a/frontend/src/components/EarthTwin.tsx
+++ b/frontend/src/components/EarthTwin.tsx
@@ -5,8 +5,6 @@ import { useSpotlightEffect } from '@/hooks/useSpotlightEffect';
 import { useCinematicCamera } from '@/hooks/useCinematicCamera';
 import { ProceduralSpaceBackground } from '@/components/ui/ProceduralSpaceBackground';
 import { keplerToLatLonAlt } from '@/utils/orbitCalc';
-import { useUIStore } from '@/store/uiStore';
-import { logEvent } from '@/store/logbookStore';
 import { useUIStore, useActiveSector, useLayerStore, logEvent } from '@/store';
 import { MaterialIcon } from './MaterialIcon';
 import { useNavigate } from 'react-router-dom';
@@ -155,8 +153,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
   const [hoveredObject, setHoveredObject] = useState<CatalogObject | null>(null);
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
   const [showLegend, setShowLegend] = useState(true);
-  const [showDensity, setShowDensity] = useState(false);
-  const [showRiskOverlay, setShowRiskOverlay] = useState(false);
+
   const [showLayerManager, setShowLayerManager] = useState(false);
   const [objectCounts, setObjectCounts] = useState({
     navigation: 0, weather: 0, military: 0, debris: 0, rocketBodies: 0, other: 0,
@@ -976,42 +973,14 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
         </div>
 
         {/* Bottom Row */}
-        <div className="flex flex-col sm:flex-row gap-3 sm:gap-6 items-start sm:items-end justify-between animate-[slideUp_0.5s_ease-out]">
-          <div className="flex gap-4 md:gap-8 flex-wrap">
-            {!dataLoaded && !useFallback ? (
-              <div className="min-w-[250px] p-4 animate-pulse bg-surface-container/80 h-12" />
-            ) : (
-              <>
-                <div className="space-y-0.5">
-                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Objects Tracked</p>
-                  <p className="font-headline-lg text-primary text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]">
-                    {objectCounts.total.toLocaleString()}
-                  </p>
-                </div>
-                <div className="space-y-0.5">
-                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Debris</p>
-                  <p className="font-headline-lg text-status-warning text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(255,170,0,0.4)]">
-                    {objectCounts.debris.toLocaleString()}
-                  </p>
-                </div>
-                <div className="space-y-0.5">
-                  <p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Collision Risks</p>
-                  <p className={`font-headline-lg text-xl md:text-3xl font-bold font-technical-data ${objectCounts.collisions > 0 ? 'text-status-emergency animate-pulse drop-shadow-[0_0_8px_rgba(255,59,48,0.6)]' : 'text-status-success drop-shadow-[0_0_8px_rgba(0,255,136,0.4)]'}`}>
-                    {objectCounts.collisions}
-                  </p>
-                </div>
-              </>
-            )
-            }
-          </div>
-
-          {/* Controls */}
-          <div className="flex gap-1.5 md:gap-2 pointer-events-auto">
+        <div className="flex justify-end w-full animate-[slideUp_0.5s_ease-out]">
+          {/* Controls — compact mission-control toolbar */}
+          <div className="flex items-center gap-1 md:gap-1.5 pointer-events-auto bg-bg-deep-space/70 backdrop-blur-xl border border-border-panel/50 p-1.5 md:p-2 rounded-sm">
             <button
               type="button"
               onClick={isListening ? stopListening : startListening}
               disabled={!isSupported}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui border ${isListening
+              className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui border ${isListening
                 ? 'bg-status-emergency text-white border-status-emergency animate-pulse'
                 : 'border-primary-container text-primary-container hover:bg-primary-container/10'
                 }`}
@@ -1049,7 +1018,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
             <button
               type="button"
               onClick={() => setIsBookmarkModalOpen(true)}
-              className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
+              className="px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
               aria-label="Save the current globe view as a bookmark"
             >
               SAVE VIEW
@@ -1058,38 +1027,23 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
             <button
               type="button"
               onClick={() => setIsBookmarkSidebarOpen(true)}
-              className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
+              className="px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
               aria-label="Open saved globe bookmarks"
             >
               BOOKMARKS
             </button>
 
-
             <button
               onClick={() => setShowLegend(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
+              className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
                 }`}
             >
               LEGEND
             </button>
-            <button
-              onClick={() => setShowDensity(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showDensity ? 'bg-status-warning text-bg-deep-space border-status-warning' : 'border-status-warning/50 text-status-warning hover:bg-status-warning/10'
-                }`}
-            >
-              DENSITY
-            </button>
-            <button
-              onClick={() => setShowRiskOverlay(v => !v)}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showRiskOverlay ? 'bg-status-emergency text-white border-status-emergency' : 'border-status-emergency/50 text-status-emergency hover:bg-status-emergency/10'
-                }`}
-            >
-              RISK
-            </button>
             <button
               onClick={() => setShowLayerManager(v => !v)}
               aria-pressed={showLayerManager}
-              className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLayerManager ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
+              className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLayerManager ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
                 }`}
             >
               LAYERS
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 4b9af3e..be060d7 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -63,20 +63,6 @@ export const Dashboard: React.FC = () => {
 
   const kpis = s
     ? [
-        {
-          title: 'Tracked Satellites',
-          value: s.tracked_satellites.toLocaleString(),
-          icon: 'satellite_alt',
-          gradientFrom: '#00e5ff',
-          gradientTo: '#0088ff',
-        },
-        {
-          title: 'Debris Objects',
-          value: s.debris_objects > 0 ? s.debris_objects.toLocaleString() : '\u2014',
-          icon: 'delete_sweep',
-          gradientFrom: '#7c3aed',
-          gradientTo: '#a855f7',
-        },
         {
           title: 'Active Alerts',
           value: s.active_alerts_count.toLocaleString(),
@@ -84,13 +70,6 @@ export const Dashboard: React.FC = () => {
           gradientFrom: s.active_alerts_count > 0 ? '#FF3B30' : '#8892A6',
           gradientTo: s.active_alerts_count > 0 ? '#FF3B30' : '#8892A6',
         },
-        {
-          title: 'Pred. Collisions',
-          value: s.predicted_collisions_count.toLocaleString(),
-          icon: 'cognition',
-          gradientFrom: '#FF9500',
-          gradientTo: '#FF3B30',
-        },
         {
           title: 'Space Weather',
           value: s.space_weather_index,
@@ -154,12 +133,12 @@ export const Dashboard: React.FC = () => {
       </section>
 
       {/* KPI Bento Grid with Magic Cards */}
-      <section className="p-3 md:p-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-3">
+      <section className="p-3 md:p-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-2 md:gap-3">
         {summary.isLoading
-          ? Array(6).fill(0).map((_, i) => <KPISkeleton key={i} />)
+          ? Array(3).fill(0).map((_, i) => <KPISkeleton key={i} />)
           : summary.isError
           ? (
-            <div className="col-span-6 text-center text-status-emergency font-technical-data text-sm py-4">
+            <div className="col-span-full lg:col-span-3 text-center text-status-emergency font-technical-data text-sm py-4">
               {'\u26A0'} Failed to connect to backend \u2014 please refresh or contact support if the issue persists.
             </div>
           )

From a9eed42878332ef8654c68f4d26e5415e83fa41c Mon Sep 17 00:00:00 2001
From: Thebinary-bard <susmita78907@gmail.com>
Date: Wed, 12 Aug 2026 22:09:22 +0530
Subject: [PATCH 2/2] fix: address dashboard toolbar review feedback

---
 frontend/src/components/EarthTwin.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/EarthTwin.tsx b/frontend/src/components/EarthTwin.tsx
index 93cbb76..4e5d31d 100644
--- a/frontend/src/components/EarthTwin.tsx
+++ b/frontend/src/components/EarthTwin.tsx
@@ -975,7 +975,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
         {/* Bottom Row */}
         <div className="flex justify-end w-full animate-[slideUp_0.5s_ease-out]">
           {/* Controls — compact mission-control toolbar */}
-          <div className="flex items-center gap-1 md:gap-1.5 pointer-events-auto bg-bg-deep-space/70 backdrop-blur-xl border border-border-panel/50 p-1.5 md:p-2 rounded-sm">
+          <div className="flex flex-wrap justify-end items-center gap-1 md:gap-1.5 pointer-events-auto bg-bg-deep-space/70 backdrop-blur-xl border border-border-panel/50 p-1.5 md:p-2 rounded-sm max-w-full">
             <button
               type="button"
               onClick={isListening ? stopListening : startListening}
@@ -1035,6 +1035,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
 
             <button
               onClick={() => setShowLegend(v => !v)}
+              aria-pressed={showLegend}
               className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
                 }`}
             >