@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/analytics/page.tsx

@@ -1,347 +1,383 @@
-'use client';
-
-import { useState, useEffect, useMemo } from 'react';
-import { useStrapiAuth } from '@/lib/auth-context';
-import { useAuth } from '@clerk/nextjs';
-import {
-  AnalyticsData,
-  ChannelGroupData,
-  getAnalyticsData,
-  getChannelGroupData,
-  getRealtimeData,
-  getUserActivityData,
-  RealtimeData,
-  UserActivityData,
-} from '@/lib/google-analytics';
-import { NewUsersChart } from '@/components/addOns/functional/NewUserAnalytics';
-import ContactsDashboard from '@/components/addOns/functional/contactsDashboard/ContactsDashboard';
-import Spinner from '@/components/addOns/non-functional/spinner';
-import { ExternalLinkButton, RetryButton } from '@/components/other/button'; 
-
-interface StrapiUser {
-  id: number;
-  authId: string;
-  email: string;
-  username: string;
-  businessAdminId?: string;
-  userRole?: string;
-  firstName?: string;
-  lastName?: string;
-  businessId?: string[] | null;
-  dateJoined?: string;
-  businessOwner?: boolean;
-  userStatus?: string;
-  timezone?: string | null;
-  language?: string | null;
-  isVerified?: boolean;
-  businessTitle?: string | null;
-  userTitle?: string | null;
-  number?: string | null;
-  address?: {
-    zip: string;
-    city: string;
-    state: string;
-    street: string;
-    country: string;
-  } | null;
-  websiteUrl?: string | null;
-  primaryBusinessColor?: string | null;
-  secondaryBusinessColor?: string | null;
-  logoImage?: string | null;
-}
-
-export default function AnalyticsPage() {
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken, isSignedIn, isLoaded } = useAuth();
-  const [mainData, setMainData] = useState<AnalyticsData[]>([]);
-  const [channelGroupData, setChannelGroupData] = useState<ChannelGroupData[]>([]);
-  const [realtimeData, setRealtimeData] = useState<RealtimeData | null>(null);
-  const [userActivityData, setUserActivityData] = useState<UserActivityData[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasSynced, setHasSynced] = useState(false);
-
-  const memoizedUser = useMemo(() => user, [user?.authId, user?.businessAdminId, user?.userRole]);
-
-  const isAdmin = isSignedIn && !!memoizedUser?.businessAdminId && memoizedUser?.userRole === 'admin';
-
-  const fetchAnalyticsData = async () => {
-    if (!isAdmin) {
-      setError('Unauthorized: Only admins can access the analytics dashboard');
-      setIsLoading(false);
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      if (!hasSynced) {
-        await checkSession();
-        setHasSynced(true);
-      }
-
-      const year = new Date().getFullYear();
-      const token = await getToken();
-      if (!token) {
-        throw new Error('No authentication token available');
-      }
-
-      const [mainData, channelGroupData, realtimeData, userActivityData] = await Promise.all([
-        getAnalyticsData(year, token).catch((err) => {
-          console.error('getAnalyticsData failed:', err);
-          throw err;
-        }),
-        getChannelGroupData(year, token).catch((err) => {
-          console.error('getChannelGroupData failed:', err);
-          throw err;
-        }),
-        getRealtimeData(token).catch((err) => {
-          console.error('getRealtimeData failed:', err);
-          throw err;
-        }),
-        getUserActivityData(year, token).catch((err) => {
-          console.error('getUserActivityData failed:', err);
-          throw err;
-        }),
-      ]);
-
-      setMainData(mainData || []);
-      setChannelGroupData(channelGroupData || []);
-      setRealtimeData(realtimeData || null);
-      setUserActivityData(userActivityData || []);
-      setError(null);
-    } catch (err: any) {
-      console.error('fetchAnalyticsData error:', err);
-      setError(err.message || 'Unable to load analytics data');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!isLoaded || authLoading) {
-      return;
-    }
-
-    if (!isSignedIn || !memoizedUser) {
-      setIsLoading(false);
-      return;
-    }
-
-    if (isSignedIn && isAdmin && !hasSynced) {
-      fetchAnalyticsData();
-    } else if (!isAdmin) {
-      setIsLoading(false);
-    }
-  }, [isLoaded, authLoading, isSignedIn, memoizedUser, isAdmin, hasSynced]);
-
-  const formatMonth = (date: string) => {
-    const year = date.slice(0, 4);
-    const month = parseInt(date.slice(4, 6), 10);
-    return new Date(parseInt(year), month - 1).toLocaleDateString('en-US', {
-      month: 'short',
-      year: 'numeric',
-    });
-  };
-
-  const formatDuration = (minutes: number) => {
-    const totalSeconds = minutes * 60;
-    const mins = Math.floor(totalSeconds / 60);
-    const secs = Math.floor(totalSeconds % 60);
-    return `${mins}m ${secs}s`;
-  };
-
-  if (!isLoaded || authLoading || isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (!isSignedIn || !memoizedUser || error === 'No authentication token available') {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">Not authenticated</h1>
-          <p className="mt-4 text-gray-500">
-            You must be logged in to view this page.{' '}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!isAdmin) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">Unauthorized</h1>
-          <p className="mt-4 text-gray-500">Only admins can access the analytics dashboard.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-      <div className="max-w-7xl mx-auto">
-        <header className="mb-12 relative">
-          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
-              Analytics Dashboard
-            </h1>
-            <div className="flex flex-row items-center justify-end gap-4 relative w-full">
-              <div className="relative group">
-                <span className="flex items-center justify-center w-6 h-6 text-red-500 border-2 border-red-500 rounded-full text-sm font-bold">
-                  !
-                </span>
-                <span className="absolute left-1/2 -translate-x-1/2 top-full hidden w-72 sm:w-80 p-4 text-sm text-gray-200 bg-gray-800 border border-gray-700 rounded-md group-hover:block z-10 mt-6">
-                  Analytics may differ slightly from Google&apos;s dashboard due to:
-                  <ul className="list-disc pl-5 mt-2 space-y-1">
-                    <li>Realtime data updates</li>
-                    <li>Data fetched from Google&apos;s database</li>
-                    <li>API rate limits or throttling</li>
-                    <li>Data sampling in Google&apos;s Analytics</li>
-                    <li>Timezone differences affecting data aggregation</li>
-                    <li>Caching or processing delays</li>
-                  </ul>
-                </span>
-              </div>
-              <ExternalLinkButton>
-                <a
-                  href="https://analytics.google.com/analytics"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View Google Analytics
-                </a>
-              </ExternalLinkButton>
-            </div>
-          </div>
-        </header>
-
-        {error ? (
-          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm">
-            <p className="text-red-300">{error}</p>
-            <RetryButton
-              onClick={() => {
-                setError(null);
-                setIsLoading(true);
-                setHasSynced(false);
-                fetchAnalyticsData();
-              }}
-              className="mt-2"
-            >
-              Retry
-            </RetryButton>
-          </div>
-        ) : (
-          <div className="space-y-8">
-            <section className="bg-gradient-to-br from-blue-600/80 to-gray-800/80 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-blue-500/30 hover:border-blue-400/50 transition-all">
-              <h2 className="text-2xl font-bold text-blue-200 mb-4">Realtime Analytics</h2>
-              {realtimeData ? (
-                <div className="flex items-center gap-6">
-                  <div className="bg-gray-900/40 px-6 py-4 rounded-xl border border-gray-700/50">
-                    <p className="text-sm text-gray-400">Active Users</p>
-                    <p className="text-3xl font-bold text-blue-300 animate-pulse">
-                      {realtimeData.activeUsersInLast30Minutes}
-                    </p>
-                  </div>
-                  <p className="text-sm text-gray-400">Last 30 minutes</p>
-                </div>
-              ) : (
-                <p className="text-gray-400">No realtime data available</p>
-              )}
-            </section>
-
-            <ContactsDashboard />
-
-            <NewUsersChart data={mainData} currentYear={new Date().getFullYear()} />
-
-            <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
-              <h2 className="text-2xl font-bold text-blue-200 mb-6">
-                Main Analytics ({new Date().getFullYear()})
-              </h2>
-              {mainData.length === 0 ? (
-                <p className="text-gray-400 text-center py-4">No data available</p>
-              ) : (
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead className="text-xs text-gray-400 uppercase bg-gray-900/50">
-                      <tr>
-                        {['Month', 'Total Users', 'New Users', 'Page Views', 'Avg. Engagement'].map(
-                          (header) => (
-                            <th key={header} className="px-6 py-3 font-medium">
-                              {header}
-                            </th>
-                          )
-                        )}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {mainData.map((row, index) => (
-                        <tr
-                          key={index}
-                          className="border-b border-gray-700/50 hover:bg-gray-700/30 transition-all"
-                        >
-                          <td className="px-6 py-4 font-medium text-blue-200">
-                            {formatMonth(row.date)}
-                          </td>
-                          <td className="px-6 py-4">{row.totalUsers}</td>
-                          <td className="px-6 py-4 text-green-300">{row.newUsers}</td>
-                          <td className="px-6 py-4">{row.pageViews}</td>
-                          <td className="px-6 py-4">{formatDuration(row.averageEngagementTimePerActiveUser)}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </section>
-
-            <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
-              <h2 className="text-2xl font-bold text-blue-200 mb-6">
-                Channel Groups ({new Date().getFullYear()})
-              </h2>
-              {channelGroupData.length === 0 ? (
-                <p className="text-gray-400 text-center py-4">No data available</p>
-              ) : (
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead className="text-xs text-gray-400 uppercase bg-gray-900/50">
-                      <tr>
-                        {['Month', 'Channel Group', 'New Users', 'Active Users'].map((header) => (
-                          <th key={header} className="px-6 py-3 font-medium">
-                            {header}
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {channelGroupData.map((row, index) => (
-                        <tr
-                          key={index}
-                          className="border-b border-gray-700/50 hover:bg-gray-700/30 transition-all"
-                        >
-                          <td className="px-6 py-4 font-medium text-blue-200">
-                            {formatMonth(row.date)}
-                          </td>
-                          <td className="px-6 py-4">{row.channelGroup}</td>
-                          <td className="px-6 py-4 text-green-300">{row.newUsers}</td>
-                          <td className="px-6 py-4">{row.activeUsers}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </section>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+"use client";
+
+import { useState, useEffect, useMemo } from 'react';
+import { useStrapiAuth } from '@/lib/auth/auth-context';
+import { useAuth } from '@clerk/nextjs';
+import {
+  AnalyticsData,
+  ChannelGroupData,
+  getAnalyticsData,
+  getChannelGroupData,
+  getRealtimeData,
+  getUserActivityData,
+  RealtimeData,
+  UserActivityData,
+} from '@/lib/google/google-analytics';
+import { isAdminUser } from '@/lib/auth/auth-utils'; 
+import { NewUsersChart } from '@/components/addOns/functional/NewUserAnalytics';
+import ContactsDashboard from '@/components/addOns/functional/contactsDashboard/ContactsDashboard';
+import Spinner from '@/components/addOns/non-functional/spinner';
+import { ExternalLinkButton, RetryButton } from '@/components/other/button';
+
+interface StrapiUser {
+  id: number;
+  authId: string;
+  email: string;
+  username: string;
+  businessAdminId?: string;
+  userRole?: string;
+  firstName?: string;
+  lastName?: string;
+  businessId?: string[] | null;
+  dateJoined?: string;
+  businessOwner?: boolean;
+  userStatus?: string;
+  timezone?: string | null;
+  language?: string | null;
+  isVerified?: boolean;
+  businessTitle?: string | null;
+  userTitle?: string | null;
+  number?: string | null;
+  address?: {
+    zip: string;
+    city: string;
+    state: string;
+    street: string;
+    country: string;
+  } | null;
+  websiteUrl?: string | null;
+  primaryBusinessColor?: string | null;
+  secondaryBusinessColor?: string | null;
+  logoImage?: string | null;
+}
+
+export default function AnalyticsPage() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken, isSignedIn, isLoaded } = useAuth();
+  const [mainData, setMainData] = useState<AnalyticsData[]>([]);
+  const [channelGroupData, setChannelGroupData] = useState<ChannelGroupData[]>([]);
+  const [realtimeData, setRealtimeData] = useState<RealtimeData | null>(null);
+  const [userActivityData, setUserActivityData] = useState<UserActivityData[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasSynced, setHasSynced] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const memoizedUser = useMemo(() => user, [user?.authId, user?.businessAdminId, user?.userRole]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async (retries = 3, delay = 1000) => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+      for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+          const adminStatus = await isAdminUser(isSignedIn, user);
+          if (isMounted) {
+            setIsAdmin(adminStatus);
+            setError(null);
+          }
+          return;
+        } catch (error) {
+          console.error("AnalyticsPage: Admin check failed:", {
+            error: error instanceof Error ? error.message : "Unknown error",
+            attempt,
+            timestamp: new Date().toISOString(),
+          });
+          if (attempt < retries) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+          } else if (isMounted) {
+            setIsAdmin(false);
+            setError("Failed to verify admin status");
+          }
+        }
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  const fetchAnalyticsData = async () => {
+    if (!isAdmin) {
+      setError('Unauthorized: Only admins can access the analytics dashboard');
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      if (!hasSynced) {
+        await checkSession();
+        setHasSynced(true);
+      }
+
+      const year = new Date().getFullYear();
+      const token = await getToken();
+      if (!token) {
+        throw new Error('No authentication token available');
+      }
+
+      const [mainData, channelGroupData, realtimeData, userActivityData] = await Promise.all([
+        getAnalyticsData(year, token).catch((err) => {
+          console.error('getAnalyticsData failed:', err);
+          throw err;
+        }),
+        getChannelGroupData(year, token).catch((err) => {
+          console.error('getChannelGroupData failed:', err);
+          throw err;
+        }),
+        getRealtimeData(token).catch((err) => {
+          console.error('getRealtimeData failed:', err);
+          throw err;
+        }),
+        getUserActivityData(year, token).catch((err) => {
+          console.error('getUserActivityData failed:', err);
+          throw err;
+        }),
+      ]);
+
+      setMainData(mainData || []);
+      setChannelGroupData(channelGroupData || []);
+      setRealtimeData(realtimeData || null);
+      setUserActivityData(userActivityData || []);
+      setError(null);
+    } catch (err: any) {
+      console.error('fetchAnalyticsData error:', err);
+      setError(err.message || 'Unable to load analytics data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isLoaded || authLoading) {
+      return;
+    }
+
+    if (!isSignedIn || !memoizedUser) {
+      setIsLoading(false);
+      return;
+    }
+
+    if (isSignedIn && isAdmin && !hasSynced) {
+      fetchAnalyticsData();
+    } else if (!isAdmin) {
+      setIsLoading(false);
+    }
+  }, [isLoaded, authLoading, isSignedIn, memoizedUser, isAdmin, hasSynced]);
+
+  const formatMonth = (date: string) => {
+    const year = date.slice(0, 4);
+    const month = parseInt(date.slice(4, 6), 10);
+    return new Date(parseInt(year), month - 1).toLocaleDateString('en-US', {
+      month: 'short',
+      year: 'numeric',
+    });
+  };
+
+  const formatDuration = (minutes: number) => {
+    const totalSeconds = minutes * 60;
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = Math.floor(totalSeconds % 60);
+    return `${mins}m ${secs}s`;
+  };
+
+  if (!isLoaded || authLoading || isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isSignedIn || !memoizedUser || error === 'No authentication token available') {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">Not authenticated</h1>
+          <p className="mt-4 text-gray-500">
+            You must be logged in to view this page.{' '}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">Unauthorized</h1>
+          <p className="mt-4 text-gray-500">Only admins can access the analytics dashboard.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-12 relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
+              Analytics Dashboard
+            </h1>
+            <div className="flex flex-row items-center justify-end gap-4 relative w-full">
+              <div className="relative group">
+                <span className="flex items-center justify-center w-6 h-6 text-red-500 border-2 border-red-500 rounded-full text-sm font-bold">
+                  !
+                </span>
+                <span className="absolute left-1/2 -translate-x-1/2 top-full hidden w-72 sm:w-80 p-4 text-sm text-gray-200 bg-gray-800 border border-gray-700 rounded-md group-hover:block z-10 mt-6">
+                  Analytics may differ slightly from Google&apos;s dashboard due to:
+                  <ul className="list-disc pl-5 mt-2 space-y-1">
+                    <li>Realtime data updates</li>
+                    <li>Data fetched from Google&apos;s database</li>
+                    <li>API rate limits or throttling</li>
+                    <li>Data sampling in Google&apos;s Analytics</li>
+                    <li>Timezone differences affecting data aggregation</li>
+                    <li>Caching or processing delays</li>
+                  </ul>
+                </span>
+              </div>
+              <ExternalLinkButton>
+                <a
+                  href="https://analytics.google.com/analytics"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View Google Analytics
+                </a>
+              </ExternalLinkButton>
+            </div>
+          </div>
+        </header>
+
+        {error ? (
+          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm">
+            <p className="text-red-300">{error}</p>
+            <RetryButton
+              onClick={() => {
+                setError(null);
+                setIsLoading(true);
+                setHasSynced(false);
+                fetchAnalyticsData();
+              }}
+              className="mt-2"
+            >
+              Retry
+            </RetryButton>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            <section className="bg-gradient-to-br from-blue-600/80 to-gray-800/80 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-blue-500/30 hover:border-blue-400/50 transition-all">
+              <h2 className="text-2xl font-bold text-blue-200 mb-4">Realtime Analytics</h2>
+              {realtimeData ? (
+                <div className="flex items-center gap-6">
+                  <div className="bg-gray-900/40 px-6 py-4 rounded-xl border border-gray-700/50">
+                    <p className="text-sm text-gray-400">Active Users</p>
+                    <p className="text-3xl font-bold text-blue-300 animate-pulse">
+                      {realtimeData.activeUsersInLast30Minutes}
+                    </p>
+                  </div>
+                  <p className="text-sm text-gray-400">Last 30 minutes</p>
+                </div>
+              ) : (
+                <p className="text-gray-400">No realtime data available</p>
+              )}
+            </section>
+
+            <ContactsDashboard />
+
+            <NewUsersChart data={mainData} currentYear={new Date().getFullYear()} />
+
+            <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+              <h2 className="text-2xl font-bold text-blue-200 mb-6">
+                Main Analytics ({new Date().getFullYear()})
+              </h2>
+              {mainData.length === 0 ? (
+                <p className="text-gray-400 text-center py-4">No data available</p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="text-xs text-gray-400 uppercase bg-gray-900/50">
+                      <tr>
+                        {['Month', 'Total Users', 'New Users', 'Page Views', 'Avg. Engagement'].map(
+                          (header) => (
+                            <th key={header} className="px-6 py-3 font-medium">
+                              {header}
+                            </th>
+                          )
+                        )}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {mainData.map((row, index) => (
+                        <tr
+                          key={index}
+                          className="border-b border-gray-700/50 hover:bg-gray-700/30 transition-all"
+                        >
+                          <td className="px-6 py-4 font-medium text-blue-200">
+                            {formatMonth(row.date)}
+                          </td>
+                          <td className="px-6 py-4">{row.totalUsers}</td>
+                          <td className="px-6 py-4 text-green-300">{row.newUsers}</td>
+                          <td className="px-6 py-4">{row.pageViews}</td>
+                          <td className="px-6 py-4">{formatDuration(row.averageEngagementTimePerActiveUser)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </section>
+
+            <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+              <h2 className="text-2xl font-bold text-blue-200 mb-6">
+                Channel Groups ({new Date().getFullYear()})
+              </h2>
+              {channelGroupData.length === 0 ? (
+                <p className="text-gray-400 text-center py-4">No data available</p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="text-xs text-gray-400 uppercase bg-gray-900/50">
+                      <tr>
+                        {['Month', 'Channel Group', 'New Users', 'Active Users'].map((header) => (
+                          <th key={header} className="px-6 py-3 font-medium">
+                            {header}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {channelGroupData.map((row, index) => (
+                        <tr
+                          key={index}
+                          className="border-b border-gray-700/50 hover:bg-gray-700/30 transition-all"
+                        >
+                          <td className="px-6 py-4 font-medium text-blue-200">
+                            {formatMonth(row.date)}
+                          </td>
+                          <td className="px-6 py-4">{row.channelGroup}</td>
+                          <td className="px-6 py-4 text-green-300">{row.newUsers}</td>
+                          <td className="px-6 py-4">{row.activeUsers}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </section>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }