The issue is likely in the sidebar where we're accessing item.label. Let me check the sidebar component more carefully:
The issue is that useSidebarState() is being called from within Sidebar component, but the SidebarContext is defined in dashboard.tsx and Sidebar is rendered before the context provider wraps it. The context returns default values with collapsed: false and setCollapsed: () => {}, but actually the issue is likely in the sensor data initialization. Let me check the mock-data:
I see the issue now - the sensorData array starts empty, and during the real-time update interval, it accesses prev[prev.length - 1] which would be undefined if the array is empty. Let me fix the dashboard context:
Now let me also check the sensor chart since it accesses formattedData array. Let me also add a check for the stat cards:
The stat card looks fine. Let me check the overview section since that's likely where the error is occurring:
Let me check the header component and device controls:
Now let me check the alerts panel as that's being used in overview:
The code all looks good with the .label property. The issue might be that useSidebarState is being called before the context is available. Let me check the page file to see if the context wrapping is correct:
The issue is that the Sidebar component is importing useSidebarState from ./dashboard, but when the Sidebar module is loaded, the context hasn't been created yet. Let me fix this by moving the sidebar context to a separate file:
I've fixed the circular dependency issue by extracting the sidebar context into its own file. The error "Cannot read properties of undefined (reading 'label')" was likely caused by the sidebar component trying to use the context before it was properly initialized due to the circular import between dashboard.tsx and sidebar.tsx. The sidebar context is now in a separate file (/lib/sidebar-context.tsx) which eliminates the circular dependency.
I've replaced the dark/light mode button with a toggle switch. The new implementation shows a sun icon on the left and moon icon on the right with a Switch component in between, making it visually clear which mode you're switching to. When the sidebar is collapsed, the toggle is displayed compactly with icons on both sides of the switch.