I'll implement offline network detection and handling for the organization switcher component:

Offline Network Detection Features

I've implemented comprehensive offline network detection and handling for the organization switcher with the following features:

1. Network Status Detection

• Custom Hook: Created a useNetworkStatus hook that tracks online/offline status using browser APIs
• Event Listeners: Listens for online and offline events to detect network changes in real-time
• Initial State Detection: Properly initializes with the current network state on component mount

2. Offline UI State

• Visual Indicators:

  • Orange color scheme to distinguish offline state from error states (red)
  • WiFi-off icon to clearly communicate network status
  • "You're offline" text in the button when disconnected

• Disabled Functionality:

  • All interactive elements are disabled when offline
  • Search input is disabled
  • Organization selection is prevented
  • Create organization and settings options are visually dimmed

3. User Feedback

• Informative Alert: Clear alert message explaining the offline status
• Loading Indicator: Animated dots show that the component is waiting for connection
• Visual Distinction: Orange color scheme makes it easy to distinguish from error states
• Accessibility: Proper ARIA attributes for screen readers

4. Auto-Recovery

• Connection Tracking: Keeps track of previous connection state to detect changes
• Automatic Retry: When connection is restored, automatically attempts to fetch data
• State Restoration: Smoothly transitions back to online state when connection returns

5. Demo Controls

• Offline Simulation: Added a switch to simulate offline status for testing
• Browser Override: For demo purposes, temporarily overrides the browser's navigator.onLine property
• Event Simulation: Dispatches the appropriate browser events to trigger the offline/online handlers

This implementation provides a seamless experience for users who may have intermittent or unreliable network connections, giving them clear feedback about their connection status and automatically recovering when possible.

I'll remove the simulation features and add an organization settings page:

I've removed the simulation features and added a comprehensive organization settings page:

Changes Made

1. Removed Simulation Features

• Removed all data loading simulation, error simulation, and offline simulation code
• Simplified the organization switcher component to focus on core functionality
• Removed the simulation controls from the home page

2. Added Organization Settings Page

I've created a complete organization settings page with:

Navigation

• Added routing to navigate to the settings page when clicking "Organization Settings"
• Implemented a back button to return to the home page
• Used dynamic routing with the organization slug (/settings/[slug])

Settings Interface

• Tabbed Interface: Created a tabbed layout with four main sections:

  • General: Basic organization information and settings
  • Members: Team member management
  • Security: Security settings and configurations
  • Billing: Subscription and payment information

Features

• Organization Profile: Display and edit organization details
• Team Management: View and manage team members
• Security Controls: Configure security settings like 2FA and SSO
• Billing Information: View and manage subscription and payment methods
• Danger Zone: Option to delete the organization

Design

• Used shadcn/ui components for a consistent look and feel
• Implemented a responsive layout that works on different screen sizes
• Added visual hierarchy with cards and sections
• Included sample data to demonstrate the interface

This implementation provides a complete organization management experience, allowing users to not only switch between organizations but also manage their settings in a comprehensive way.