docs updated

docs/frontDocs/contexts/component_contexts.md

@@ -0,0 +1,24 @@
+# Context
+
+Syncs each step of user's session with redis backend.
+
+```typescript
+// Create the config hook using the factory
+const useContextConfig = createContextHook<ClientPageConfig>({
+  endpoint: "/context/page/config",
+  contextName: "config",
+  enablePeriodicRefresh: false,
+});
+
+// Wrapper hook that adapts the generic hook to the expected interface
+export function useConfig(): UseConfigResult {
+  const { data, isLoading, error, refresh, update } = useContextConfig();
+  return {
+    configData: data,
+    isLoading,
+    error,
+    refresh,
+    update,
+  };
+}
+```

docs/frontDocs/contexts/component_menu.md

@@ -0,0 +1,40 @@
+# Menu
+
+Syncs each step of left menu actions with redis backend.
+
+```typescript
+// Create the menu hook using the factory
+const useContextMenu = createContextHook<ClientMenu>({
+  endpoint: "/context/page/menu",
+  contextName: "menu",
+  extractAvailableItems: (data) => data.selectionList || [],
+  enablePeriodicRefresh: false,
+});
+
+// Custom hook for menu data with the expected interface
+interface UseMenuResult {
+  menuData: ClientMenu | null;
+  availableApplications: string[];
+  isLoading: boolean;
+  error: string | null;
+  refreshMenu: () => Promise<void>;
+  updateMenu: (newMenu: ClientMenu) => Promise<boolean>;
+}
+
+// Wrapper hook that adapts the generic hook to the expected interface
+export function useMenu(): UseMenuResult {
+  const { data, availableItems, isLoading, error, refresh, update } =
+    useContextMenu();
+
+  return {
+    menuData: data,
+    availableApplications: availableItems,
+    isLoading,
+    error,
+    refreshMenu: refresh,
+    updateMenu: update,
+  };
+}
+
+export { checkContextPageMenu, setContextPageMenu };
+```

docs/frontDocs/contexts/component_online.md

@@ -0,0 +1,32 @@
+# Online
+
+```typescript
+// Create the online hook using the factory
+const useContextOnline = createContextHook<ClientOnline>({
+  endpoint: "/context/page/online",
+  contextName: "online",
+  enablePeriodicRefresh: true,
+  refreshInterval: 5 * 60 * 1000, // 5 minutes
+});
+
+// Custom hook for online data with the expected interface
+interface UseOnlineResult {
+  onlineData: ClientOnline | null;
+  isLoading: boolean;
+  error: string | null;
+  refreshOnline: () => Promise<void>;
+  updateOnline: (newOnline: ClientOnline) => Promise<boolean>;
+}
+
+// Wrapper hook that adapts the generic hook to the expected interface
+export function useOnline(): UseOnlineResult {
+  const { data, isLoading, error, refresh, update } = useContextOnline();
+  return {
+    onlineData: data,
+    isLoading,
+    error,
+    refreshOnline: refresh,
+    updateOnline: update,
+  };
+}
+```

docs/frontDocs/contexts/component_selection.md

@@ -0,0 +1,34 @@
+# Selection
+
+Syncs each step of duty or occupant selections of user with redis backend.
+
+```typescript
+// Create the selection hook using the factory
+const useContextSelection = createContextHook<ClientSelection>({
+  endpoint: "/context/dash/selection",
+  contextName: "selection",
+  enablePeriodicRefresh: false,
+});
+
+// Custom hook for selection data with the expected interface
+interface UseSelectionResult {
+  selectionData: ClientSelection | null;
+  isLoading: boolean;
+  error: string | null;
+  refreshSelection: () => Promise<void>;
+  updateSelection: (newSelection: ClientSelection) => Promise<boolean>;
+}
+
+// Wrapper hook that adapts the generic hook to the expected interface
+export function useSelection(): UseSelectionResult {
+  const { data, isLoading, error, refresh, update } = useContextSelection();
+
+  return {
+    selectionData: data,
+    isLoading,
+    error,
+    refreshSelection: refresh,
+    updateSelection: update,
+  };
+}
+```

docs/frontDocs/contexts/component_user.md

@@ -0,0 +1,34 @@
+# User
+
+Syncs user info data with redis backend.
+
+```typescript
+// Create the selection hook using the factory
+const useContextSelection = createContextHook<ClientSelection>({
+  endpoint: "/context/dash/selection",
+  contextName: "selection",
+  enablePeriodicRefresh: false,
+});
+
+// Custom hook for selection data with the expected interface
+interface UseSelectionResult {
+  selectionData: ClientSelection | null;
+  isLoading: boolean;
+  error: string | null;
+  refreshSelection: () => Promise<void>;
+  updateSelection: (newSelection: ClientSelection) => Promise<boolean>;
+}
+
+// Wrapper hook that adapts the generic hook to the expected interface
+export function useSelection(): UseSelectionResult {
+  const { data, isLoading, error, refresh, update } = useContextSelection();
+
+  return {
+    selectionData: data,
+    isLoading,
+    error,
+    refreshSelection: refresh,
+    updateSelection: update,
+  };
+}
+```