+ {/* Header row */}
+
+
+
+
+
} onClick={fetchData} loading={loading}>
+ Refresh
+
+
+
+ {loading && !data ? (
+
+
+
+ ) : !data ? (
+
+ ) : (
+ <>
+ {/* Stat cards */}
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ {/* Views over time chart */}
+
+ {chartData.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Module breakdown */}
+
+
+ {data.moduleBreakdown.map((m) => {
+ const pct = totalModuleViews > 0
+ ? Math.round((m.views / totalModuleViews) * 100)
+ : 0;
+ return (
+
+
+
+ {MODULE_LABELS[m.module] ?? m.module}
+
+
+
+
+ {/* Top content table */}
+
+ `${r.module}-${r.title}-${i}`}
+ pagination={{ pageSize: 10, showSizeChanger: false }}
+ size="small"
+ scroll={{ x: 400 }}
+ />
+
+
+ )}
+
+ );
+}
diff --git a/admin/src/pages/analytics/ContentAnalyticsPage.tsx b/admin/src/pages/analytics/ContentAnalyticsPage.tsx
new file mode 100644
index 00000000..94d2db00
--- /dev/null
+++ b/admin/src/pages/analytics/ContentAnalyticsPage.tsx
@@ -0,0 +1,138 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Row, Col, Card, Table, Select, Spin, Empty, Tag, Segmented, App } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { FileTextOutlined } from '@ant-design/icons';
+import { useOutletContext } from 'react-router-dom';
+import { api } from '@/lib/api';
+import type { AppOutletContext } from '@/types/api';
+
+interface ContentItem {
+ id: string;
+ title: string;
+ views: number;
+ module: string;
+}
+
+interface ContentAnalyticsData {
+ content: ContentItem[];
+}
+
+const MODULE_TAG_COLORS: Record = {
+ docs: 'blue',
+ video: 'purple',
+ photo: 'green',
+};
+
+const MODULE_OPTIONS = ['All', 'Docs', 'Video', 'Photo'];
+
+export default function ContentAnalyticsPage() {
+ const { setPageHeader } = useOutletContext();
+ const [days, setDays] = useState(30);
+ const [moduleFilter, setModuleFilter] = useState('All');
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const { message } = App.useApp();
+
+ useEffect(() => {
+ setPageHeader({ title: 'Content Analytics' });
+ return () => setPageHeader(null);
+ }, [setPageHeader]);
+
+ const fetchData = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await api.get('/analytics/content', {
+ params: { days, module: moduleFilter.toLowerCase() },
+ });
+ setData(res.data);
+ } catch {
+ message.error('Failed to load content analytics');
+ } finally {
+ setLoading(false);
+ }
+ }, [days, moduleFilter, message]);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ const columns: ColumnsType = [
+ {
+ title: '#',
+ key: 'rank',
+ width: 50,
+ render: (_: unknown, __: ContentItem, index: number) => index + 1,
+ },
+ {
+ title: 'Title',
+ dataIndex: 'title',
+ key: 'title',
+ ellipsis: true,
+ },
+ {
+ title: 'Module',
+ dataIndex: 'module',
+ key: 'module',
+ width: 100,
+ render: (mod: string) => (
+
+ {mod.charAt(0).toUpperCase() + mod.slice(1)}
+
+ ),
+ },
+ {
+ title: 'Views',
+ dataIndex: 'views',
+ key: 'views',
+ width: 100,
+ sorter: (a: ContentItem, b: ContentItem) => a.views - b.views,
+ defaultSortOrder: 'descend',
+ },
+ ];
+
+ return (
+
+
+
+ setModuleFilter(val as string)}
+ options={MODULE_OPTIONS}
+ />
+
+
+
+
+
+
+ {loading && !data ? (
+
+
+
+ ) : !data || data.content.length === 0 ? (
+
+ ) : (
+
Content Performance}>
+
+
+ )}
+
+ {/* Header row */}
+
+
+
+
+
} onClick={fetchData} loading={loading}>
+ Refresh
+
+
+
+ {loading && !data ? (
+
+
+
+ ) : !data ? (
+
+ ) : (
+ <>
+ {/* Map */}
+
+ {data.geoPoints.length === 0 ? (
+
+ ) : (
+
+
+
+ {data.geoPoints.map((pt, idx) => (
+
+
+
+ {MODULE_LABELS[pt.module] ?? pt.module}
+
+ {pt.count.toLocaleString()} view{pt.count !== 1 ? 's' : ''}
+
+
+
+ ))}
+
+
+ {Object.entries(MODULE_COLORS).map(([mod, color]) => (
+
+
+ {MODULE_LABELS[mod] ?? mod}
+
+ ))}
+
+ )}
+
+
+ {/* Two tables side by side */}
+
+
+
+ {data.viewsByCountry.length === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {data.topCities.length === 0 ? (
+
+ ) : (
+ `${r.city}-${r.country}-${i}`}
+ pagination={{ pageSize: 10, showSizeChanger: false }}
+ size="small"
+ scroll={{ x: 350 }}
+ />
+ )}
+
+
+
+
+ )}
+
+ );
+}
diff --git a/admin/src/pages/analytics/UserAnalyticsPage.tsx b/admin/src/pages/analytics/UserAnalyticsPage.tsx
new file mode 100644
index 00000000..d8dc33e0
--- /dev/null
+++ b/admin/src/pages/analytics/UserAnalyticsPage.tsx
@@ -0,0 +1,396 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Row, Col, Card, Statistic, Table, Select, Button, Spin, Empty, Tag, App, Grid } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import {
+ TeamOutlined,
+ ArrowLeftOutlined,
+ PlayCircleOutlined,
+ ClockCircleOutlined,
+ PictureOutlined,
+ CheckCircleOutlined,
+} from '@ant-design/icons';
+import { useOutletContext, useParams, useNavigate } from 'react-router-dom';
+import { api } from '@/lib/api';
+import type { AppOutletContext } from '@/types/api';
+
+/* ---------- Shared helpers ---------- */
+
+function formatWatchTime(seconds: number): string {
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor((seconds % 3600) / 60);
+ const s = Math.floor(seconds % 60);
+ if (h > 0) return `${h}h ${m}m`;
+ return `${m}m ${s}s`;
+}
+
+function formatRelativeTime(dateStr: string | null): string {
+ if (!dateStr) return 'Never';
+ const diff = Date.now() - new Date(dateStr).getTime();
+ const mins = Math.floor(diff / 60000);
+ if (mins < 1) return 'Just now';
+ if (mins < 60) return `${mins}m ago`;
+ const hours = Math.floor(mins / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.floor(hours / 24);
+ if (days < 30) return `${days}d ago`;
+ const months = Math.floor(days / 30);
+ return `${months}mo ago`;
+}
+
+/* ---------- Types ---------- */
+
+interface UserRow {
+ userId: string;
+ name: string | null;
+ email: string;
+ videoViews: number;
+ photoViews: number;
+ totalWatchTime: number;
+ lastActive: string | null;
+}
+
+interface UserDetailSummary {
+ videoViews: number;
+ totalWatchTime: number;
+ photoViews: number;
+}
+
+interface RecentVideoView {
+ videoId: number;
+ videoTitle: string;
+ watchTime: number;
+ completed: boolean;
+ viewedAt: string;
+}
+
+interface RecentPhotoView {
+ photoId: number;
+ photoTitle: string;
+ viewedAt: string;
+}
+
+interface UserDetailData {
+ summary: UserDetailSummary;
+ recentVideoViews: RecentVideoView[];
+ recentPhotoViews: RecentPhotoView[];
+}
+
+interface UserListData {
+ users: UserRow[];
+ pagination: { page: number; limit: number; total: number; totalPages: number };
+}
+
+/* ---------- List mode ---------- */
+
+function UserList() {
+ const { message } = App.useApp();
+ const navigate = useNavigate();
+ const screens = Grid.useBreakpoint();
+ const isMobile = !screens.md;
+
+ const [days, setDays] = useState(30);
+ const [page, setPage] = useState(1);
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const fetchData = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await api.get('/analytics/users', {
+ params: { days, page, limit: 20 },
+ });
+ setData(res.data);
+ } catch {
+ message.error('Failed to load user analytics');
+ } finally {
+ setLoading(false);
+ }
+ }, [days, page, message]);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ const columns: ColumnsType = [
+ {
+ title: 'Name',
+ key: 'name',
+ ellipsis: true,
+ render: (_: unknown, record: UserRow) => record.name || record.email,
+ },
+ {
+ title: 'Video Views',
+ dataIndex: 'videoViews',
+ key: 'videoViews',
+ width: 110,
+ sorter: (a: UserRow, b: UserRow) => a.videoViews - b.videoViews,
+ },
+ {
+ title: 'Photo Views',
+ dataIndex: 'photoViews',
+ key: 'photoViews',
+ width: 110,
+ sorter: (a: UserRow, b: UserRow) => a.photoViews - b.photoViews,
+ },
+ {
+ title: 'Watch Time',
+ dataIndex: 'totalWatchTime',
+ key: 'totalWatchTime',
+ width: 110,
+ render: (val: number) => formatWatchTime(val),
+ sorter: (a: UserRow, b: UserRow) => a.totalWatchTime - b.totalWatchTime,
+ },
+ {
+ title: 'Last Active',
+ dataIndex: 'lastActive',
+ key: 'lastActive',
+ width: 110,
+ render: (val: string | null) => formatRelativeTime(val),
+ },
+ ];
+
+ return (
+
+
+
+
+
+ {loading && !data ? (
+
+
+
+ ) : !data || data.users.length === 0 ? (
+
+ ) : (
+
User Engagement}>
+ ({
+ style: { cursor: 'pointer' },
+ onClick: () => navigate(`/app/analytics/users/${record.userId}`),
+ })}
+ pagination={{
+ current: page,
+ total: data.pagination.total,
+ pageSize: 20,
+ showSizeChanger: false,
+ onChange: setPage,
+ }}
+ />
+
+ )}
+
+ );
+}
+
+/* ---------- Detail mode ---------- */
+
+function UserDetail({ userId }: { userId: string }) {
+ const { message } = App.useApp();
+ const navigate = useNavigate();
+ const screens = Grid.useBreakpoint();
+ const isMobile = !screens.md;
+
+ const [days, setDays] = useState(30);
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const fetchData = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await api.get(`/analytics/users/${userId}`, {
+ params: { days },
+ });
+ setData(res.data);
+ } catch {
+ message.error('Failed to load user detail');
+ } finally {
+ setLoading(false);
+ }
+ }, [userId, days, message]);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ const videoColumns: ColumnsType = [
+ {
+ title: 'Video',
+ dataIndex: 'videoTitle',
+ key: 'videoTitle',
+ ellipsis: true,
+ },
+ {
+ title: 'Watch Time',
+ dataIndex: 'watchTime',
+ key: 'watchTime',
+ width: 110,
+ render: (val: number) => formatWatchTime(val),
+ },
+ {
+ title: 'Completed',
+ dataIndex: 'completed',
+ key: 'completed',
+ width: 90,
+ render: (val: boolean) =>
+ val ? } color="success">Yes : No,
+ },
+ {
+ title: 'Viewed',
+ dataIndex: 'viewedAt',
+ key: 'viewedAt',
+ width: 110,
+ render: (val: string) => formatRelativeTime(val),
+ },
+ ];
+
+ const photoColumns: ColumnsType = [
+ {
+ title: 'Photo',
+ dataIndex: 'photoTitle',
+ key: 'photoTitle',
+ ellipsis: true,
+ },
+ {
+ title: 'Viewed',
+ dataIndex: 'viewedAt',
+ key: 'viewedAt',
+ width: 110,
+ render: (val: string) => formatRelativeTime(val),
+ },
+ ];
+
+ return (
+
+
+
}
+ onClick={() => navigate('/app/analytics/users')}
+ >
+ Back to Users
+
+
+
+
+
+ {loading && !data ? (
+
+
+
+ ) : !data ? (
+
+ ) : (
+ <>
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+ {data.recentVideoViews.length === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {data.recentPhotoViews.length === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ )}
+
;
+ }
+
+ return (
+
+
+
+ {!data ? (
+
+ ) : (
+ <>
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+
+ {data.recentVideoViews.length === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+ {data.recentPhotoViews.length === 0 ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+ Analytics & GeoIP
+
+ Unified analytics, visitor geography, user drill-down
+
+
setFeatureFlags((f) => ({ ...f, enableAnalytics: v }))}
+ disabled={isRegistered}
+ />
+