npm - @actschurch/ccms-sdk - Versions diffs - 0.0.1 - Mend

@actschurch/ccms-sdk 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4376) hide show

package/README.html ADDED Viewed

@@ -0,0 +1,2464 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CCMS SDK - Documentation</title>
+  <style>
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #24292f;
+  background-color: #ffffff;
+  max-width: 1012px;
+  margin: 0 auto;
+  padding: 45px;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+  border-bottom: 1px solid #d0d7de;
+  padding-bottom: 0.3em;
+}
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.25em; border-bottom: none; }
+h4 { font-size: 1em; border-bottom: none; }
+h5 { font-size: 0.875em; border-bottom: none; }
+h6 { font-size: 0.85em; border-bottom: none; color: #57606a; }
+p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+a {
+  color: #0969da;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+code {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 85%;
+  background-color: #f6f8fa;
+  padding: 0.2em 0.4em;
+  border-radius: 6px;
+}
+pre {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+}
+pre code {
+  background-color: transparent;
+  padding: 0;
+  font-size: 100%;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-top: 0;
+  margin-bottom: 16px;
+  width: 100%;
+  overflow: auto;
+}
+table th,
+table td {
+  padding: 6px 13px;
+  border: 1px solid #d0d7de;
+}
+table th {
+  font-weight: 600;
+  background-color: #f6f8fa;
+}
+table tr {
+  background-color: #ffffff;
+  border-top: 1px solid #d0d7de;
+}
+table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+ul, ol {
+  margin-top: 0;
+  margin-bottom: 16px;
+  padding-left: 2em;
+}
+li {
+  margin-top: 0.25em;
+}
+hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #d0d7de;
+  border: 0;
+}
+blockquote {
+  padding: 0 1em;
+  color: #57606a;
+  border-left: 0.25em solid #d0d7de;
+  margin: 0 0 16px 0;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+strong {
+  font-weight: 600;
+}
+@media (max-width: 768px) {
+  body {
+    padding: 15px;
+  }
+}
+/* Syntax highlighting for code blocks */
+.language-typescript,
+.language-tsx,
+.language-javascript,
+.language-jsx,
+.language-bash,
+.language-json {
+  color: #24292f;
+}
+  </style>
+</head>
+<body>
+<h1>CCMS SDK</h1>
+<p>Official TypeScript/JavaScript SDK for the CCMS (Church/Community Management System) Platform. This SDK provides a comprehensive set of tools for building web and mobile applications that integrate with the CCMS backend.</p>
+<h2>Features</h2>
+<ul>
+<li><strong>Cross-Platform</strong>: Works seamlessly on Web (React, Vue, vanilla JS) and React Native</li>
+<li><strong>TypeScript First</strong>: Full type definitions for all APIs and models</li>
+<li><strong>Authentication</strong>: Complete auth flow with automatic token refresh</li>
+<li><strong>Real-time Communication</strong>: SignalR-based presence tracking and log streaming with automatic reconnection</li>
+<li><strong>Permission Management</strong>: Role-based access control with feature definitions</li>
+<li><strong>React Integration</strong>: 50+ hooks and components for React applications</li>
+<li><strong>Comprehensive Services</strong>: 15+ domain-specific service modules with 100+ API endpoints</li>
+<li><strong>Utility Library</strong>: Extensive utilities for strings, dates, arrays, validation, and more</li>
+<li><strong>Developer Experience</strong>: Auto-complete, type safety, and comprehensive documentation</li>
+<p></ul></p>
+<h2>What's New</h2>
+<h3>Latest Updates</h3>
+<ul>
+<li><strong>🚀 Enhanced Service Architecture</strong>: Comprehensive service modules covering <strong>18 domains</strong> with <strong>168+ services</strong> including Task Management (12 services), Communication (6 services), Procurement (18 services), Payments (14 services), Projects (17 services), HR (19 services), Meetings (14 services), and more. See <a href="#services">Services</a> for details.</li>
+<li><strong>📡 New Realtime Module</strong>: Completely redesigned real-time communication with SignalR-based hubs for <strong>presence tracking</strong> (with activity detection) and <strong>log streaming</strong> (application, API, query, and dashboard logs). See <a href="#real-time">Real-time</a> for migration guide.</li>
+<li><strong>⚛️ Expanded React Hooks</strong>: <strong>18 service-specific hooks</strong> (<code>useTaskServices</code>, <code>useCommunicationServices</code>, <code>useMeetingsServices</code>, etc.) and <strong>8 dedicated realtime hooks</strong> for presence tracking and log streaming.</li>
+<li><strong>🎨 Activity Detection</strong>: Automatic user status updates based on activity for both web (mouse, keyboard, visibility) and React Native (AppState) platforms.</li>
+<li><strong>📚 Comprehensive Documentation</strong>: Detailed module-level documentation for <a href="src/services/README.md">Services</a> and <a href="src/realtime/README.md">Realtime</a>.</li>
+<p></ul></p>
+<h2>Table of Contents</h2>
+<ul>
+<li><a href="#whats-new">What's New</a></li>
+<li><a href="#installation">Installation</a></li>
+<li><a href="#quick-start">Quick Start</a></li>
+<li><a href="#core-concepts">Core Concepts</a></li>
+<p></ul>
+  - <a href="#http-client">HTTP Client</a>
+  - <a href="#authentication">Authentication</a>
+  - <a href="#permissions">Permissions</a>
+  - <a href="#real-time">Real-time</a>
+  - <a href="#error-handling">Error Handling</a></p>
+<ul>
+<li><a href="#react-integration">React Integration</a></li>
+<p></ul>
+  - <a href="#provider-setup">Provider Setup</a>
+  - <a href="#hooks">Hooks</a>
+  - <a href="#components">Components</a></p>
+<ul>
+<li><a href="#react-native-setup">React Native Setup</a></li>
+<li><a href="#services">Services</a></li>
+<li><a href="#utilities">Utilities</a></li>
+<li><a href="#models">Models</a></li>
+<li><a href="#testing">Testing</a></li>
+<li><a href="#api-reference">API Reference</a></li>
+<p></ul></p>
+<hr>
+<h2>Installation</h2>
+<pre><code class="language-bash">npm install @ccms/sdk
+<h1>or</h1>
+<p>yarn add @ccms/sdk</p>
+<h1>or</h1>
+<p>pnpm add @ccms/sdk</code></pre></p>
+<h3>Peer Dependencies</h3>
+<p>For React applications:</p>
+<pre><code class="language-bash">npm install react@^18.0.0</code></pre>
+<hr>
+<h2>Quick Start</h2>
+<h3>Basic Setup (Vanilla JavaScript/TypeScript)</h3>
+<pre><code class="language-typescript">import { HttpClient, AuthManager, LocalStorageAdapter } from &#039;@ccms/sdk&#039;;
+<p>// Create HTTP client
+const http = new HttpClient({
+  baseUrl: &#039;https://api.yourccms.com&#039;,
+});</p>
+<p>// Create auth manager with storage
+const authManager = new AuthManager(http, {
+  storage: new LocalStorageAdapter(),
+  autoRefresh: true,
+});</p>
+<p>// Initialize auth (loads user from storage)
+await authManager.initialize();</p>
+<p>// Login
+const user = await authManager.login({
+  email: &#039;user@example.com&#039;,
+  password: &#039;password123&#039;,
+});</p>
+<p>// Make authenticated requests
+const response = await http.get(&#039;/api/members&#039;);</code></pre></p>
+<h3>React Setup</h3>
+<pre><code class="language-tsx">import { CCMSProvider, useCCMS, useAuth } from &#039;@ccms/sdk&#039;;
+<p>// Wrap your app with CCMSProvider
+function App() {
+  return (
+    &lt;CCMSProvider
+      config={{
+        baseUrl: &#039;https://api.yourccms.com&#039;,
+        enableRealtime: true,
+      }}
+    &gt;
+      &lt;MyApp /&gt;
+    &lt;/CCMSProvider&gt;
+  );
+}</p>
+<p>// Use hooks in your components
+function Dashboard() {
+  const { http } = useCCMS();
+  const { user, isAuthenticated, login, logout } = useAuth();</p>
+<p>  if (!isAuthenticated) {
+    return &lt;LoginForm onLogin={login} /&gt;;
+  }</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;h1&gt;Welcome, {user?.firstName}!&lt;/h1&gt;
+      &lt;button onClick={logout}&gt;Logout&lt;/button&gt;
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<hr>
+<h2>Core Concepts</h2>
+<h3>HTTP Client</h3>
+<p>The <code>HttpClient</code> is the foundation for all API communication. It handles request/response interceptors, authentication headers, and error handling.</p>
+<pre><code class="language-typescript">import { HttpClient } from &#039;@ccms/sdk&#039;;
+<p>const http = new HttpClient({
+  baseUrl: &#039;https://api.yourccms.com&#039;,
+  timeout: 30000, // 30 seconds
+  headers: {
+    &#039;X-Custom-Header&#039;: &#039;value&#039;,
+  },
+});</p>
+<p>// GET request
+const members = await http.get&lt;Member[]&gt;(&#039;/api/members&#039;);</p>
+<p>// POST request
+const newMember = await http.post&lt;Member&gt;(&#039;/api/members&#039;, {
+  firstName: &#039;John&#039;,
+  lastName: &#039;Doe&#039;,
+  email: &#039;john@example.com&#039;,
+});</p>
+<p>// PUT request
+const updated = await http.put&lt;Member&gt;(&#039;/api/members/123&#039;, {
+  firstName: &#039;Jane&#039;,
+});</p>
+<p>// DELETE request
+await http.delete(&#039;/api/members/123&#039;);</p>
+<p>// Request with query parameters
+const filtered = await http.get&lt;Member[]&gt;(&#039;/api/members&#039;, {
+  params: { status: &#039;active&#039;, page: 1, pageSize: 20 },
+});</code></pre></p>
+<h4>Interceptors</h4>
+<p>Add request/response interceptors for logging, error handling, or modifying requests:</p>
+<pre><code class="language-typescript">// Request interceptor
+<p>http.interceptors.request.use(
+  (config) =&gt; {
+    console.log(&#039;Request:&#039;, config.url);
+    return config;
+  },
+  (error) =&gt; Promise.reject(error)
+);</p>
+<p>// Response interceptor
+http.interceptors.response.use(
+  (response) =&gt; {
+    console.log(&#039;Response:&#039;, response.status);
+    return response;
+  },
+  (error) =&gt; {
+    if (error.status === 401) {
+      // Handle unauthorized
+    }
+    return Promise.reject(error);
+  }
+);</code></pre></p>
+<hr>
+<h3>Authentication</h3>
+<p>The <code>AuthManager</code> handles the complete authentication flow including login, logout, token refresh, and session persistence.</p>
+<pre><code class="language-typescript">import { AuthManager, LocalStorageAdapter, MemoryStorageAdapter } from &#039;@ccms/sdk&#039;;
+<p>// Create auth manager
+const authManager = new AuthManager(http, {
+  // Storage adapter (choose based on platform)
+  storage: new LocalStorageAdapter(), // Web
+  // storage: new AsyncStorageAdapter(AsyncStorage), // React Native
+  // storage: new MemoryStorageAdapter(), // SSR or testing</p>
+<p>  // Token refresh configuration
+  autoRefresh: true,
+  refreshThresholdSeconds: 60, // Refresh 60s before expiry
+  refreshCheckIntervalMs: 30000, // Check every 30s</p>
+<p>  // Callbacks
+  onLogin: (user) =&gt; console.log(&#039;User logged in:&#039;, user.email),
+  onLogout: () =&gt; console.log(&#039;User logged out&#039;),
+  onRefresh: (user) =&gt; console.log(&#039;Token refreshed&#039;),
+  onError: (error) =&gt; console.error(&#039;Auth error:&#039;, error),
+});</p>
+<p>// Initialize (loads persisted session)
+const user = await authManager.initialize();</p>
+<p>// Login
+try {
+  const user = await authManager.login({
+    email: &#039;user@example.com&#039;,
+    password: &#039;password123&#039;,
+  });
+  console.log(&#039;Logged in as:&#039;, user.firstName);
+} catch (error) {
+  console.error(&#039;Login failed:&#039;, error.message);
+}</p>
+<p>// Get current state
+const state = authManager.getState();
+// { isAuthenticated: true, user: {...}, isLoading: false, error: null }</p>
+<p>// Check permissions
+if (authManager.hasRole(&#039;admin&#039;)) {
+  // User is admin
+}</p>
+<p>if (authManager.hasRight(&#039;members.edit&#039;)) {
+  // User can edit members
+}</p>
+<p>// Subscribe to state changes
+const unsubscribe = authManager.subscribe((state) =&gt; {
+  console.log(&#039;Auth state changed:&#039;, state);
+});</p>
+<p>// Logout
+await authManager.logout();</p>
+<p>// Cleanup
+unsubscribe();
+authManager.destroy();</code></pre></p>
+<h4>Storage Adapters</h4>
+<p>Different storage adapters for different platforms:</p>
+<pre><code class="language-typescript">import {
+<p>  LocalStorageAdapter,      // Web - localStorage
+  SessionStorageAdapter,    // Web - sessionStorage
+  MemoryStorageAdapter,     // In-memory (SSR/testing)
+  AsyncStorageAdapter,      // React Native
+  SecureStorageAdapter,     // React Native - secure storage
+  CookieStorageAdapter,     // SSR/universal apps
+  GenericStorageAuthAdapter, // Custom storage
+} from &#039;@ccms/sdk&#039;;</p>
+<p>// React Native with AsyncStorage
+import AsyncStorage from &#039;@react-native-async-storage/async-storage&#039;;
+const storage = new AsyncStorageAdapter(AsyncStorage);</p>
+<p>// React Native with Expo SecureStore
+import * as SecureStore from &#039;expo-secure-store&#039;;
+const storage = new SecureStorageAdapter(SecureStore);</p>
+<p>// Custom storage key
+const storage = new LocalStorageAdapter(&#039;my<em>app</em>auth&#039;);</code></pre></p>
+<hr>
+<h3>Permissions</h3>
+<p>The <code>PermissionManager</code> handles feature-based access control using roles and permissions.</p>
+<pre><code class="language-typescript">import { PermissionManager, defineFeature, requires } from &#039;@ccms/sdk&#039;;
+<p>// Create permission manager
+const permissions = new PermissionManager({
+  defaultAllow: false,
+  debug: true,
+});</p>
+<p>// Define features with requirements
+permissions.registerFeatures([
+  defineFeature(&#039;members.view&#039;, &#039;View Members&#039;, [
+    requires.anyRole([&#039;admin&#039;, &#039;staff&#039;, &#039;member&#039;]),
+  ]),</p>
+<p>  defineFeature(&#039;members.edit&#039;, &#039;Edit Members&#039;, [
+    requires.anyRole([&#039;admin&#039;, &#039;staff&#039;]),
+    requires.right(&#039;members.write&#039;),
+  ]),</p>
+<p>  defineFeature(&#039;admin.dashboard&#039;, &#039;Admin Dashboard&#039;, [
+    requires.role(&#039;admin&#039;),
+  ]),</p>
+<p>  defineFeature(&#039;reports.financial&#039;, &#039;Financial Reports&#039;, [
+    requires.allRoles([&#039;admin&#039;, &#039;finance&#039;]),
+  ]),</p>
+<p>  defineFeature(&#039;custom.feature&#039;, &#039;Custom Feature&#039;, [
+    requires.custom(() =&gt; someCondition(), &#039;customCheck&#039;),
+  ]),
+]);</p>
+<p>// Set user context (usually done after login)
+permissions.setContext({
+  roles: user.roles,
+  rights: user.rights,
+  isAuthenticated: true,
+  userId: user.id,
+});</p>
+<p>// Check permissions
+if (permissions.can(&#039;members.edit&#039;)) {
+  // User can edit members
+}</p>
+<p>// Get detailed check result
+const result = permissions.check(&#039;members.edit&#039;);
+// { allowed: false, reason: &#039;...&#039;, missing: [&#039;members.write&#039;] }</p>
+<p>// Direct role/right checks
+permissions.hasRole(&#039;admin&#039;);
+permissions.hasAnyRole([&#039;admin&#039;, &#039;staff&#039;]);
+permissions.hasAllRoles([&#039;admin&#039;, &#039;finance&#039;]);
+permissions.hasRight(&#039;members.write&#039;);
+permissions.hasAnyRight([&#039;members.read&#039;, &#039;members.write&#039;]);</p>
+<p>// Listen for denied access attempts
+permissions.onDenied((event) =&gt; {
+  console.log(&#039;Access denied to feature:&#039;, event.featureId);
+  analytics.track(&#039;permission_denied&#039;, event);
+});</code></pre></p>
+<hr>
+<h3>Real-time</h3>
+<p>The CCMS SDK provides robust real-time communication infrastructure using SignalR WebSockets with automatic reconnection, type-safe event handling, and React integration.</p>
+<h4>Key Features</h4>
+<ul>
+<li><strong>🔄 Automatic Reconnection</strong> - Exponential backoff strategy with delays: [2s, 4s, 8s, 16s, 30s]</li>
+<li><strong>🔐 JWT Authentication</strong> - Seamless integration with CCMS auth system</li>
+<li><strong>📡 Multiple Hubs</strong> - Separate hubs for presence tracking (1 hub) and log streaming (4 hubs)</li>
+<li><strong>⚛️ React Integration</strong> - First-class React support with 8 dedicated hooks and context providers</li>
+<li><strong>📱 Cross-Platform</strong> - Works in web browsers and React Native applications</li>
+<li><strong>🎨 Activity Detection</strong> - Automatic user status updates based on platform-specific activity monitoring</li>
+<li><strong>🔌 Auto-Management</strong> - Automatic connection on login, disconnection on logout</li>
+<p></ul></p>
+<p>For comprehensive documentation, see the <a href="src/realtime/README.md">Realtime Module Documentation</a>.</p>
+<h4>Presence Tracking</h4>
+<p>Track user presence and status across the platform with automatic activity detection and real-time updates.</p>
+<p><strong>Features:</strong></p>
+<ul>
+<li><strong>Auto-Connect on Login</strong> - PresenceProvider automatically connects when user authenticates</li>
+<li><strong>Activity Detection</strong> - Monitors user activity (web: mouse/keyboard/visibility; React Native: AppState)</li>
+<li><strong>Auto-Away Status</strong> - Automatically sets status to "Away" after 5 minutes of inactivity</li>
+<li><strong>Multi-Device Support</strong> - Handles multiple concurrent connections per user</li>
+<li><strong>Status Broadcasting</strong> - Real-time updates broadcast to all connected clients</li>
+<p></ul></p>
+<p><strong>Available Statuses:</strong> <code>Online</code>, <code>Away</code>, <code>Busy</code>, <code>Offline</code></p>
+<pre><code class="language-tsx">import { PresenceProvider, usePresence, useUserPresence, useOnlineUsers, usePresenceStatus, PresenceStatus } from &#039;@ccms/sdk/realtime/presence&#039;;
+<p>// Setup in your app root with auto-connection management
+function App() {
+  return (
+    &lt;PresenceProvider
+      authManager={authManager}
+      baseUrl=&quot;https://api.example.com&quot;
+      options={{
+        activityTimeout: 5 <em> 60 </em> 1000,        // 5 minutes until &quot;Away&quot;
+        enableActivityDetection: true,
+        platform: &#039;web&#039;,                       // or &#039;react-native&#039;
+        autoReconnect: true,
+        maxReconnectAttempts: 10,
+      }}
+      onConnectionChange={(connected) =&gt; console.log(&#039;Presence:&#039;, connected)}
+    &gt;
+      &lt;YourApp /&gt;
+    &lt;/PresenceProvider&gt;
+  );
+}</p>
+<p>// Use in components - get specific user&#039;s presence
+function UserStatus({ userId }: { userId: string }) {
+  const userPresence = useUserPresence(userId);
+  const { updateStatus } = usePresence();</p>
+<p>  return (
+    &lt;div className=&quot;flex items-center gap-2&quot;&gt;
+      &lt;StatusIndicator status={userPresence?.status || &#039;Offline&#039;} /&gt;
+      &lt;span&gt;{userPresence?.statusMessage || userPresence?.status}&lt;/span&gt;
+      &lt;button onClick={() =&gt; updateStatus(PresenceStatus.Busy, &#039;In a meeting&#039;)}&gt;
+        Set Busy
+      &lt;/button&gt;
+    &lt;/div&gt;
+  );
+}</p>
+<p>// Show all online users
+function OnlineUsersList() {
+  const onlineUsers = useOnlineUsers(); // Returns UserPresenceUpdate[]
+  const myStatus = usePresenceStatus();</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;p&gt;My Status: {myStatus}&lt;/p&gt;
+      &lt;p&gt;Online Users: {onlineUsers.length}&lt;/p&gt;
+      &lt;ul&gt;
+        {onlineUsers.map(user =&gt; (
+          &lt;li key={user.userId}&gt;{user.userName} - {user.status}&lt;/li&gt;
+        ))}
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<p><strong>Activity Detection:</strong></p>
+<ul>
+<li><strong>Web Platform</strong>: Monitors mouse movement, clicks, keyboard, scrolling, tab visibility</li>
+<li><strong>React Native</strong>: Monitors AppState changes (foreground/background)</li>
+<li><strong>Throttled</strong>: Maximum 1 status update per second for performance</li>
+<li><strong>Configurable</strong>: Customize inactivity timeout and check intervals</li>
+<p></ul></p>
+<h4>Real-time Log Streaming</h4>
+<p>Stream application logs, API requests, database queries, and system metrics in real-time with powerful filtering capabilities.</p>
+<p><strong>Available Log Hubs:</strong>
+<li><strong>Application Logs</strong> - General application logs (errors, warnings, information)</li>
+<li><strong>API Logs</strong> - HTTP request/response logs with performance metrics</li>
+<li><strong>Query Logs</strong> - Database query performance and slow query tracking</li>
+<li><strong>Dashboard</strong> - Aggregated statistics and system health metrics</li>
+<p><strong>Features:</strong></p>
+<ul>
+<li><strong>Filter-Based Subscription</strong> - Subscribe only to relevant logs (by service, level, duration, etc.)</li>
+<li><strong>Buffer Management</strong> - Configurable in-memory buffer with FIFO eviction</li>
+<li><strong>Auto-Load Recent</strong> - Optionally load historical logs on subscription</li>
+<li><strong>Correlation Tracing</strong> - Track all logs related to a single request by correlation ID</li>
+<li><strong>Manual Connection</strong> - Connect/disconnect explicitly or with auto-connect option</li>
+<p></ul></p>
+<pre><code class="language-tsx">import {
+<p>  useApplicationLogs,
+  useApiLogs,
+  useQueryLogs,
+  useDashboard,
+} from &#039;@ccms/sdk/realtime/logs&#039;;</p>
+<p>// Application logs with filtering and event handling
+function LogsViewer() {
+  const {
+    logs,
+    isConnected,
+    isSubscribed,
+    error,
+    connect,
+    disconnect,
+    subscribe,
+    unsubscribe,
+    clearLogs,
+    loadRecent,
+  } = useApplicationLogs({
+    autoConnect: true,
+    filter: {
+      serviceNames: [&#039;CCMS.API&#039;, &#039;CCMS.Tasks&#039;],
+      logLevels: [&#039;Error&#039;, &#039;Warning&#039;, &#039;Critical&#039;],
+      userId: currentUser?.id,                        // Filter by user
+    },
+    maxBufferSize: 1000,                              // Keep last 1000 logs
+    autoLoadRecent: true,                             // Load recent on subscribe
+    recentLogsLimit: 100,                             // Load 100 recent logs
+    onLog: (log) =&gt; {
+      // Handle new log in real-time
+      if (log.level === &#039;Critical&#039;) {
+        showNotification({ title: &#039;Critical Error&#039;, message: log.message });
+      }
+    },
+  });</p>
+<p>  useEffect(() =&gt; {
+    subscribe();
+    return () =&gt; disconnect();
+  }, []);</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;div className=&quot;status&quot;&gt;
+        Status: {isConnected ? &#039;🟢 Connected&#039; : &#039;🔴 Disconnected&#039;}
+        {isSubscribed &amp;&amp; &#039; (Subscribed)&#039;}
+      &lt;/div&gt;
+      &lt;button onClick={clearLogs}&gt;Clear Logs&lt;/button&gt;
+      &lt;table&gt;
+        &lt;thead&gt;
+          &lt;tr&gt;
+            &lt;th&gt;Time&lt;/th&gt;
+            &lt;th&gt;Level&lt;/th&gt;
+            &lt;th&gt;Service&lt;/th&gt;
+            &lt;th&gt;Message&lt;/th&gt;
+          &lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tbody&gt;
+          {logs.map((log) =&gt; (
+            &lt;tr key={log.id} className={<code>log-${log.level.toLowerCase()}</code>}&gt;
+              &lt;td&gt;{new Date(log.timestamp).toLocaleString()}&lt;/td&gt;
+              &lt;td&gt;{log.level}&lt;/td&gt;
+              &lt;td&gt;{log.serviceName}&lt;/td&gt;
+              &lt;td&gt;{log.message}&lt;/td&gt;
+            &lt;/tr&gt;
+          ))}
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+    &lt;/div&gt;
+  );
+}</p>
+<p>// API request logs - track slow or failed requests
+function ApiLogsMonitor() {
+  const { logs } = useApiLogs({
+    autoConnect: true,
+    filter: {
+      minDurationMs: 1000,                             // Only slow requests (&gt;1s)
+      statusCodes: [400, 404, 500, 502, 503],          // Error codes
+      pathFilter: &#039;/api/&#039;,                             // Path pattern
+    },
+  });</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;h3&gt;Slow &amp; Failed API Requests&lt;/h3&gt;
+      {logs.map(log =&gt; (
+        &lt;div key={log.id}&gt;
+          &lt;span&gt;{log.httpMethod} {log.path}&lt;/span&gt;
+          &lt;span&gt;Status: {log.statusCode}&lt;/span&gt;
+          &lt;span&gt;Duration: {log.durationMs}ms&lt;/span&gt;
+        &lt;/div&gt;
+      ))}
+    &lt;/div&gt;
+  );
+}</p>
+<p>// Query performance logs - track slow database queries
+function QueryPerformanceMonitor() {
+  const { logs } = useQueryLogs({
+    filter: {
+      slowOnly: true,                                  // Only marked as slow
+      minDurationMs: 500,                              // &gt;500ms
+      queryTypes: [&#039;SELECT&#039;],                          // Only SELECT queries
+    },
+  });</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;h3&gt;Slow Database Queries&lt;/h3&gt;
+      {logs.map(log =&gt; (
+        &lt;div key={log.id}&gt;
+          &lt;span&gt;{log.queryType} - {log.entityType}&lt;/span&gt;
+          &lt;span&gt;Duration: {log.durationMs}ms&lt;/span&gt;
+          &lt;span&gt;Rows: {log.rowCount}&lt;/span&gt;
+        &lt;/div&gt;
+      ))}
+    &lt;/div&gt;
+  );
+}</p>
+<p>// System dashboard with real-time statistics
+function PerformanceDashboard() {
+  const {
+    stats,
+    isConnected,
+    refreshStats,
+    getLogsByCorrelationId,
+    getRecentErrors,
+    startAutoRefresh,
+    stopAutoRefresh,
+  } = useDashboard({
+    autoConnect: true,
+    refreshInterval: 5000,                             // Auto-refresh every 5s
+    onUpdate: (stats) =&gt; {
+      console.log(&#039;Dashboard updated:&#039;, stats);
+    },
+  });</p>
+<p>  useEffect(() =&gt; {
+    startAutoRefresh();
+    return () =&gt; stopAutoRefresh();
+  }, []);</p>
+<p>  const handleCorrelationTrace = async (correlationId: string) =&gt; {
+    const trace = await getLogsByCorrelationId(correlationId);
+    // trace.applicationLogs, trace.apiLogs, trace.queryLogs
+    console.log(&#039;Full request trace:&#039;, trace);
+  };</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;h2&gt;System Health Dashboard&lt;/h2&gt;
+      &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;
+        &lt;MetricCard
+          title=&quot;Avg Response Time&quot;
+          value={<code>${stats?.averageResponseTime.toFixed(2)}ms</code>}
+        /&gt;
+        &lt;MetricCard
+          title=&quot;Error Rate&quot;
+          value={<code>${((stats?.errorRequests / stats?.totalApiRequests) * 100).toFixed(2)}%</code>}
+          alert={stats?.errorRequests &gt; 10}
+        /&gt;
+        &lt;MetricCard
+          title=&quot;Slow Queries&quot;
+          value={stats?.slowQueries}
+        /&gt;
+        &lt;MetricCard
+          title=&quot;Active Services&quot;
+          value={stats?.activeServices.length}
+        /&gt;
+        &lt;MetricCard
+          title=&quot;Logs/Minute&quot;
+          value={stats?.logsPerMinute}
+        /&gt;
+        &lt;MetricCard
+          title=&quot;Total Errors&quot;
+          value={stats?.errorCount}
+        /&gt;
+      &lt;/div&gt;
+      &lt;button onClick={refreshStats}&gt;Refresh Now&lt;/button&gt;
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<p><strong>Log Entry Structures:</strong></p>
+<ul>
+<li><strong>ApplicationLogEntry</strong>: timestamp, level, category, message, exception, correlationId, serviceName, properties</li>
+<li><strong>ApiRequestLogEntry</strong>: httpMethod, path, statusCode, durationMs, requestBody, responseBody, headers</li>
+<li><strong>QueryPerformanceLogEntry</strong>: queryType, entityType, queryText, durationMs, rowCount, isSlowQuery</li>
+<li><strong>DashboardStats</strong>: Aggregated metrics including averages, counts, and active services</li>
+<p></ul></p>
+<h4>Migration from Legacy RealtimeClient</h4>
+<p>The old <code>RealtimeClient</code> is deprecated. Migrate to the new SignalR-based modules:</p>
+<pre><code class="language-typescript">// Old (deprecated)
+<p>import { RealtimeClient } from &#039;@ccms/sdk&#039;;
+const realtime = new RealtimeClient(config);
+realtime.updatePresence(&#039;Online&#039;);</p>
+<p>// New (recommended)
+import { usePresence } from &#039;@ccms/sdk/realtime/presence&#039;;
+const { updateStatus } = usePresence();
+updateStatus(PresenceStatus.Online);</code></pre></p>
+<hr>
+<h3>Error Handling</h3>
+<p>The SDK provides comprehensive error handling utilities.</p>
+<pre><code class="language-typescript">import { ErrorHandler, CCMSError } from &#039;@ccms/sdk&#039;;
+<p>// Create error handler
+const errorHandler = new ErrorHandler({
+  onError: (error) =&gt; {
+    // Global error handling
+    console.error(&#039;Error:&#039;, error.message);
+  },
+  displayMode: &#039;toast&#039;, // &#039;toast&#039; | &#039;modal&#039; | &#039;none&#039;
+});</p>
+<p>// Handle errors
+try {
+  await someOperation();
+} catch (error) {
+  errorHandler.handle(error);
+}</p>
+<p>// Custom error class
+throw new CCMSError(&#039;Something went wrong&#039;, {
+  code: &#039;VALIDATION_ERROR&#039;,
+  statusCode: 400,
+  details: { field: &#039;email&#039; },
+});</code></pre></p>
+<hr>
+<h2>React Integration</h2>
+<h3>Provider Setup</h3>
+<p>Wrap your application with <code>CCMSProvider</code>:</p>
+<pre><code class="language-tsx">import { CCMSProvider } from &#039;@ccms/sdk&#039;;
+<p>function App() {
+  return (
+    &lt;CCMSProvider
+      config={{
+        baseUrl: &#039;https://api.yourccms.com&#039;,
+        enableRealtime: true,
+        realtimeUrl: &#039;wss://api.yourccms.com&#039;, // Optional
+      }}
+      authConfig={{
+        autoRefresh: true,
+        refreshThresholdSeconds: 60,
+      }}
+    &gt;
+      &lt;YourApp /&gt;
+    &lt;/CCMSProvider&gt;
+  );
+}</code></pre></p>
+<h3>Hooks</h3>
+<h4>Core Hooks</h4>
+<pre><code class="language-tsx">import {
+<p>  useCCMS,
+  useAuth,
+  useHttpClient,
+  useRealtime,
+  usePermissions,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>function MyComponent() {
+  // Access full SDK context
+  const { http, auth, realtime, permissions } = useCCMS();</p>
+<p>  // Or use specific hooks
+  const httpClient = useHttpClient();
+  const realtimeClient = useRealtime();
+  const permissionManager = usePermissions();
+}</code></pre></p>
+<h4>Authentication Hooks</h4>
+<pre><code class="language-tsx">import { useAuth, useIsAuthenticated, useUser, useHasRole, useHasRight } from &#039;@ccms/sdk&#039;;
+<p>function Profile() {
+  const { user, isAuthenticated, isLoading, login, logout } = useAuth();</p>
+<p>  // Or use individual hooks
+  const isLoggedIn = useIsAuthenticated();
+  const currentUser = useUser();
+  const isAdmin = useHasRole(&#039;admin&#039;);
+  const canEditMembers = useHasRight(&#039;members.edit&#039;);</p>
+<p>  if (isLoading) return &lt;Loading /&gt;;
+  if (!isAuthenticated) return &lt;LoginForm /&gt;;</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;h1&gt;Welcome, {user?.firstName}&lt;/h1&gt;
+      {isAdmin &amp;&amp; &lt;AdminPanel /&gt;}
+      {canEditMembers &amp;&amp; &lt;EditButton /&gt;}
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<h4>API Hooks</h4>
+<pre><code class="language-tsx">import { useQuery, useMutation, useInfiniteQuery, usePrefetch } from &#039;@ccms/sdk&#039;;
+<p>function MemberList() {
+  // Fetch data
+  const {
+    data: members,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery&lt;Member[]&gt;(&#039;/api/members&#039;, {
+    enabled: true,
+    refetchOnFocus: true,
+  });</p>
+<p>  // Mutations
+  const { mutate: createMember, isLoading: isCreating } = useMutation&lt;Member&gt;(
+    &#039;/api/members&#039;,
+    &#039;POST&#039;,
+    {
+      onSuccess: (member) =&gt; {
+        console.log(&#039;Created:&#039;, member);
+        refetch();
+      },
+      onError: (error) =&gt; console.error(error),
+    }
+  );</p>
+<p>  // Infinite scrolling
+  const {
+    pages,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery&lt;Member&gt;(&#039;/api/members&#039;, undefined, {
+    pageSize: 20,
+  });</p>
+<p>  // Prefetch for navigation
+  const { prefetch } = usePrefetch();</p>
+<p>  const handleHover = (memberId: string) =&gt; {
+    prefetch&lt;Member&gt;(<code>/api/members/${memberId}</code>);
+  };
+}</code></pre></p>
+<h4>Realtime Hooks</h4>
+<h5>Presence Hooks</h5>
+<pre><code class="language-tsx">import {
+<p>  usePresence,
+  usePresenceStatus,
+  useOnlineUsers,
+  useUserPresence,
+} from &#039;@ccms/sdk/realtime/presence&#039;;</p>
+<p>function ChatRoom() {
+  // Main presence hook
+  const { state, updateStatus, getUserPresence, getAllPresence } = usePresence();</p>
+<p>  // Get current user&#039;s status
+  const myStatus = usePresenceStatus(); // &#039;Online&#039; | &#039;Away&#039; | &#039;Busy&#039; | &#039;Offline&#039;</p>
+<p>  // Get all online users
+  const onlineUsers = useOnlineUsers(); // UserPresenceUpdate[]</p>
+<p>  // Get specific user&#039;s presence
+  const userPresence = useUserPresence(&#039;user-123&#039;);</p>
+<p>  useEffect(() =&gt; {
+    updateStatus(&#039;Online&#039;, &#039;In chat room&#039;);
+    return () =&gt; updateStatus(&#039;Offline&#039;);
+  }, []);</p>
+<p>  return (
+    &lt;div&gt;
+      &lt;p&gt;Your status: {myStatus}&lt;/p&gt;
+      &lt;p&gt;Online users: {onlineUsers.length}&lt;/p&gt;
+      {userPresence &amp;&amp; &lt;span&gt;{userPresence.status}&lt;/span&gt;}
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<h5>Log Streaming Hooks</h5>
+<pre><code class="language-tsx">import {
+<p>  useApplicationLogs,
+  useApiLogs,
+  useQueryLogs,
+  useDashboard,
+} from &#039;@ccms/sdk/realtime/logs&#039;;</p>
+<p>function LogMonitor() {
+  // Application logs
+  const {
+    logs: appLogs,
+    isConnected,
+    subscribe,
+    clearLogs,
+    loadRecent,
+  } = useApplicationLogs({
+    autoConnect: true,
+    filter: { logLevels: [&#039;Error&#039;, &#039;Critical&#039;] },
+    maxBufferSize: 1000,
+  });</p>
+<p>  // API request logs
+  const { logs: apiLogs } = useApiLogs({
+    filter: { minDurationMs: 1000 }, // Slow requests only
+  });</p>
+<p>  // Database query logs
+  const { logs: queryLogs } = useQueryLogs({
+    filter: { slowOnly: true },
+  });</p>
+<p>  // Dashboard statistics
+  const { stats, refreshStats, getLogsByCorrelationId } = useDashboard({
+    autoConnect: true,
+    refreshInterval: 5000,
+  });</p>
+<p>  return (/<em> ... </em>/);
+}</code></pre></p>
+<h5>Legacy Realtime Hooks (Deprecated)</h5>
+<pre><code class="language-tsx">// ⚠️ DEPRECATED: These hooks are deprecated and will be removed in v2.0.0
+<p>// Use the new hooks above instead</p>
+<p>import { useRealtimeEvent, useConnectionState } from &#039;@ccms/sdk&#039;;</p>
+<p>function OldComponent() {
+  const connectionState = useConnectionState(); // Use usePresence() instead
+  useRealtimeEvent(&#039;event&#039;, handler); // Use specific hooks instead
+}</code></pre></p>
+<h4>Utility Hooks</h4>
+<pre><code class="language-tsx">import {
+<p>  useDebounce,
+  useThrottle,
+  usePrevious,
+  useStorage,
+  useNetworkStatus,
+  useToggle,
+  useCounter,
+  useArray,
+  useMap,
+  useInterval,
+  useTimeout,
+  useMediaQuery,
+  useClipboard,
+  useClickOutside,
+  useKeyPress,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>function SearchComponent() {
+  const [search, setSearch] = useState(&#039;&#039;);
+  const debouncedSearch = useDebounce(search, 300);</p>
+<p>  // Network status
+  const { isOnline, wasOffline } = useNetworkStatus();</p>
+<p>  // Persistent storage (cross-platform)
+  const [theme, setTheme] = useStorage(&#039;theme&#039;, &#039;light&#039;);</p>
+<p>  // Boolean toggle
+  const [isOpen, toggle] = useToggle(false);</p>
+<p>  // Counter with limits
+  const { count, increment, decrement } = useCounter(0, { min: 0, max: 100 });</p>
+<p>  // Array operations
+  const { array, push, remove, clear } = useArray&lt;string&gt;([]);</p>
+<p>  // Media queries
+  const isMobile = useMediaQuery(&#039;(max-width: 768px)&#039;);</p>
+<p>  // Clipboard
+  const { copy, copied } = useClipboard();</p>
+<p>  // Click outside detection
+  const ref = useClickOutside&lt;HTMLDivElement&gt;(() =&gt; setIsOpen(false));</p>
+<p>  // Keyboard shortcuts
+  useKeyPress(&#039;k&#039;, () =&gt; openSearch(), { meta: true }); // Cmd+K
+}</code></pre></p>
+<h3>Components</h3>
+<h4>Permission Components</h4>
+<pre><code class="language-tsx">import { Can, RequireAuth, RequireRole, RequireRight } from &#039;@ccms/sdk&#039;;
+<p>function App() {
+  return (
+    &lt;RequireAuth fallback={&lt;LoginPage /&gt;}&gt;
+      &lt;Dashboard /&gt;
+    &lt;/RequireAuth&gt;
+  );
+}</p>
+<p>function Dashboard() {
+  return (
+    &lt;div&gt;
+      {/<em> Feature-based access </em>/}
+      &lt;Can feature=&quot;members.view&quot;&gt;
+        &lt;MemberList /&gt;
+      &lt;/Can&gt;</p>
+<p>      {/<em> Role-based access </em>/}
+      &lt;RequireRole role=&quot;admin&quot; fallback={&lt;AccessDenied /&gt;}&gt;
+        &lt;AdminPanel /&gt;
+      &lt;/RequireRole&gt;</p>
+<p>      {/<em> Multiple roles (any) </em>/}
+      &lt;RequireRole roles={[&#039;admin&#039;, &#039;staff&#039;]} requireAll={false}&gt;
+        &lt;StaffTools /&gt;
+      &lt;/RequireRole&gt;</p>
+<p>      {/<em> Right-based access </em>/}
+      &lt;RequireRight right=&quot;reports.view&quot;&gt;
+        &lt;Reports /&gt;
+      &lt;/RequireRight&gt;
+    &lt;/div&gt;
+  );
+}</code></pre></p>
+<h4>Error Boundary</h4>
+<pre><code class="language-tsx">import { ErrorBoundary } from &#039;@ccms/sdk&#039;;
+<p>function App() {
+  return (
+    &lt;ErrorBoundary
+      fallback={({ error, reset }) =&gt; (
+        &lt;div&gt;
+          &lt;h1&gt;Something went wrong&lt;/h1&gt;
+          &lt;p&gt;{error.message}&lt;/p&gt;
+          &lt;button onClick={reset}&gt;Try Again&lt;/button&gt;
+        &lt;/div&gt;
+      )}
+    &gt;
+      &lt;MyApp /&gt;
+    &lt;/ErrorBoundary&gt;
+  );
+}</code></pre></p>
+<hr>
+<h2>React Native Setup</h2>
+<h3>Configure Global Storage</h3>
+<pre><code class="language-typescript">// In your app entry point (App.tsx or index.js)
+<p>import AsyncStorage from &#039;@react-native-async-storage/async-storage&#039;;
+import NetInfo from &#039;@react-native-community/netinfo&#039;;
+import { setGlobalStorage, setGlobalNetworkStatus } from &#039;@ccms/sdk&#039;;</p>
+<p>// Configure storage (do this before using any SDK features)
+setGlobalStorage(AsyncStorage);</p>
+<p>// Configure network status detection
+setGlobalNetworkStatus({
+  isOnline: async () =&gt; {
+    const state = await NetInfo.fetch();
+    return state.isConnected ?? false;
+  },
+  subscribe: (callback) =&gt; {
+    return NetInfo.addEventListener((state) =&gt; {
+      callback(state.isConnected ?? false);
+    });
+  },
+});</code></pre></p>
+<h3>Use with Expo SecureStore</h3>
+<pre><code class="language-typescript">import * as SecureStore from &#039;expo-secure-store&#039;;
+<p>import { SecureStorageAdapter, AuthManager } from &#039;@ccms/sdk&#039;;</p>
+<p>const authManager = new AuthManager(http, {
+  storage: new SecureStorageAdapter(SecureStore),
+});</code></pre></p>
+<hr>
+<h2>Services</h2>
+<p>The SDK provides pre-built service classes that encapsulate common API operations for each domain. Services handle request formatting, response parsing, and provide a clean interface for interacting with the CCMS backend.</p>
+<h3>Available Service Modules</h3>
+<table>
+<p><thead>
+<tr>
+<th>Module</th>
+<th>Services</th>
+<th>Key Services</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><strong>Task Management</strong></td>
+<td>12 services</td>
+<td>TaskService, TaskStatusService, TaskPriorityService, TaskProgressStageService, TaskAssignmentService, TaskAttachmentService, TaskCommentService, TaskNoteService, TaskLogService, LogTypeService, TaskNotificationService, TaskNotificationQueueService</td>
+</tr>
+<tr>
+<td><strong>User Management</strong></td>
+<td>9 services</td>
+<td>UserService, RoleService, RightService, AuthService, AuditService, AdminService, SystemService, UserPreferencesService, UserPushDeviceService</td>
+</tr>
+<tr>
+<td><strong>Payments</strong></td>
+<td>14 services</td>
+<td>PaymentTransactionService, PayerService, PaymentMethodService, TransactionStatusService, TransactionCategoryService, TransactionRefundService, RefundStatusService, BillingAgreementService, RecurringTransactionService, SettlementService, SettlementLineService, PaymentIpnEventService, PaymentNotificationQueueService, PayFastWebhookService</td>
+</tr>
+<tr>
+<td><strong>Procurement</strong></td>
+<td>18 services</td>
+<td>PurchaseRequestService, QuotationService, InvoiceService, RequestAttachmentService, RequestCommentService, RequestTypeService, RequestStatusService, RequestStageService, QuotationStatusService, InvoiceStatusService, ProcurementRoleTypeService, NotificationService, AuditLogService, QuotationLineService, InvoiceLineService, RequestApprovalStatusService, SagePurchaseOrderService, SageItemService</td>
+</tr>
+<tr>
+<td><strong>Projects</strong></td>
+<td>17 services</td>
+<td>ProjectService, ProjectStatusService, ProjectTypeService, ProjectAuditLogService, ProjectMessageService, ProjectMilestoneService, ProjectMilestoneTaskService, ProjectRiskService, ProjectTeamMemberService, TaskTimeLogService, ProjectResourceService, ProjectDocumentService, PlannedBudgetItemService, TaskDependencyService, ResourceTypeService, ProjectRoleService, BudgetLineItemService</td>
+</tr>
+<tr>
+<td><strong>Orders</strong></td>
+<td>6 services</td>
+<td>OrderService, OrderLineService, OrderPaymentService, OrderStatusService, PaymentStatusService, OrderNotificationService</td>
+</tr>
+<tr>
+<td><strong>Meetings</strong></td>
+<td>14 services</td>
+<td>MeetingService, MeetingStatusService, MeetingTypeService, MeetingVenueService, MeetingAttendeeService, MeetingAttendanceStatusService, MeetingSetupService, MeetingRequestService, MeetingCommentService, MeetingFileService, SetupInMeetingService, RequestInMeetingService, LocationVenueRequestService, LocationVenueSetupService</td>
+</tr>
+<tr>
+<td><strong>Members</strong></td>
+<td>9 services</td>
+<td>MemberService, FamilyService, MemberTypeService, MaritalStatusService, MemberAddressService, MemberLocationService, AllergyService, DisabilityService, RelationshipService</td>
+</tr>
+<tr>
+<td><strong>HR</strong></td>
+<td>19 services</td>
+<td>EmployeeService, LeaveService, DutyService, EmployeeDutyService, EmployeeFileCategoryService, EmployeeFileTypeService, EmployeeFileService, EmployeeStatusService, EmployeeTypeService, LeaveDocumentTypeService, LeaveDocumentService, LeaveDutyService, LeaveNotificationQueueService, LeaveStatusService, LeaveTypeService, PolicyService, PolicyCategoryService, PolicySignatureService</td>
+</tr>
+<tr>
+<td><strong>Departments</strong></td>
+<td>10 services</td>
+<td>DepartmentService, DesignationService, DesignationTaskService, MemberDesignationService, MemberInDepartmentService, MinistryService, MinistryActivityService, MinistryEquipmentService, MinistryRoleService, MinistryTeamService</td>
+</tr>
+<tr>
+<td><strong>Communication</strong></td>
+<td>6 services</td>
+<td>EmailService, SmsService, PushNotificationService, WhatsAppService, TemplateService, DeviceService</td>
+</tr>
+<tr>
+<td><strong>File Management</strong></td>
+<td>2 services</td>
+<td>FileService, MultipartUploadService</td>
+</tr>
+<tr>
+<td><strong>Locations</strong></td>
+<td>8 services</td>
+<td>LocationService, AddressService, LocationInfoService, LocationLeaderService, LocationSocialMediaService, LocationVenueService, ServiceTimeService, SocialMediaService</td>
+</tr>
+<tr>
+<td><strong>Products</strong></td>
+<td>8 services</td>
+<td>ProductService, ProductTypeService, ProductColorService, ProductSizeService, ProductImageService, ProductStockService, ProductTransactionService, TransactionTypeService</td>
+</tr>
+<tr>
+<td><strong>Suppliers</strong></td>
+<td>4 services</td>
+<td>SupplierService, SupplierCategoryService, SupplierContactService, SupplierNoteService</td>
+</tr>
+<tr>
+<td><strong>Resources</strong></td>
+<td>8 services</td>
+<td>CourseService, CourseCategoryService, CourseSessionService, UsageLogService, CourseStatusService, CourseCategoryStatusService, CourseSessionStatusService, CourseSessionTypeService</td>
+</tr>
+<tr>
+<td><strong>Feedback</strong></td>
+<td>5 services</td>
+<td>FeedbackService, FeedbackCategoryService, FeedbackTypeService, FeedbackCategoryRecipientService, FeedbackNotificationQueueService</td>
+</tr>
+<tr>
+<td><strong>System</strong></td>
+<td>10 services</td>
+<td>SystemService, ApiRequestLogService, QueryPerformanceLogService, LogsService, HealthService, ServicesService, RabbitMQManagementService, RedisManagementService, RabbitMQTestService, RedisTestService</td>
+</tr>
+<tr>
+<td><strong>Generators</strong></td>
+<td>4 services</td>
+<td>BarcodeService, QrCodeService, UtilityCodeService, GeneratedCodeService</td>
+</tr>
+</tbody>
+</table>For detailed information about the service architecture and how to create custom services, see <a href="src/services/README.md">Services Module Documentation</a>.</p>
+<h3>Using Services</h3>
+<pre><code class="language-typescript">import { MemberService, TaskService } from &#039;@ccms/sdk&#039;;
+<p>// Initialize services with HTTP client
+const memberService = new MemberService(http);
+const taskService = new TaskService(http);</p>
+<p>// Member operations
+const members = await memberService.getAll({ page: 1, pageSize: 20 });
+const member = await memberService.getById(&#039;member-123&#039;);
+const newMember = await memberService.create({
+  firstName: &#039;John&#039;,
+  lastName: &#039;Doe&#039;,
+  email: &#039;john@example.com&#039;,
+});
+await memberService.update(&#039;member-123&#039;, { phone: &#039;+1234567890&#039; });
+await memberService.delete(&#039;member-123&#039;);</p>
+<p>// Search members
+const searchResults = await memberService.search({
+  query: &#039;John&#039;,
+  filters: { status: &#039;active&#039;, memberType: &#039;regular&#039; },
+  sort: { field: &#039;lastName&#039;, direction: &#039;asc&#039; },
+});</p>
+<p>// Task operations
+const tasks = await taskService.getMyTasks();
+const task = await taskService.create({
+  title: &#039;Follow up with new member&#039;,
+  description: &#039;Welcome call and orientation&#039;,
+  assignedTo: [&#039;user-456&#039;],
+  dueDate: &#039;2024-02-01&#039;,
+  priority: &#039;high&#039;,
+});
+await taskService.updateStatus(&#039;task-789&#039;, &#039;completed&#039;);
+await taskService.addComment(&#039;task-789&#039;, &#039;Completed the follow-up call&#039;);</code></pre></p>
+<h3>Service with React Hooks</h3>
+<p>The SDK provides dedicated hooks for each service module for seamless React integration:</p>
+<pre><code class="language-tsx">import {
+<p>  useTaskServices,
+  useUsersServices,
+  useMembersServices,
+  useMeetingsServices,
+  useLocationsServices,
+  useFileServices,
+  useCommunicationServices,
+  useSupplierServices,
+  useResourcesServices,
+  useProjectsServices,
+  useProcurementsServices,
+  useProductsServices,
+  usePaymentServices,
+  useOrderServices,
+  useHrServices,
+  useDepartmentsServices,
+  useFeedbackServices,
+  useSystemServices,
+  useGeneratorsServices,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>function TaskList() {
+  const { task, taskStatus, taskPriority } = useTaskServices();
+  const [tasks, setTasks] = useState&lt;Task[]&gt;([]);</p>
+<p>  useEffect(() =&gt; {
+    task.getAll().then(setTasks);
+  }, []);</p>
+<p>  const handleCreate = async (data: CreateTaskRequest) =&gt; {
+    const newTask = await task.create(data);
+    setTasks(prev =&gt; [...prev, newTask]);
+  };</p>
+<p>  return (/<em> ... </em>/);
+}</p>
+<p>// Access multiple services in one module
+function CommunicationDashboard() {
+  const { email, sms, pushNotification, whatsApp } = useCommunicationServices();</p>
+<p>  const sendMultiChannelNotification = async (message: string, recipients: string[]) =&gt; {
+    await Promise.all([
+      email.send({ to: recipients, subject: &#039;Notification&#039;, body: message }),
+      sms.send({ to: recipients, message }),
+      pushNotification.send({ userIds: recipients, title: &#039;Alert&#039;, body: message }),
+    ]);
+  };</p>
+<p>  return (/<em> ... </em>/);
+}</p>
+<p>// Use meeting services
+function MeetingScheduler() {
+  const { meeting, meetingAttendee, meetingVenue } = useMeetingsServices();</p>
+<p>  const createMeeting = async (data: MeetingRequest) =&gt; {
+    const newMeeting = await meeting.create(data);
+    await meetingAttendee.addAttendees(newMeeting.id, data.attendeeIds);
+    return newMeeting;
+  };</p>
+<p>  return (/<em> ... </em>/);
+}</code></pre></p>
+<h3>Custom Service Creation</h3>
+<p>You can create custom services by extending the base service class:</p>
+<pre><code class="language-typescript">import { BaseService } from &#039;@ccms/sdk&#039;;
+<p>class CustomService extends BaseService {
+  constructor(http: HttpClient) {
+    super(http, &#039;/api/custom&#039;);
+  }</p>
+<p>  async getCustomData(id: string): Promise&lt;CustomData&gt; {
+    const response = await this.http.get&lt;CustomData&gt;(<code>${this.basePath}/${id}</code>);
+    return response.data!;
+  }</p>
+<p>  async performCustomAction(data: ActionRequest): Promise&lt;ActionResult&gt; {
+    const response = await this.http.post&lt;ActionResult&gt;(
+      <code>${this.basePath}/action</code>,
+      data
+    );
+    return response.data!;
+  }
+}</code></pre></p>
+<h3>Service Configuration</h3>
+<p>Services can be configured with default options:</p>
+<pre><code class="language-typescript">const memberService = new MemberService(http, {
+<p>  // Default pagination
+  defaultPageSize: 50,</p>
+<p>  // Cache configuration
+  cacheEnabled: true,
+  cacheTTL: 5 <em> 60 </em> 1000, // 5 minutes</p>
+<p>  // Retry configuration
+  retryOnError: true,
+  maxRetries: 3,
+});</code></pre></p>
+<h3>Batch Operations</h3>
+<p>Services support batch operations for efficiency:</p>
+<pre><code class="language-typescript">// Batch create
+<p>const members = await memberService.createMany([
+  { firstName: &#039;John&#039;, lastName: &#039;Doe&#039; },
+  { firstName: &#039;Jane&#039;, lastName: &#039;Smith&#039; },
+]);</p>
+<p>// Batch update
+await memberService.updateMany([
+  { id: &#039;member-1&#039;, status: &#039;active&#039; },
+  { id: &#039;member-2&#039;, status: &#039;active&#039; },
+]);</p>
+<p>// Batch delete
+await memberService.deleteMany([&#039;member-3&#039;, &#039;member-4&#039;]);</code></pre></p>
+<h3>Service Events</h3>
+<p>Services emit events for tracking operations:</p>
+<pre><code class="language-typescript">memberService.on(&#039;created&#039;, (member) =&gt; {
+<p>  console.log(&#039;Member created:&#039;, member.id);
+  analytics.track(&#039;member_created&#039;, { memberId: member.id });
+});</p>
+<p>memberService.on(&#039;updated&#039;, (member) =&gt; {
+  console.log(&#039;Member updated:&#039;, member.id);
+});</p>
+<p>memberService.on(&#039;deleted&#039;, (id) =&gt; {
+  console.log(&#039;Member deleted:&#039;, id);
+});</p>
+<p>memberService.on(&#039;error&#039;, (error, operation) =&gt; {
+  console.error(<code>Error during ${operation}:</code>, error);
+});</code></pre></p>
+<hr>
+<h2>Utilities</h2>
+<p>The SDK includes comprehensive cross-platform utilities:</p>
+<h3>String Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  capitalize,
+  toCamelCase,
+  toKebabCase,
+  toSnakeCase,
+  toPascalCase,
+  slugify,
+  truncate,
+  mask,
+  getInitials,
+  pluralize,
+  similarity,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>capitalize(&#039;hello world&#039;); // &quot;Hello world&quot;
+toCamelCase(&#039;hello-world&#039;); // &quot;helloWorld&quot;
+slugify(&#039;Hello World!&#039;); // &quot;hello-world&quot;
+truncate(&#039;Long text...&#039;, 10); // &quot;Long te...&quot;
+mask(&#039;1234567890&#039;, 4); // &quot;<strong><em></strong></em>7890&quot;
+getInitials(&#039;John Doe&#039;); // &quot;JD&quot;
+pluralize(&#039;item&#039;, 5); // &quot;items&quot;
+similarity(&#039;hello&#039;, &#039;hallo&#039;); // 0.8</code></pre></p>
+<h3>Number Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  formatCurrency,
+  formatNumber,
+  formatPercentage,
+  humanizeNumber,
+  round,
+  clamp,
+  percentage,
+  toOrdinal,
+  formatFileSize,
+  formatDurationFromSeconds,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>formatCurrency(1234.56, &#039;USD&#039;); // &quot;$1,234.56&quot;
+formatNumber(1234567); // &quot;1,234,567&quot;
+formatPercentage(0.456); // &quot;45.60%&quot;
+humanizeNumber(1500000); // &quot;1.5M&quot;
+round(3.14159, 2); // 3.14
+clamp(150, 0, 100); // 100
+toOrdinal(1); // &quot;1st&quot;
+formatFileSize(1536); // &quot;1.50 KB&quot;
+formatDurationFromSeconds(3661); // &quot;1:01:01&quot;</code></pre></p>
+<h3>Date/Time Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  formatDate,
+  parseDate,
+  addDays,
+  addMonths,
+  differenceInDays,
+  startOfDay,
+  endOfDay,
+  isWeekend,
+  humanize,
+  fromNow,
+  toUnix,
+  fromUnix,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>formatDate(new Date(), &#039;YYYY-MM-DD&#039;); // &quot;2024-01-15&quot;
+addDays(new Date(), 7); // Date 7 days from now
+differenceInDays(date1, date2); // Number of days between
+humanize(pastDate); // &quot;2 hours ago&quot;
+isWeekend(new Date()); // true/false</code></pre></p>
+<h3>Array Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  unique,
+  uniqueBy,
+  chunk,
+  sortBy,
+  groupBy,
+  partition,
+  shuffle,
+  sample,
+  intersection,
+  difference,
+  union,
+  flatten,
+  moveItem,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>unique([1, 2, 2, 3]); // [1, 2, 3]
+uniqueBy(users, &#039;email&#039;); // Remove duplicates by email
+chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]
+sortBy(users, &#039;lastName&#039;, &#039;asc&#039;);
+groupBy(users, &#039;department&#039;); // { IT: [...], HR: [...] }
+partition(numbers, n =&gt; n &gt; 5); // [[6, 7, 8], [1, 2, 3]]
+shuffle([1, 2, 3, 4, 5]); // Random order
+sample(items, 3); // Random 3 items</code></pre></p>
+<h3>Object Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  deepClone,
+  deepMerge,
+  get,
+  set,
+  pick,
+  omit,
+  flattenObject,
+  unflattenObject,
+  deepEqual,
+  diff,
+  isEmpty,
+  mapValues,
+  filterObject,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>deepClone(complexObject);
+deepMerge(defaults, userConfig);
+get(obj, &#039;user.address.city&#039;, &#039;Unknown&#039;);
+set(obj, &#039;user.address.city&#039;, &#039;New York&#039;);
+pick(user, [&#039;id&#039;, &#039;name&#039;, &#039;email&#039;]);
+omit(user, [&#039;password&#039;, &#039;secretKey&#039;]);
+flattenObject({ a: { b: 1 } }); // { &#039;a.b&#039;: 1 }
+deepEqual(obj1, obj2); // true/false
+diff(original, modified); // { changed: &#039;fields&#039; }</code></pre></p>
+<h3>Validation Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  isEmail,
+  isPhoneNumber,
+  isUrl,
+  isUUID,
+  isStrongPassword,
+  getPasswordStrength,
+  isCreditCard,
+  getCreditCardType,
+  isIPv4,
+  isIPv6,
+  validateEmail,
+  validatePassword,
+  validateUsername,
+  validateAll,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>isEmail(&#039;test@example.com&#039;); // true
+isPhoneNumber(&#039;+1-555-123-4567&#039;); // true
+isStrongPassword(&#039;MyP@ss123!&#039;); // true
+getPasswordStrength(&#039;weak&#039;); // { score: 1, level: &#039;weak&#039;, suggestions: [...] }
+isCreditCard(&#039;4111111111111111&#039;); // true (Luhn check)
+getCreditCardType(&#039;4111...&#039;); // &#039;visa&#039;</p>
+<p>// Detailed validation
+validateEmail(&#039;invalid&#039;); // { valid: false, error: &#039;Invalid email format&#039; }
+validatePassword(&#039;weak&#039;, { minLength: 8, requireSpecial: true });</p>
+<p>// Multiple validations
+validateAll([
+  () =&gt; validateEmail(email),
+  () =&gt; validatePassword(password),
+  () =&gt; validateRequired(name, &#039;Name&#039;),
+]); // { valid: false, errors: [&#039;...&#039;, &#039;...&#039;] }</code></pre></p>
+<h3>Color Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  hexToRgb,
+  rgbToHex,
+  hexToHsl,
+  lighten,
+  darken,
+  getContrastColor,
+  isLightColor,
+  mix,
+  generatePalette,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>hexToRgb(&#039;#ff5500&#039;); // { r: 255, g: 85, b: 0 }
+rgbToHex(255, 85, 0); // &quot;#ff5500&quot;
+lighten(&#039;#ff5500&#039;, 0.2); // Lighter version
+darken(&#039;#ff5500&#039;, 0.2); // Darker version
+getContrastColor(&#039;#ff5500&#039;); // &#039;#ffffff&#039; or &#039;#000000&#039;
+mix(&#039;#ff0000&#039;, &#039;#0000ff&#039;, 0.5); // Purple
+generatePalette(&#039;#ff5500&#039;, 5); // { light: [...], dark: [...] }</code></pre></p>
+<h3>Environment Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  getEnv,
+  isProduction,
+  isDevelopment,
+  isBrowser,
+  isReactNative,
+  isNode,
+  getPlatform,
+  isMobile,
+  isIOS,
+  isAndroid,
+  getBrowserInfo,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>if (isProduction()) {
+  // Production-only code
+}</p>
+<p>if (isReactNative()) {
+  // React Native specific code
+}</p>
+<p>if (isMobile()) {
+  // Mobile-specific UI
+}</p>
+<p>const platform = getPlatform(); // &#039;ios&#039; | &#039;android&#039; | &#039;web&#039; | &#039;node&#039; | &#039;unknown&#039;</code></pre></p>
+<h3>Device Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  getScreenInfo,
+  getDeviceType,
+  getOrientation,
+  hasTouch,
+  hasGeolocation,
+  hasNotifications,
+  prefersDarkMode,
+  prefersReducedMotion,
+  getPreferredLanguage,
+  getTimezone,
+  isOnline,
+  getConnectionType,
+  getCurrentBreakpoint,
+  isAtLeast,
+  isAtMost,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>const screen = getScreenInfo(); // { width, height, pixelRatio, orientation }
+const device = getDeviceType(); // &#039;phone&#039; | &#039;tablet&#039; | &#039;desktop&#039;
+const orientation = getOrientation(); // &#039;portrait&#039; | &#039;landscape&#039;</p>
+<p>if (prefersDarkMode()) {
+  // Apply dark theme
+}</p>
+<p>const breakpoint = getCurrentBreakpoint(); // &#039;xs&#039; | &#039;sm&#039; | &#039;md&#039; | &#039;lg&#039; | &#039;xl&#039;
+if (isAtLeast(&#039;md&#039;)) {
+  // Tablet and above
+}</code></pre></p>
+<h3>API Response Helpers</h3>
+<pre><code class="language-typescript">import {
+<p>  createSuccessResponse,
+  createErrorResponse,
+  createPaginatedResponse,
+  isSuccessResponse,
+  unwrapResponse,
+  safeUnwrap,
+  mapResponse,
+  paginateArray,
+  isSuccessStatus,
+  getStatusMessage,
+  fetchWithRetry,
+  createQueryString,
+  buildUrl,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>// Create responses
+const success = createSuccessResponse(data, &#039;Operation successful&#039;);
+const error = createErrorResponse(&#039;Validation failed&#039;, [&#039;Email is required&#039;]);
+const paginated = createPaginatedResponse(items, { page: 1, pageSize: 20, totalItems: 100 });</p>
+<p>// Check and unwrap
+if (isSuccessResponse(response)) {
+  const data = unwrapResponse(response);
+}</p>
+<p>// Safe unwrap with fallback
+const users = safeUnwrap(response, []);</p>
+<p>// Retry failed requests
+const result = await fetchWithRetry(
+  () =&gt; fetch(&#039;/api/data&#039;),
+  { maxRetries: 3, retryDelay: 1000, backoff: &#039;exponential&#039; }
+);</p>
+<p>// Build URLs
+const url = buildUrl(&#039;https://api.example.com&#039;, &#039;/users&#039;, { page: 1, limit: 20 });
+// &quot;https://api.example.com/users?page=1&amp;limit=20&quot;</code></pre></p>
+<h3>Error Utilities</h3>
+<pre><code class="language-typescript">import {
+<p>  safeTry,
+  safeTryAsync,
+  toErrorMessage,
+  normalizeError,
+  isNetworkError,
+  isTimeoutError,
+  isAbortError,
+  retryOnError,
+  createErrorBoundary,
+  assert,
+  assertDefined,
+  formatErrorForUser,
+  ValidationError,
+  NetworkError,
+  TimeoutError,
+} from &#039;@ccms/sdk&#039;;</p>
+<p>// Safe execution with fallback
+const result = safeTry(() =&gt; JSON.parse(input), {});</p>
+<p>// Async safe execution
+const data = await safeTryAsync(() =&gt; fetchData(), defaultData);</p>
+<p>// Error classification
+if (isNetworkError(error)) {
+  showOfflineMessage();
+} else if (isTimeoutError(error)) {
+  showTimeoutMessage();
+}</p>
+<p>// Retry with configuration
+await retryOnError(fetchData, {
+  maxRetries: 3,
+  delayMs: 1000,
+  shouldRetry: (error, attempt) =&gt; attempt &lt; 3 &amp;&amp; isNetworkError(error),
+});</p>
+<p>// Custom error classes
+throw new ValidationError(&#039;Invalid input&#039;, { code: &#039;VALIDATION_ERROR&#039; });</p>
+<p>// User-friendly messages
+const message = formatErrorForUser(error);
+// &quot;Unable to connect. Please check your internet connection.&quot;</code></pre></p>
+<hr>
+<h2>Models</h2>
+<p>The SDK includes TypeScript models for all CCMS entities:</p>
+<pre><code class="language-typescript">import {
+<p>  // Identity
+  LoggedOnUser,
+  UserModelView,
+  RoleModelView,</p>
+<p>  // Members
+  Member,
+  MemberModelView,
+  MemberType,
+  Family,</p>
+<p>  // Tasks
+  Task,
+  TaskModelView,
+  TaskStatus,
+  TaskPriority,
+  TaskAssignment,</p>
+<p>  // Departments
+  Department,
+  Ministry,
+  Designation,</p>
+<p>  // Locations
+  Location,
+  Address,</p>
+<p>  // And many more...
+} from &#039;@ccms/sdk&#039;;</code></pre></p>
+<hr>
+<h2>Testing</h2>
+<p>The SDK includes testing utilities for mocking:</p>
+<pre><code class="language-typescript">import {
+<p>  MockHttpClient,
+  MockAuthManager,
+  MockRealtimeClient,
+  MockPermissionManager,
+  createMockUser,
+  createMockPagedResult,
+  TestProvider,
+} from &#039;@ccms/sdk/testing&#039;;</p>
+<p>// In your tests
+describe(&#039;MyComponent&#039;, () =&gt; {
+  it(&#039;renders member list&#039;, async () =&gt; {
+    const mockHttp = new MockHttpClient();
+    mockHttp.onGet(&#039;/api/members&#039;).reply(200, [
+      { id: &#039;1&#039;, firstName: &#039;John&#039; },
+      { id: &#039;2&#039;, firstName: &#039;Jane&#039; },
+    ]);</p>
+<p>    render(
+      &lt;TestProvider http={mockHttp}&gt;
+        &lt;MemberList /&gt;
+      &lt;/TestProvider&gt;
+    );</p>
+<p>    await waitFor(() =&gt; {
+      expect(screen.getByText(&#039;John&#039;)).toBeInTheDocument();
+    });
+  });
+});</p>
+<p>// Create mock data
+const mockUser = createMockUser({
+  firstName: &#039;Test&#039;,
+  roles: [&#039;admin&#039;],
+});</p>
+<p>const mockPaged = createMockPagedResult([item1, item2], {
+  page: 1,
+  pageSize: 20,
+  totalItems: 100,
+});</code></pre></p>
+<hr>
+<h2>API Reference</h2>
+<h3>Core Classes</h3>
+<table>
+<p><thead>
+<tr>
+<th>Class</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>HttpClient</code></td>
+<td>HTTP client for API requests with interceptors and retry logic</td>
+</tr>
+<tr>
+<td><code>AuthManager</code></td>
+<td>Authentication state management with automatic token refresh</td>
+</tr>
+<tr>
+<td><code>PermissionManager</code></td>
+<td>Role-based and feature-based access control</td>
+</tr>
+<tr>
+<td><code>PresenceClient</code></td>
+<td>SignalR presence tracking hub client</td>
+</tr>
+<tr>
+<td><code>ApplicationLogsClient</code></td>
+<td>SignalR application logs streaming client</td>
+</tr>
+<tr>
+<td><code>ApiLogsClient</code></td>
+<td>SignalR API request logs streaming client</td>
+</tr>
+<tr>
+<td><code>QueryLogsClient</code></td>
+<td>SignalR database query logs streaming client</td>
+</tr>
+<tr>
+<td><code>DashboardClient</code></td>
+<td>SignalR dashboard statistics client</td>
+</tr>
+<tr>
+<td><code>ErrorHandler</code></td>
+<td>Global error handling with custom error types</td>
+</tr>
+<tr>
+<td>~~<code>RealtimeClient</code>~~</td>
+<td>⚠️ Deprecated - Use SignalR-based clients instead</td>
+</tr>
+</tbody>
+</table><h3>React Hooks</h3></p>
+<h4>Core Hooks</h4>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useCCMS()</code></td>
+<td>Access full SDK context</td>
+</tr>
+<tr>
+<td><code>useAuth()</code></td>
+<td>Authentication state and actions</td>
+</tr>
+<tr>
+<td><code>useHttpClient()</code></td>
+<td>HTTP client instance</td>
+</tr>
+<tr>
+<td><code>usePermissions()</code></td>
+<td>Permission manager instance</td>
+</tr>
+</tbody>
+</table><h4>API Hooks</h4></p>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useQuery()</code></td>
+<td>Data fetching with caching</td>
+</tr>
+<tr>
+<td><code>useMutation()</code></td>
+<td>Data mutations</td>
+</tr>
+<tr>
+<td><code>useInfiniteQuery()</code></td>
+<td>Paginated/infinite data</td>
+</tr>
+<tr>
+<td><code>usePrefetch()</code></td>
+<td>Prefetch data for navigation</td>
+</tr>
+</tbody>
+</table><h4>Service Hooks</h4></p>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Services</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useTaskServices()</code></td>
+<td>12</td>
+<td>Task, TaskStatus, TaskPriority, TaskAssignment, TaskComment, TaskNotification, etc.</td>
+</tr>
+<tr>
+<td><code>useUsersServices()</code></td>
+<td>9</td>
+<td>User, Role, Right, Auth, Audit, Admin, System, UserPreferences, UserPushDevice</td>
+</tr>
+<tr>
+<td><code>useMembersServices()</code></td>
+<td>9</td>
+<td>Member, Family, MemberType, MaritalStatus, MemberAddress, Allergy, Disability, etc.</td>
+</tr>
+<tr>
+<td><code>useMeetingsServices()</code></td>
+<td>14</td>
+<td>Meeting, MeetingStatus, MeetingType, MeetingVenue, MeetingAttendee, MeetingSetup, etc.</td>
+</tr>
+<tr>
+<td><code>useLocationsServices()</code></td>
+<td>8</td>
+<td>Location, Address, LocationInfo, LocationLeader, LocationVenue, ServiceTime, etc.</td>
+</tr>
+<tr>
+<td><code>useFileServices()</code></td>
+<td>2</td>
+<td>File, MultipartUpload</td>
+</tr>
+<tr>
+<td><code>useCommunicationServices()</code></td>
+<td>6</td>
+<td>Email, Sms, PushNotification, WhatsApp, Template, Device</td>
+</tr>
+<tr>
+<td><code>useSupplierServices()</code></td>
+<td>4</td>
+<td>Supplier, SupplierCategory, SupplierContact, SupplierNote</td>
+</tr>
+<tr>
+<td><code>useResourcesServices()</code></td>
+<td>8</td>
+<td>Course, CourseCategory, CourseSession, UsageLog, CourseStatus, etc.</td>
+</tr>
+<tr>
+<td><code>useProjectsServices()</code></td>
+<td>17</td>
+<td>Project, ProjectStatus, ProjectMilestone, ProjectTeamMember, TaskTimeLog, etc.</td>
+</tr>
+<tr>
+<td><code>useProcurementsServices()</code></td>
+<td>18</td>
+<td>PurchaseRequest, Quotation, Invoice, RequestAttachment, SagePurchaseOrder, etc.</td>
+</tr>
+<tr>
+<td><code>useProductsServices()</code></td>
+<td>8</td>
+<td>Product, ProductType, ProductColor, ProductSize, ProductStock, etc.</td>
+</tr>
+<tr>
+<td><code>usePaymentServices()</code></td>
+<td>14</td>
+<td>PaymentTransaction, Payer, Settlement, Refund, BillingAgreement, PayFast, etc.</td>
+</tr>
+<tr>
+<td><code>useOrderServices()</code></td>
+<td>6</td>
+<td>Order, OrderLine, OrderPayment, OrderStatus, PaymentStatus, OrderNotification</td>
+</tr>
+<tr>
+<td><code>useHrServices()</code></td>
+<td>19</td>
+<td>Employee, Leave, Duty, EmployeeFile, LeaveDocument, Policy, etc.</td>
+</tr>
+<tr>
+<td><code>useDepartmentsServices()</code></td>
+<td>10</td>
+<td>Department, Designation, Ministry, MinistryActivity, MinistryRole, etc.</td>
+</tr>
+<tr>
+<td><code>useFeedbackServices()</code></td>
+<td>5</td>
+<td>Feedback, FeedbackCategory, FeedbackType, FeedbackNotification, etc.</td>
+</tr>
+<tr>
+<td><code>useSystemServices()</code></td>
+<td>10</td>
+<td>System, ApiRequestLog, QueryPerformanceLog, Health, RabbitMQ, Redis, etc.</td>
+</tr>
+<tr>
+<td><code>useGeneratorsServices()</code></td>
+<td>4</td>
+<td>Barcode, QrCode, UtilityCode, GeneratedCode</td>
+</tr>
+</tbody>
+</table><h4>Realtime Hooks - Presence (4 hooks)</h4></p>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Return Type</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>usePresence()</code></td>
+<td><code>{ state, updateStatus, getUserPresence, getOnlineUsers, getAllPresence }</code></td>
+<td>Main presence hook with full state and methods</td>
+</tr>
+<tr>
+<td><code>usePresenceStatus()</code></td>
+<td><code>PresenceStatus</code></td>
+<td>Get current user's presence status (Online/Away/Busy/Offline)</td>
+</tr>
+<tr>
+<td><code>useOnlineUsers()</code></td>
+<td><code>UserPresenceUpdate[]</code></td>
+<td>Get array of all currently online users</td>
+</tr>
+<tr>
+<td><code>useUserPresence(userId)</code></td>
+<td><code>UserPresenceUpdate \</td>
+<td>null</code></td>
+<td>Get specific user's real-time presence information</td>
+</tr>
+</tbody>
+</table><strong>Presence State includes:</strong> isConnected, currentUserPresence, onlineUsers (Map), connectionError</p>
+<h4>Realtime Hooks - Logs (4 hooks)</h4>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Return Type</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useApplicationLogs(options)</code></td>
+<td><code>{ logs, isConnected, subscribe, unsubscribe, clearLogs, loadRecent, ... }</code></td>
+<td>Stream application logs with filtering (errors, warnings, info)</td>
+</tr>
+<tr>
+<td><code>useApiLogs(options)</code></td>
+<td><code>{ logs, isConnected, subscribe, unsubscribe, ... }</code></td>
+<td>Stream API request logs (HTTP requests, responses, performance)</td>
+</tr>
+<tr>
+<td><code>useQueryLogs(options)</code></td>
+<td><code>{ logs, isConnected, subscribe, unsubscribe, ... }</code></td>
+<td>Stream database query logs (query performance, slow queries)</td>
+</tr>
+<tr>
+<td><code>useDashboard(options)</code></td>
+<td><code>{ stats, refreshStats, getLogsByCorrelationId, getRecentErrors, ... }</code></td>
+<td>Real-time system statistics and aggregated metrics</td>
+</tr>
+</tbody>
+</table><strong>Common Options:</strong> <code>autoConnect</code>, <code>filter</code> (serviceNames, logLevels, etc.), <code>maxBufferSize</code>, <code>autoLoadRecent</code>, <code>onLog</code></p>
+<h4>Utility Hooks</h4>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useDebounce()</code></td>
+<td>Debounced values</td>
+</tr>
+<tr>
+<td><code>useThrottle()</code></td>
+<td>Throttled values</td>
+</tr>
+<tr>
+<td><code>usePrevious()</code></td>
+<td>Previous value tracking</td>
+</tr>
+<tr>
+<td><code>useStorage()</code></td>
+<td>Cross-platform storage</td>
+</tr>
+<tr>
+<td><code>useNetworkStatus()</code></td>
+<td>Online/offline detection</td>
+</tr>
+<tr>
+<td><code>useToggle()</code></td>
+<td>Boolean state toggle</td>
+</tr>
+<tr>
+<td><code>useCounter()</code></td>
+<td>Counter with min/max</td>
+</tr>
+<tr>
+<td><code>useArray()</code></td>
+<td>Array state operations</td>
+</tr>
+<tr>
+<td><code>useMap()</code></td>
+<td>Map state operations</td>
+</tr>
+<tr>
+<td><code>useInterval()</code></td>
+<td>Declarative intervals</td>
+</tr>
+<tr>
+<td><code>useTimeout()</code></td>
+<td>Declarative timeouts</td>
+</tr>
+<tr>
+<td><code>useMediaQuery()</code></td>
+<td>Responsive media queries</td>
+</tr>
+<tr>
+<td><code>useClipboard()</code></td>
+<td>Clipboard operations</td>
+</tr>
+<tr>
+<td><code>useClickOutside()</code></td>
+<td>Click outside detection</td>
+</tr>
+<tr>
+<td><code>useKeyPress()</code></td>
+<td>Keyboard shortcuts</td>
+</tr>
+</tbody>
+</table><h4>Upload Hooks</h4></p>
+<table>
+<p><thead>
+<tr>
+<th>Hook</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>useFileUpload()</code></td>
+<td>File upload with progress</td>
+</tr>
+<tr>
+<td><code>useMultipartUpload()</code></td>
+<td>Large file multipart upload</td>
+</tr>
+</tbody>
+</table><h3>React Components</h3></p>
+<table>
+<p><thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>CCMSProvider</code></td>
+<td>Root provider component</td>
+</tr>
+<tr>
+<td><code>Can</code></td>
+<td>Feature-based rendering</td>
+</tr>
+<tr>
+<td><code>RequireAuth</code></td>
+<td>Authentication guard</td>
+</tr>
+<tr>
+<td><code>RequireRole</code></td>
+<td>Role-based rendering</td>
+</tr>
+<tr>
+<td><code>RequireRight</code></td>
+<td>Permission-based rendering</td>
+</tr>
+<tr>
+<td><code>ErrorBoundary</code></td>
+<td>Error boundary with fallback</td>
+</tr>
+</tbody>
+</table><hr></p>
+<h2>Deprecation Notices</h2>
+<h3>Legacy Realtime Module</h3>
+<p>The original <code>RealtimeClient</code> and related hooks are deprecated and will be removed in version 2.0.0.</p>
+<h4>Deprecated APIs</h4>
+<ul>
+<li><code>RealtimeClient</code> class</li>
+<li><code>useConnectionState()</code> hook</li>
+<li><code>useRealtimeConnection()</code> hook</li>
+<li><code>useRealtimeEvent()</code> hook</li>
+<li><code>useRealtimeMessage()</code> hook</li>
+<li><code>useRealtimeSend()</code> hook</li>
+<li><code>useRealtimeGroup()</code> hook</li>
+<li>Legacy <code>usePresence()</code> hook</li>
+<p></ul></p>
+<h4>Migration Path</h4>
+<table>
+<p><thead>
+<tr>
+<th>Old API</th>
+<th>New API</th>
+<th>Module</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>RealtimeClient</code></td>
+<td><code>PresenceClient</code>, <code>ApplicationLogsClient</code>, etc.</td>
+<td><code>@ccms/sdk/realtime/*</code></td>
+</tr>
+<tr>
+<td><code>useConnectionState()</code></td>
+<td><code>usePresence().state</code></td>
+<td><code>@ccms/sdk/realtime/presence</code></td>
+</tr>
+<tr>
+<td><code>usePresence()</code></td>
+<td><code>usePresence()</code> (new API)</td>
+<td><code>@ccms/sdk/realtime/presence</code></td>
+</tr>
+<tr>
+<td><code>useRealtimeEvent()</code></td>
+<td><code>useApplicationLogs()</code>, <code>useApiLogs()</code>, etc.</td>
+<td><code>@ccms/sdk/realtime/logs</code></td>
+</tr>
+</tbody>
+</table>For detailed migration instructions, see the <a href="src/realtime/README.md#migration-guide">Realtime Module Documentation</a>.</p>
+<hr>
+<h2>License</h2>
+<p>MIT License - see <a href="LICENSE">LICENSE</a> for details.</p>
+<hr>
+<h2>Support</h2>
+<ul>
+<li>Documentation: <a href="https://docs.ccms.com">docs.ccms.com</a></li>
+<li>Issues: <a href="https://github.com/your-org/ccms-sdk/issues">GitHub Issues</a></li>
+<li>Email: support@ccms.com</li>
+<p></ul></p>
+</body>
+</html>