Tab Provider

TabProvider

A React context provider that manages and exposes the “current tab” state and the list of available modules/tabs.

Purpose

• Keeps track of the currently selected tab (module) in your UI.
• Provides functions to switch between tabs.
• Ensures components across your app can listen and respond to tab changes.

Props

interface TabProviderProps {
    children: React.ReactNode;
}

• children: The wrapped components that will have access to the context.

Example:

import { TabProvider } from "@/context/TabProvider";
import MainView from "@/components/MainView";

function App() {
    return (
        <TabProvider>
            <MainView />
        </TabProvider>
    );
}

---

useTabContext()

Hook to access the current tab and available tab list, and to change tabs.

Returns:

interface TabContextType {
    currentTab: ModuleKey;
    setCurrentTab: (key: ModuleKey) => void;
    availableTabs: ModuleKey[];
}

• currentTab: The active tab/module key (e.g., "home", "crm").
• setCurrentTab(key): Switches the active tab to the given key.
• availableTabs: List of all module keys registered in moduleRegistry.

Example Usage:

import { useTabContext } from "@/context/TabProvider";

function ModuleTabsMenu() {
    const { currentTab, setCurrentTab, availableTabs } = useTabContext();

    return (
        <nav>
            {availableTabs.map((tabKey) => (
                <button
                    key={tabKey}
                    onClick={() => setCurrentTab(tabKey)}
                    aria-pressed={currentTab === tabKey}
                >
                    {tabKey === currentTab ? "🔹" : "◦"} {tabKey}
                </button>
            ))}
        </nav>
    );
}

---

Integration Example

import { TabProvider, useTabContext } from "@/context/TabProvider";

function Sidebar() {
    const { currentTab, setCurrentTab, availableTabs } = useTabContext();

    return (
        <ul>
            {availableTabs.map((key) => (
                <li key={key}>
                    <button
                        onClick={() => setCurrentTab(key)}
                        style={{
                            fontWeight: currentTab === key ? "bold" : "normal",
                        }}
                    >
                        {key.toUpperCase()}
                    </button>
                </li>
            ))}
        </ul>
    );
}

function App() {
    return (
        <TabProvider>
            <Sidebar />
            <MainView />
        </TabProvider>
    );
}

---

✅ Summary

• TabProvider supplies the current tab key and a list of available module keys to descendants.
• useTabContext() allows components to read the active tab and switch tabs easily.