From 0fd08c401579e5697c8c619fdd2b80d28efd5126 Mon Sep 17 00:00:00 2001
From: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date: Fri, 22 May 2026 22:50:54 +0530
Subject: [PATCH] Switch nav items to screen_uuid (server returns UUIDs, not
 numeric ids)

---
 src/api/viewService.ts           |  6 +++---
 src/components/AppShell.tsx      | 14 +++++++-------
 src/components/DynamicHeader.tsx |  8 ++++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/api/viewService.ts b/src/api/viewService.ts
index 17f8d82..9aae619 100644
--- a/src/api/viewService.ts
+++ b/src/api/viewService.ts
@@ -53,7 +53,7 @@ export interface NavItem {
   icon: string;
   type: string;
   label: string;
-  screen_id: number;
+  screen_uuid: string;
 }
 
 export async function getHeaderConfig(deviceType = "desktop"): Promise<HeaderConfig> {
@@ -91,8 +91,8 @@ export function getScreens(deviceType = "desktop"): Promise<ScreenListItem[]> {
   return request("GET", `/app/${APP_ID}/view/screens?device_type=${deviceType}`);
 }
 
-export function getScreen(sourceScreenId: number): Promise<ScreenLayout> {
-  return request("GET", `/app/${APP_ID}/view/screens/${sourceScreenId}`);
+export function getScreen(idOrUuid: number | string): Promise<ScreenLayout> {
+  return request("GET", `/app/${APP_ID}/view/screens/${idOrUuid}`);
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 667d7b0..92b63c7 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -52,10 +52,10 @@ function stateTone(stateId: string | null) {
 export default function AppShell() {
   const navigate = useNavigate();
   const params = useParams();
-  const screenIdParam = params.screenId ? Number(params.screenId) : null;
+  const screenIdParam = params.screenId || null;
   const instanceIdParam = params.instanceId;
 
-  const [activeScreenId, setActiveScreenId] = useState<number | null>(screenIdParam);
+  const [activeScreenId, setActiveScreenId] = useState<string | null>(screenIdParam);
   const [layout, setLayout] = useState<LayoutElement[]>([]);
   const [loading, setLoading] = useState(true);
   const [ready, setReady] = useState(false);
@@ -75,7 +75,7 @@ export default function AppShell() {
         .then((cfg) => {
           const items = cfg.components?.nav?.items ?? [];
           setNavItems(items);
-          if (items.length > 0) handleNavigate(items[0].screen_id);
+          if (items.length > 0) handleNavigate(items[0].screen_uuid);
         })
         .catch(console.error)
         .finally(() => setReady(true));
@@ -120,12 +120,12 @@ export default function AppShell() {
     getAuditLog(detailInstanceId).then(setAudit).catch(() => setAudit([]));
   }, [detailInstanceId, refreshKey]);
 
-  const handleNavigate = useCallback((id: number) => {
-    setActiveScreenId(id);
+  const handleNavigate = useCallback((uuid: string) => {
+    setActiveScreenId(uuid);
     setDetailInstanceId(null);
     setInstanceState(null);
     setAudit([]);
-    navigate(`/screen/${id}`);
+    navigate(`/screen/${uuid}`);
   }, [navigate]);
 
   const handleRowClick = useCallback((instanceId: string) => {
@@ -190,7 +190,7 @@ export default function AppShell() {
                     onClick={handleBack}
                     className="text-stone-400 dark:text-zinc-500 hover:text-[#C8102E] dark:hover:text-rose-400 transition-colors font-medium"
                   >
-                    {navItems.find((n) => n.screen_id === activeScreenId)?.label ?? "Pipeline"}
+                    {navItems.find((n) => n.screen_uuid === activeScreenId)?.label ?? "Pipeline"}
                   </button>
                   <span className="text-stone-300 dark:text-zinc-700">/</span>
                   <span className="text-stone-700 dark:text-zinc-200 font-medium">
diff --git a/src/components/DynamicHeader.tsx b/src/components/DynamicHeader.tsx
index 952e13d..fb4d8d4 100644
--- a/src/components/DynamicHeader.tsx
+++ b/src/components/DynamicHeader.tsx
@@ -20,8 +20,8 @@ function iconFor(label: string) {
 }
 
 interface Props {
-  activeScreenId: number | null;
-  onNavigate: (screenId: number) => void;
+  activeScreenId: string | null;
+  onNavigate: (screenUuid: string) => void;
   onSidebarChange?: (open: boolean) => void;
 }
 
@@ -160,11 +160,11 @@ export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarCha
             </div>
             <nav className="space-y-0.5">
               {navItems.map((item: NavItem) => {
-                const active = activeScreenId === item.screen_id;
+                const active = activeScreenId === item.screen_uuid;
                 return (
                   <button
                     key={item.id}
-                    onClick={() => onNavigate(item.screen_id)}
+                    onClick={() => onNavigate(item.screen_uuid)}
                     className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
                       active
                         ? "bg-rose-100/70 dark:bg-rose-950/40 text-[#9D0D24] dark:text-rose-300"