diff --git a/dashboard/src/components/dashboard/GorgiasOverview.jsx b/dashboard/src/components/dashboard/GorgiasOverview.jsx
new file mode 100644
index 0000000..614eb75
--- /dev/null
+++ b/dashboard/src/components/dashboard/GorgiasOverview.jsx
@@ -0,0 +1,477 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+ Select,
+ SelectTrigger,
+ SelectContent,
+ SelectItem,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Clock,
+ Star,
+ Users,
+ MessageSquare,
+ Mail,
+ Send,
+ Loader2,
+} from "lucide-react";
+import axios from "axios";
+
+const TIME_RANGES = {
+ 7: "Last 7 Days",
+ 14: "Last 14 Days",
+ 30: "Last 30 Days",
+ 90: "Last 90 Days",
+};
+
+const formatDuration = (seconds) => {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
+};
+
+const getDateRange = (days) => {
+ const end = new Date();
+ end.setUTCHours(23, 59, 59, 999);
+
+ const start = new Date();
+ start.setDate(start.getDate() - days);
+ start.setUTCHours(0, 0, 0, 0);
+
+ return {
+ start_datetime: start.toISOString(),
+ end_datetime: end.toISOString()
+ };
+};
+
+const MetricCard = ({
+ title,
+ value,
+ delta,
+ suffix = "",
+ icon: Icon,
+ colorClass = "blue",
+ more_is_better = true,
+ loading = false,
+}) => {
+ const getDeltaColor = (d) => {
+ if (d === 0) return "text-gray-600 dark:text-gray-400";
+ const isPositive = d > 0;
+ return isPositive === more_is_better
+ ? "text-green-600 dark:text-green-500"
+ : "text-red-600 dark:text-red-500";
+ };
+
+ const formatDelta = (d) => {
+ if (d === undefined || d === null) return null;
+ if (d === 0) return "0";
+ return (d > 0 ? "+" : "") + d + suffix;
+ };
+
+ const colorMapping = {
+ blue: "bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-800/50 text-blue-600 dark:text-blue-400",
+ green: "bg-green-50 dark:bg-green-900/20 border-green-100 dark:border-green-800/50 text-green-600 dark:text-green-400",
+ purple: "bg-purple-50 dark:bg-purple-900/20 border-purple-100 dark:border-purple-800/50 text-purple-600 dark:text-purple-400",
+ indigo: "bg-indigo-50 dark:bg-indigo-900/20 border-indigo-100 dark:border-indigo-800/50 text-indigo-600 dark:text-indigo-400",
+ orange: "bg-orange-50 dark:bg-orange-900/20 border-orange-100 dark:border-orange-800/50 text-orange-600 dark:text-orange-400",
+ teal: "bg-teal-50 dark:bg-teal-900/20 border-teal-100 dark:border-teal-800/50 text-teal-600 dark:text-teal-400",
+ cyan: "bg-cyan-50 dark:bg-cyan-900/20 border-cyan-100 dark:border-cyan-800/50 text-cyan-600 dark:text-cyan-400",
+ };
+
+ const baseColors = colorMapping[colorClass];
+
+ return (
+
+
+ {title}
+
+
+ {loading ? (
+
+ ) : (
+ <>
+
+ {Icon &&
}
+
+ {typeof value === "number"
+ ? value.toLocaleString() + suffix
+ : value}
+
+
+ {delta !== undefined && (
+
+ {formatDelta(delta)}
+
+ )}
+
+ )}
+
+
+ );
+};
+
+const TableSkeleton = () => (
+
+
+
+
+
+
+);
+
+const GorgiasOverview = () => {
+ const [timeRange, setTimeRange] = useState(7);
+ const [data, setData] = useState({});
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const loadStats = useCallback(async () => {
+ setLoading(true);
+ const filters = getDateRange(timeRange);
+
+ try {
+ const [overview, channelStats, agentStats, satisfaction, selfService] =
+ await Promise.all([
+ axios.post('/api/gorgias/stats/overview', filters)
+ .then(res => res.data?.data?.data?.data || []),
+ axios.post('/api/gorgias/stats/tickets-created-per-channel', filters)
+ .then(res => res.data?.data?.data?.data?.lines || []),
+ axios.post('/api/gorgias/stats/tickets-closed-per-agent', filters)
+ .then(res => res.data?.data?.data?.data?.lines || []),
+ axios.post('/api/gorgias/stats/satisfaction-surveys', filters)
+ .then(res => res.data?.data?.data?.data || []),
+ axios.post('/api/gorgias/stats/self-service-overview', filters)
+ .then(res => res.data?.data?.data?.data || []),
+ ]);
+
+ console.log('Raw API responses:', {
+ overview,
+ channelStats,
+ agentStats,
+ satisfaction,
+ selfService
+ });
+
+ setData({
+ overview,
+ channels: channelStats,
+ agents: agentStats,
+ satisfaction,
+ selfService,
+ });
+
+ setError(null);
+ } catch (err) {
+ console.error("Error loading stats:", err);
+ const errorMessage = err.response?.data?.error || err.message;
+ setError(errorMessage);
+ if (err.response?.status === 401) {
+ setError('Authentication failed. Please check your Gorgias API credentials.');
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, [timeRange]);
+
+ useEffect(() => {
+ loadStats();
+ // Set up auto-refresh every 5 minutes
+ const interval = setInterval(loadStats, 5 * 60 * 1000);
+ return () => clearInterval(interval);
+ }, [loadStats]);
+
+ // Convert overview array to stats format
+ const stats = (data.overview || []).reduce((acc, item) => {
+ acc[item.name] = {
+ value: item.value || 0,
+ delta: item.delta || 0,
+ type: item.type,
+ more_is_better: item.more_is_better
+ };
+ return acc;
+ }, {});
+
+ console.log('Processed stats:', stats);
+
+ // Process satisfaction data
+ const satisfactionStats = (data.satisfaction || []).reduce((acc, item) => {
+ if (item.name !== 'response_distribution') {
+ acc[item.name] = {
+ value: item.value || 0,
+ delta: item.delta || 0,
+ type: item.type,
+ more_is_better: item.more_is_better
+ };
+ }
+ return acc;
+ }, {});
+
+ console.log('Processed satisfaction stats:', satisfactionStats);
+
+ // Process self-service data
+ const selfServiceStats = (data.selfService || []).reduce((acc, item) => {
+ acc[item.name] = {
+ value: item.value || 0,
+ delta: item.delta || 0,
+ type: item.type,
+ more_is_better: item.more_is_better
+ };
+ return acc;
+ }, {});
+
+ console.log('Processed self-service stats:', selfServiceStats);
+
+ // Process channel data
+ const channels = data.channels?.map(line => ({
+ name: line[0]?.value || '',
+ total: line[1]?.value || 0,
+ percentage: line[2]?.value || 0,
+ delta: line[3]?.value || 0
+ })) || [];
+
+ console.log('Processed channels:', channels);
+
+ // Process agent data
+ const agents = data.agents?.map(line => ({
+ name: line[0]?.value || '',
+ closed: line[1]?.value || 0,
+ rating: line[2]?.value,
+ percentage: line[3]?.value || 0,
+ delta: line[4]?.value || 0
+ })) || [];
+
+ console.log('Processed agents:', agents);
+
+ if (error) return
Error: {error}
;
+
+ return (
+
+
+
+
+ Customer Service
+
+
+
+
+
+ {/* Message & Response Metrics */}
+
+
+
+
+
+
+
+ {/* Satisfaction & Efficiency */}
+
+
+
+
+
+
+
+ {/* Channel Distribution */}
+
+
+
+ Channel Distribution
+
+
+ {loading ? (
+
+ ) : (
+
+
+
+ Channel
+ Total
+ %
+ Δ
+
+
+
+ {channels
+ .sort((a, b) => b.total - a.total)
+ .map((channel, index) => (
+
+
+ {channel.name}
+
+
+ {channel.total}
+
+
+ {channel.percentage}%
+
+ 0
+ ? "text-green-600 dark:text-green-500"
+ : channel.delta < 0
+ ? "text-red-600 dark:text-red-500"
+ : "dark:text-gray-300"
+ }`}
+ >
+ {channel.delta > 0 ? "+" : ""}
+ {channel.delta}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Agent Performance */}
+
+
+
+ Agent Performance
+
+
+ {loading ? (
+
+ ) : (
+
+
+
+ Agent
+ Closed
+ Rating
+ Δ
+
+
+
+ {agents
+ .filter((agent) => agent.name !== "Unassigned")
+ .map((agent, index) => (
+
+
+ {agent.name}
+
+
+ {agent.closed}
+
+
+ {agent.rating ? `${agent.rating}/5` : "-"}
+
+ 0
+ ? "text-green-600 dark:text-green-500"
+ : agent.delta < 0
+ ? "text-red-600 dark:text-red-500"
+ : "dark:text-gray-300"
+ }`}
+ >
+ {agent.delta > 0 ? "+" : ""}
+ {agent.delta}
+
+
+ ))}
+
+
+ )}
+
+
+ );
+};
+
+export default GorgiasOverview;
\ No newline at end of file
diff --git a/dashboard/src/lib/api.js b/dashboard/src/lib/api.js
new file mode 100644
index 0000000..0a5f7e3
--- /dev/null
+++ b/dashboard/src/lib/api.js
@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+// Create base64 encoded auth string
+const auth = Buffer.from(`${process.env.REACT_APP_GORGIAS_API_USERNAME}:${process.env.REACT_APP_GORGIAS_API_KEY}`).toString('base64');
+
+// Create axios instance for Gorgias API
+const gorgiasApi = axios.create({
+ baseURL: `https://${process.env.REACT_APP_GORGIAS_DOMAIN}.gorgias.com/api`,
+ headers: {
+ 'Authorization': `Basic ${auth}`,
+ 'Content-Type': 'application/json'
+ }
+});
+
+export { gorgiasApi };
\ No newline at end of file
diff --git a/dashboard/vite.config.js b/dashboard/vite.config.js
index 4df0703..3592a7b 100644
--- a/dashboard/vite.config.js
+++ b/dashboard/vite.config.js
@@ -167,6 +167,42 @@ export default defineConfig(({ mode }) => {
);
});
},
+ },
+ "/api/gorgias": {
+ target: "https://dashboard.kent.pw",
+ changeOrigin: true,
+ secure: true,
+ rewrite: (path) => path.replace(/^\/api\/gorgias/, "/api/gorgias"),
+ configure: (proxy, _options) => {
+ proxy.on("error", (err, req, res) => {
+ console.error("Gorgias proxy error:", err);
+ res.writeHead(500, {
+ "Content-Type": "application/json",
+ });
+ res.end(
+ JSON.stringify({
+ error: "Proxy Error",
+ message: err.message,
+ details: err.stack
+ })
+ );
+ });
+ proxy.on("proxyReq", (proxyReq, req, _res) => {
+ console.log("Outgoing Gorgias request:", {
+ method: req.method,
+ url: req.url,
+ path: proxyReq.path,
+ headers: proxyReq.getHeaders(),
+ });
+ });
+ proxy.on("proxyRes", (proxyRes, req, _res) => {
+ console.log("Gorgias proxy response:", {
+ statusCode: proxyRes.statusCode,
+ url: req.url,
+ headers: proxyRes.headers,
+ });
+ });
+ },
}
},
},
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY AnalyticsDashboard.jsx b/examples DO NOT USE OR EDIT/EXAMPLE ONLY AnalyticsDashboard.jsx
new file mode 100644
index 0000000..1e9e7aa
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY AnalyticsDashboard.jsx
@@ -0,0 +1,365 @@
+//src/components/dashboard/AnalyticsDashboard.jsx
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+import { Loader2 } from "lucide-react";
+import { googleAnalyticsService } from "../../services/googleAnalyticsService";
+
+export const AnalyticsDashboard = () => {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [timeRange, setTimeRange] = useState("30");
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ const result = await googleAnalyticsService.getBasicMetrics({
+ startDate: `${timeRange}daysAgo`,
+ });
+
+ if (result) {
+ const processedData = result.map((item) => ({
+ ...item,
+ date: formatGADate(item.date),
+ }));
+
+ const sortedData = processedData.sort((a, b) => a.date - b.date);
+
+ setData(sortedData);
+ } else {
+ console.log("No result data received");
+ }
+ } catch (error) {
+ console.error("Failed to fetch analytics:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchData();
+ }, [timeRange]);
+ const formatGADate = (gaDate) => {
+ const year = gaDate.substring(0, 4);
+ const month = gaDate.substring(4, 6);
+ const day = gaDate.substring(6, 8);
+ return new Date(year, month - 1, day);
+ };
+
+ const [selectedMetrics, setSelectedMetrics] = useState({
+ activeUsers: true,
+ newUsers: true,
+ pageViews: true,
+ conversions: true,
+ });
+
+ const MetricToggle = ({ label, checked, onChange }) => (
+
+
+
+
+ );
+
+ const CustomLegend = ({ metrics, selectedMetrics }) => {
+ // Separate items for left and right axes
+ const leftAxisItems = Object.entries(metrics).filter(
+ ([key, metric]) => metric.yAxis === "left" && selectedMetrics[key]
+ );
+
+ const rightAxisItems = Object.entries(metrics).filter(
+ ([key, metric]) => metric.yAxis === "right" && selectedMetrics[key]
+ );
+
+ return (
+
+
+
+ Left Axis
+
+ {leftAxisItems.map(([key, metric]) => (
+
+ ))}
+
+
+
+ Right Axis
+
+ {rightAxisItems.map(([key, metric]) => (
+
+ ))}
+
+
+ );
+ };
+
+ const metrics = {
+ activeUsers: { label: "Active Users", color: "#8b5cf6" },
+ newUsers: { label: "New Users", color: "#10b981" },
+ pageViews: { label: "Page Views", color: "#f59e0b" },
+ conversions: { label: "Conversions", color: "#3b82f6" },
+ };
+
+ const calculateSummary = () => {
+ if (!data.length) return null;
+
+ const totals = data.reduce(
+ (acc, day) => ({
+ activeUsers: acc.activeUsers + (Number(day.activeUsers) || 0),
+ newUsers: acc.newUsers + (Number(day.newUsers) || 0),
+ pageViews: acc.pageViews + (Number(day.pageViews) || 0),
+ conversions: acc.conversions + (Number(day.conversions) || 0),
+ avgSessionDuration:
+ acc.avgSessionDuration + (Number(day.avgSessionDuration) || 0),
+ bounceRate: acc.bounceRate + (Number(day.bounceRate) || 0),
+ }),
+ {
+ activeUsers: 0,
+ newUsers: 0,
+ pageViews: 0,
+ conversions: 0,
+ avgSessionDuration: 0,
+ bounceRate: 0,
+ }
+ );
+
+ return {
+ ...totals,
+ avgSessionDuration: totals.avgSessionDuration / data.length,
+ bounceRate: totals.bounceRate / data.length,
+ };
+ };
+
+ const summary = calculateSummary();
+
+ if (loading) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ const formatXAxisDate = (date) => {
+ if (!(date instanceof Date)) return "";
+ return `${date.getMonth() + 1}/${date.getDate()}`;
+ };
+
+ const CustomTooltip = ({ active, payload, label }) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ {label instanceof Date ? label.toLocaleDateString() : label}
+
+ {payload.map((entry, index) => (
+
+ {`${entry.name}: ${Number(entry.value).toLocaleString()}`}
+
+ ))}
+
+ );
+ }
+ return null;
+ };
+
+ return (
+
+
+
+
+ Analytics Overview
+
+
+
+
+ {summary && (
+
+
+
+ Total Users
+
+
+ {summary.activeUsers.toLocaleString()}
+
+
+
+
+ New Users
+
+
+ {summary.newUsers.toLocaleString()}
+
+
+
+
+ Page Views
+
+
+ {summary.pageViews.toLocaleString()}
+
+
+
+
+ Conversions
+
+
+ {summary.conversions.toLocaleString()}
+
+
+
+
+ setSelectedMetrics((prev) => ({ ...prev, activeUsers: checked }))
+ }
+ />
+
+ setSelectedMetrics((prev) => ({ ...prev, newUsers: checked }))
+ }
+ />
+
+ setSelectedMetrics((prev) => ({ ...prev, pageViews: checked }))
+ }
+ />
+
+ setSelectedMetrics((prev) => ({ ...prev, conversions: checked }))
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+ );
+};
+export default AnalyticsDashboard;
\ No newline at end of file
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY GorgiasSummary.jsx b/examples DO NOT USE OR EDIT/EXAMPLE ONLY GorgiasSummary.jsx
new file mode 100644
index 0000000..c573aaa
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY GorgiasSummary.jsx
@@ -0,0 +1,401 @@
+import React, { useState, useEffect, useCallback } from "react";
+import gorgiasService from "../../services/gorgiasService";
+import { getDateRange } from "../../utils/dateUtils";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+ Select,
+ SelectTrigger,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Clock, Star, Users, MessageSquare, Mail, Send } from "lucide-react";
+
+const TIME_RANGES = {
+ 7: "Last 7 Days",
+ 14: "Last 14 Days",
+ 30: "Last 30 Days",
+ 90: "Last 90 Days",
+};
+
+const formatDuration = (seconds) => {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
+};
+
+const MetricCard = ({
+ title,
+ value,
+ delta,
+ suffix = "",
+ icon: Icon,
+ colorClass = "blue",
+ more_is_better = true,
+ loading = false,
+}) => {
+ const getDeltaColor = (d) => {
+ if (d === 0) return "text-gray-600 dark:text-gray-400";
+ const isPositive = d > 0;
+ return isPositive === more_is_better
+ ? "text-green-600 dark:text-green-500"
+ : "text-red-600 dark:text-red-500";
+ };
+
+ const formatDelta = (d) => {
+ if (d === undefined || d === null) return null;
+ if (d === 0) return "0";
+ return (d > 0 ? "+" : "") + d + suffix;
+ };
+
+ const colorMapping = {
+ blue: "bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-800/50 text-blue-600 dark:text-blue-400",
+ green:
+ "bg-green-50 dark:bg-green-900/20 border-green-100 dark:border-green-800/50 text-green-600 dark:text-green-400",
+ purple:
+ "bg-purple-50 dark:bg-purple-900/20 border-purple-100 dark:border-purple-800/50 text-purple-600 dark:text-purple-400",
+ indigo:
+ "bg-indigo-50 dark:bg-indigo-900/20 border-indigo-100 dark:border-indigo-800/50 text-indigo-600 dark:text-indigo-400",
+ orange:
+ "bg-orange-50 dark:bg-orange-900/20 border-orange-100 dark:border-orange-800/50 text-orange-600 dark:text-orange-400",
+ teal: "bg-teal-50 dark:bg-teal-900/20 border-teal-100 dark:border-teal-800/50 text-teal-600 dark:text-teal-400",
+ cyan: "bg-cyan-50 dark:bg-cyan-900/20 border-cyan-100 dark:border-cyan-800/50 text-cyan-600 dark:text-cyan-400",
+ };
+
+ const baseColors = colorMapping[colorClass];
+
+ return (
+
+
+ {title}
+
+
+ {loading ? (
+
+ ) : (
+ <>
+
+ {Icon &&
}
+
+ {typeof value === "number"
+ ? value.toLocaleString() + suffix
+ : value}
+
+
+ {delta !== undefined && (
+
+ {formatDelta(delta)}
+
+ )}
+
+ )}
+
+
+ );
+};
+
+const TableSkeleton = () => (
+
+
+
+
+
+
+);
+
+const GorgiasSummary = () => {
+ const [timeRange, setTimeRange] = useState(7);
+ const [data, setData] = useState({});
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const loadStats = useCallback(async () => {
+ setLoading(true);
+ const filters = getDateRange(timeRange);
+
+ try {
+ const [overview, channelStats, agentStats, satisfaction, selfService] =
+ await Promise.all([
+ gorgiasService.fetchStatistics("overview", filters),
+ gorgiasService.fetchStatistics(
+ "tickets-created-per-channel",
+ filters
+ ),
+ gorgiasService.fetchStatistics("tickets-closed-per-agent", filters),
+ gorgiasService.fetchStatistics("satisfaction-surveys", filters),
+ gorgiasService.fetchStatistics("self-service-overview", filters),
+ ]);
+
+ setData({
+ overview: overview.data.data.data || [],
+ channels: channelStats.data.data.data.lines || [],
+ agents: agentStats.data.data.data.lines || [],
+ satisfaction: satisfaction.data.data.data || [],
+ selfService: selfService.data.data.data || [],
+ });
+ setError(null);
+ } catch (err) {
+ console.error("Error loading stats:", err);
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ }, [timeRange]);
+
+ useEffect(() => {
+ loadStats();
+ // Set up auto-refresh every 5 minutes
+ const interval = setInterval(loadStats, 5 * 60 * 1000);
+ return () => clearInterval(interval);
+ }, [loadStats]);
+
+ // Convert overview array to object for easier access
+ const stats =
+ data.overview?.reduce((acc, item) => {
+ acc[item.name] = item;
+ return acc;
+ }, {}) || {};
+
+ // Process satisfaction data
+ const satisfactionStats =
+ data.satisfaction?.reduce((acc, item) => {
+ acc[item.name] = item;
+ return acc;
+ }, {}) || {};
+
+ // Process self-service data
+ const selfServiceStats =
+ data.selfService?.reduce((acc, item) => {
+ acc[item.name] = item;
+ return acc;
+ }, {}) || {};
+
+ if (error) return
Error: {error}
;
+
+ return (
+
+
+
+
+ Customer Service
+
+
+
+
+
+ {/* Message & Response Metrics */}
+
+
+
+
+
+
+
+ {/* Satisfaction & Efficiency */}
+
+
+
+
+
+
+
+ {/* Channel Distribution */}
+
+
+
+ Channel Distribution
+
+
+ {loading ? (
+
+ ) : (
+
+
+
+ Channel
+ Total
+ %
+ Δ
+
+
+
+ {data.channels
+ .sort((a, b) => b[1].value - a[1].value)
+ .map((line, index) => (
+
+
+ {line[0].value}
+
+
+ {line[1].value}
+
+
+ {line[2].value}%
+
+ 0
+ ? "text-green-600 dark:text-green-500"
+ : line[3].value < 0
+ ? "text-red-600 dark:text-red-500"
+ : "dark:text-gray-300"
+ }`}
+ >
+ {line[3].value > 0 ? "+" : ""}
+ {line[3].value}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Agent Performance - Same dark mode updates */}
+
+
+
+ Agent Performance
+
+
+ {loading ? (
+
+ ) : (
+
+
+
+ Agent
+ Closed
+ Rating
+ Δ
+
+
+
+ {data.agents
+ .filter((line) => line[0].value !== "Unassigned")
+ .map((line, index) => (
+
+
+ {line[0].value}
+
+
+ {line[1].value}
+
+
+ {line[2].value ? `${line[2].value}/5` : "-"}
+
+ 0
+ ? "text-green-600 dark:text-green-500"
+ : line[4].value < 0
+ ? "text-red-600 dark:text-red-500"
+ : "dark:text-gray-300"
+ }`}
+ >
+ {line[4].value > 0 ? "+" : ""}
+ {line[4].value}
+
+
+ ))}
+
+
+ )}
+
+
+ );
+};
+
+export default GorgiasSummary;
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY RealtimeAnalytics.jsx b/examples DO NOT USE OR EDIT/EXAMPLE ONLY RealtimeAnalytics.jsx
new file mode 100644
index 0000000..c47e92b
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY RealtimeAnalytics.jsx
@@ -0,0 +1,529 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ PieChart,
+ Pie,
+ Cell,
+} from "recharts";
+import { Loader2, AlertTriangle } from "lucide-react";
+import {
+ Tooltip as UITooltip,
+ TooltipContent,
+ TooltipTrigger,
+ TooltipProvider,
+} from "@/components/ui/tooltip";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ Table,
+ TableHeader,
+ TableHead,
+ TableBody,
+ TableRow,
+ TableCell,
+} from "@/components/ui/table";
+import { googleAnalyticsService } from "../../services/googleAnalyticsService";
+import { format } from "date-fns";
+
+const formatNumber = (value, decimalPlaces = 0) => {
+ return new Intl.NumberFormat("en-US", {
+ minimumFractionDigits: decimalPlaces,
+ maximumFractionDigits: decimalPlaces,
+ }).format(value || 0);
+};
+
+const formatPercent = (value, decimalPlaces = 1) =>
+ `${(value || 0).toFixed(decimalPlaces)}%`;
+
+const summaryCard = (label, sublabel, value, options = {}) => {
+ const {
+ isMonetary = false,
+ isPercentage = false,
+ decimalPlaces = 0,
+ } = options;
+
+ let displayValue;
+ if (isMonetary) {
+ displayValue = formatCurrency(value, decimalPlaces);
+ } else if (isPercentage) {
+ displayValue = formatPercent(value, decimalPlaces);
+ } else {
+ displayValue = formatNumber(value, decimalPlaces);
+ }
+
+ return (
+
+
+ {label}
+
+
+ {displayValue}
+
+
{sublabel}
+
+ );
+};
+const QuotaInfo = ({ tokenQuota }) => {
+ // Add early return if tokenQuota is null or undefined
+ if (!tokenQuota || typeof tokenQuota !== "object") return null;
+
+ const {
+ projectHourly = {},
+ daily = {},
+ serverErrors = {},
+ thresholdedRequests = {},
+ } = tokenQuota;
+
+ // Add null checks and default values for all properties
+ const {
+ remaining: projectHourlyRemaining = 0,
+ consumed: projectHourlyConsumed = 0,
+ } = projectHourly;
+
+ const { remaining: dailyRemaining = 0, consumed: dailyConsumed = 0 } = daily;
+
+ const { remaining: errorsRemaining = 10, consumed: errorsConsumed = 0 } =
+ serverErrors;
+
+ const {
+ remaining: thresholdRemaining = 120,
+ consumed: thresholdConsumed = 0,
+ } = thresholdedRequests;
+
+ // Calculate percentages with safe math
+ const hourlyPercentage = ((projectHourlyRemaining / 14000) * 100).toFixed(1);
+ const dailyPercentage = ((dailyRemaining / 200000) * 100).toFixed(1);
+ const errorPercentage = ((errorsRemaining / 10) * 100).toFixed(1);
+ const thresholdPercentage = ((thresholdRemaining / 120) * 100).toFixed(1);
+
+ // Determine color based on remaining percentage
+ const getStatusColor = (percentage) => {
+ const numericPercentage = parseFloat(percentage);
+ if (isNaN(numericPercentage) || numericPercentage < 20)
+ return "text-red-500 dark:text-red-400";
+ if (numericPercentage < 40) return "text-yellow-500 dark:text-yellow-400";
+ return "text-green-500 dark:text-green-400";
+ };
+
+ return (
+
+
+
+
+ Quota:
+
+ {hourlyPercentage}%
+
+
+
+
+
+
+
+ Project Hourly
+
+
+ {projectHourlyRemaining.toLocaleString()} / 14,000 remaining
+
+
+
+
+ Daily
+
+
+ {dailyRemaining.toLocaleString()} / 200,000 remaining
+
+
+
+
+ Server Errors
+
+
+ {errorsConsumed} / 10 used this hour
+
+
+
+
+ Thresholded Requests
+
+
+ {thresholdConsumed} / 120 used this hour
+
+
+
+ );
+};
+const RealtimeAnalytics = () => {
+ const [basicData, setBasicData] = useState({
+ last30MinUsers: 0,
+ last5MinUsers: 0,
+ byMinute: [],
+ tokenQuota: null,
+ lastUpdated: null,
+ });
+
+ const [detailedData, setDetailedData] = useState({
+ currentPages: [],
+ sources: [],
+ recentEvents: [],
+ lastUpdated: null,
+ });
+ const [loading, setLoading] = useState(true);
+ const [isPaused, setIsPaused] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let basicInterval;
+ let detailedInterval;
+
+ const fetchBasicData = async () => {
+ if (isPaused) return;
+ try {
+ const response = await fetch("/api/analytics/realtime/basic", {
+ credentials: "include",
+ });
+ const result = await response.json();
+
+ const processed = await googleAnalyticsService.getRealTimeBasicData();
+ setBasicData(processed);
+ setError(null);
+ } catch (error) {
+ console.error("Error details:", {
+ message: error.message,
+ stack: error.stack,
+ response: error.response,
+ });
+ if (error.message === "QUOTA_EXCEEDED") {
+ setError("Quota exceeded. Analytics paused until manually resumed.");
+ setIsPaused(true);
+ } else {
+ setError("Failed to fetch analytics data");
+ }
+ }
+ };
+ const fetchDetailedData = async () => {
+ if (isPaused) return;
+ try {
+ const result = await googleAnalyticsService.getRealTimeDetailedData();
+ setDetailedData(result);
+ } catch (error) {
+ console.error("Failed to fetch detailed realtime data:", error);
+ if (error.message === "QUOTA_EXCEEDED") {
+ setError("Quota exceeded. Analytics paused until manually resumed.");
+ setIsPaused(true);
+ } else {
+ setError("Failed to fetch analytics data");
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Initial fetches
+ fetchBasicData();
+ fetchDetailedData();
+
+ // Set up intervals
+ basicInterval = setInterval(fetchBasicData, 30000); // 30 seconds
+ detailedInterval = setInterval(fetchDetailedData, 300000); // 5 minutes
+
+ return () => {
+ clearInterval(basicInterval);
+ clearInterval(detailedInterval);
+ };
+ }, []);
+
+ const togglePause = () => {
+ setIsPaused(!isPaused);
+ };
+
+ if (loading && !basicData && !detailedData) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ // Pie chart colors
+ const COLORS = [
+ "#8b5cf6",
+ "#10b981",
+ "#f59e0b",
+ "#3b82f6",
+ "#0088FE",
+ "#00C49F",
+ "#FFBB28",
+ ];
+
+ // Handle 'other' in data
+ const totalUsers = detailedData.sources.reduce(
+ (sum, source) => sum + source.users,
+ 0
+ );
+ const sourcesData = detailedData.sources.map((source) => {
+ const percent = (source.users / totalUsers) * 100;
+ return { ...source, percent };
+ });
+
+ return (
+
+
+
+
+ Realtime Analytics
+
+
+ {basicData?.data?.quotaInfo && (
+
+ )}
+
+ Last updated:{" "}
+ {basicData.lastUpdated
+ ? format(new Date(basicData.lastUpdated), "p")
+ : "N/A"}
+
+
{" "}
+
+ {[
+ {
+ label: "Last 30 Minutes",
+ sublabel: "Active Users",
+ value: basicData.last30MinUsers,
+ },
+ {
+ label: "Last 5 Minutes",
+ sublabel: "Active Users",
+ value: basicData.last5MinUsers,
+ },
+ ].map((card) => (
+
+ {summaryCard(card.label, card.sublabel, card.value)}
+
+ ))}
+
+
+
+
+ Active Users Per Minute
+
+
+
+
+
+
+ {
+ if (active && payload && payload.length) {
+ return (
+
+
{`${payload[0].value} active users`}
+
+ {payload[0].payload.timestamp}
+
+
+
+
+ Last updated:{" "}
+ {detailedData.lastUpdated
+ ? format(new Date(detailedData.lastUpdated), "p")
+ : "N/A"}
+
+
+
+
+
+ Page
+
+
+ Views
+
+
+
+
+ {detailedData.currentPages.map(({ page, views }, index) => (
+
+
+ {page}
+
+
+ {formatNumber(views)}
+
+
+ ))}
+
+
+
+ {/* Recent Events Tab */}
+
+
+ Last updated:{" "}
+ {detailedData.lastUpdated
+ ? format(new Date(detailedData.lastUpdated), "p")
+ : "N/A"}
+
+
+
+
+
+ Event
+
+
+ Count
+
+
+
+
+ {detailedData.recentEvents.map(({ event, count }, index) => (
+
+
+ {event}
+
+
+ {formatNumber(count)}
+
+
+ ))}
+
+
+
+ {/* Active Devices Tab */}
+
+ {" "}
+
+ Last updated:{" "}
+ {detailedData.lastUpdated
+ ? format(new Date(detailedData.lastUpdated), "p")
+ : "N/A"}
+
+
+
+
+
+ `${device}: ${percent.toFixed(0)}%`
+ }
+ >
+ {sourcesData.map((entry, index) => (
+ |
+ ))}
+
+ {
+ if (active && payload && payload.length) {
+ return (
+
+
+ {payload[0].payload.device}
+
+
{`${formatNumber(
+ payload[0].value
+ )} users`}
+
+
+ {sourcesData.map((source, index) => (
+
+
+ {source.device}
+
+
+
+ {formatNumber(source.users)}
+
+
+ {source.percent.toFixed(0)}% of users
+
+
+
+ ))}
+
+ );
+};
+
+export default RealtimeAnalytics;
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY UserBehaviorDashboard.jsx b/examples DO NOT USE OR EDIT/EXAMPLE ONLY UserBehaviorDashboard.jsx
new file mode 100644
index 0000000..d3ec56d
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY UserBehaviorDashboard.jsx
@@ -0,0 +1,297 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import {
+ PieChart,
+ Pie,
+ Cell,
+ ResponsiveContainer,
+ Tooltip,
+ Legend,
+} from "recharts";
+import { Loader2 } from "lucide-react";
+import { googleAnalyticsService } from "../../services/googleAnalyticsService";
+
+export const UserBehaviorDashboard = () => {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [timeRange, setTimeRange] = useState("30");
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ const result = await googleAnalyticsService.getUserBehavior(timeRange);
+ if (result) {
+ setData(result);
+ }
+ } catch (error) {
+ console.error("Failed to fetch behavior data:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchData();
+ }, [timeRange]);
+
+ if (loading) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ const COLORS = {
+ desktop: "#8b5cf6", // Purple
+ mobile: "#10b981", // Green
+ tablet: "#f59e0b", // Yellow
+ };
+
+ const deviceData = data?.data?.pageData?.deviceData || [];
+ const totalViews = deviceData.reduce((sum, item) => sum + item.pageViews, 0);
+ const totalSessions = deviceData.reduce(
+ (sum, item) => sum + item.sessions,
+ 0
+ );
+
+ const CustomTooltip = ({ active, payload }) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ const percentage = ((data.pageViews / totalViews) * 100).toFixed(1);
+ const sessionPercentage = ((data.sessions / totalSessions) * 100).toFixed(
+ 1
+ );
+ return (
+
+
+ {data.device}
+
+
+ {data.pageViews.toLocaleString()} views ({percentage}%)
+
+
+ {data.sessions.toLocaleString()} sessions ({sessionPercentage}%)
+
+
+ );
+ }
+ return null;
+ };
+
+ const formatDuration = (seconds) => {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = Math.floor(seconds % 60);
+ return `${minutes}m ${remainingSeconds}s`;
+ };
+
+ return (
+
+
+
+
+ User Behavior Analysis
+
+
+
+
+
+
+
+ Top Pages
+ Traffic Sources
+ Device Usage
+
+
+
+
+
+
+
+ Page Path
+
+
+ Views
+
+
+ Bounce Rate
+
+
+ Avg. Duration
+
+
+
+
+ {data?.data?.pageData?.pageData.map((page, index) => (
+
+
+ {page.path}
+
+
+ {page.pageViews.toLocaleString()}
+
+
+ {page.bounceRate.toFixed(1)}%
+
+
+ {formatDuration(page.avgSessionDuration)}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Source
+
+
+ Sessions
+
+
+ Conversions
+
+
+ Conv. Rate
+
+
+
+
+ {data?.data?.sourceData?.map((source, index) => (
+
+
+ {source.source}
+
+
+ {source.sessions.toLocaleString()}
+
+
+ {source.conversions.toLocaleString()}
+
+
+ {((source.conversions / source.sessions) * 100).toFixed(
+ 1
+ )}
+ %
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ `${name} ${(percent * 100).toFixed(1)}%`
+ }
+ >
+ {deviceData.map((entry, index) => (
+ |
+ ))}
+
+ } />
+
+
+
+ {deviceData.map((device) => (
+
+
+ {device.device}
+
+
+
+ {device.pageViews.toLocaleString()}
+
+
+ {((device.pageViews / totalViews) * 100).toFixed(1)}% of
+ views
+
+
+
+
+ {device.sessions.toLocaleString()}
+
+
+ {((device.sessions / totalSessions) * 100).toFixed(1)}% of
+ sessions
+
+
+
+ ))}
+
+ );
+};
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY analytics.service.js b/examples DO NOT USE OR EDIT/EXAMPLE ONLY analytics.service.js
new file mode 100644
index 0000000..41c370c
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY analytics.service.js
@@ -0,0 +1,338 @@
+// services/analytics.service.js
+const { BetaAnalyticsDataClient } = require('@google-analytics/data');
+const Analytics = require('../models/analytics.model');
+const { createClient } = require('redis');
+const logger = require('../utils/logger');
+
+class AnalyticsService {
+ constructor() {
+ // Initialize Redis client
+ this.redis = createClient({
+ url: process.env.REDIS_URL
+ });
+
+ this.redis.on('error', err => logger.error('Redis Client Error:', err));
+ this.redis.connect().catch(err => logger.error('Redis connection error:', err));
+
+ // Initialize GA4 client
+ this.analyticsClient = new BetaAnalyticsDataClient({
+ credentials: JSON.parse(process.env.GOOGLE_APPLICATION_CREDENTIALS_JSON)
+ });
+
+ this.propertyId = process.env.GA_PROPERTY_ID;
+ }
+
+ async getBasicMetrics(params = {}) {
+ const cacheKey = `analytics:basic_metrics:${JSON.stringify(params)}`;
+ logger.info(`Fetching basic metrics with params:`, params);
+
+ try {
+ // Try Redis first
+ const cachedData = await this.redis.get(cacheKey);
+ if (cachedData) {
+ logger.info('Analytics metrics found in Redis cache');
+ return JSON.parse(cachedData);
+ }
+
+ // Check MongoDB using new findValidCache method
+ const mongoData = await Analytics.findValidCache('basic_metrics', params);
+
+ if (mongoData) {
+ logger.info('Analytics metrics found in MongoDB');
+ const formattedData = mongoData.formatResponse();
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('basic_metrics')
+ });
+ return formattedData;
+ }
+
+ // Fetch fresh data from GA4
+ logger.info('Fetching fresh metrics data from GA4');
+ const [response] = await this.analyticsClient.runReport({
+ property: `properties/${this.propertyId}`,
+ dateRanges: [{
+ startDate: params.startDate || '7daysAgo',
+ endDate: 'today'
+ }],
+ dimensions: [{ name: 'date' }],
+ metrics: [
+ { name: 'activeUsers' },
+ { name: 'newUsers' },
+ { name: 'averageSessionDuration' },
+ { name: 'screenPageViews' },
+ { name: 'bounceRate' },
+ { name: 'conversions' }
+ ],
+ returnPropertyQuota: true
+ });
+
+ // Create new Analytics document with fresh data
+ const analyticsDoc = await Analytics.create({
+ type: 'basic_metrics',
+ params,
+ data: response,
+ quotaInfo: response.propertyQuota
+ });
+
+ const formattedData = analyticsDoc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('basic_metrics')
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error('Error fetching analytics metrics:', {
+ error: error.message,
+ stack: error.stack
+ });
+ throw error;
+ }
+ }
+
+ async getRealTimeBasicData() {
+ const cacheKey = 'analytics:realtime:basic';
+ logger.info('Fetching realtime basic data');
+
+ try {
+ // Try Redis first
+ const [cachedData, lastUpdated] = await Promise.all([
+ this.redis.get(cacheKey),
+ this.redis.get(`${cacheKey}:lastUpdated`)
+ ]);
+
+ if (cachedData) {
+ logger.info('Realtime basic data found in Redis cache:', cachedData);
+ return {
+ ...JSON.parse(cachedData),
+ lastUpdated: lastUpdated ? new Date(lastUpdated).toISOString() : new Date().toISOString()
+ };
+ }
+
+ // Fetch fresh data
+ logger.info(`Fetching fresh realtime data from GA4 server`);
+ const [userResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ metrics: [{ name: 'activeUsers' }],
+ returnPropertyQuota: true
+ });
+ logger.info('GA4 user response:', userResponse);
+
+ const [fiveMinResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ metrics: [{ name: 'activeUsers' }],
+ minuteRanges: [{ startMinutesAgo: 5, endMinutesAgo: 0 }]
+ });
+
+ const [timeSeriesResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ dimensions: [{ name: 'minutesAgo' }],
+ metrics: [{ name: 'activeUsers' }]
+ });
+
+ // Create new Analytics document
+ const analyticsDoc = await Analytics.create({
+ type: 'realtime_basic',
+ data: {
+ userResponse,
+ fiveMinResponse,
+ timeSeriesResponse,
+ quotaInfo: {
+ projectHourly: userResponse.propertyQuota.tokensPerProjectPerHour,
+ daily: userResponse.propertyQuota.tokensPerDay,
+ serverErrors: userResponse.propertyQuota.serverErrorsPerProjectPerHour,
+ thresholdedRequests: userResponse.propertyQuota.potentiallyThresholdedRequestsPerHour
+ }
+ },
+ quotaInfo: userResponse.propertyQuota
+ });
+
+ const formattedData = analyticsDoc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('realtime_basic')
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error('Detailed error in getRealTimeBasicData:', {
+ message: error.message,
+ stack: error.stack,
+ code: error.code,
+ response: error.response?.data
+ });
+ throw error;
+ }
+}
+
+ async getRealTimeDetailedData() {
+ const cacheKey = 'analytics:realtime:detailed';
+ logger.info('Fetching realtime detailed data');
+
+ try {
+ // Check Redis first
+ const cachedData = await this.redis.get(cacheKey);
+ if (cachedData) {
+ logger.info('Realtime detailed data found in Redis cache');
+ return JSON.parse(cachedData);
+ }
+
+ // Fetch fresh data from GA4
+ const [pageResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ dimensions: [{ name: 'unifiedScreenName' }],
+ metrics: [{ name: 'screenPageViews' }],
+ orderBy: [{ metric: { metricName: 'screenPageViews' }, desc: true }],
+ limit: 25
+ });
+
+ const [eventResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ dimensions: [{ name: 'eventName' }],
+ metrics: [{ name: 'eventCount' }],
+ orderBy: [{ metric: { metricName: 'eventCount' }, desc: true }],
+ limit: 25
+ });
+
+ const [deviceResponse] = await this.analyticsClient.runRealtimeReport({
+ property: `properties/${this.propertyId}`,
+ dimensions: [{ name: 'deviceCategory' }],
+ metrics: [{ name: 'activeUsers' }],
+ orderBy: [{ metric: { metricName: 'activeUsers' }, desc: true }],
+ limit: 10,
+ returnPropertyQuota: true
+ });
+
+ // Create new Analytics document
+ const analyticsDoc = await Analytics.create({
+ type: 'realtime_detailed',
+ data: {
+ pageResponse,
+ eventResponse,
+ sourceResponse: deviceResponse
+ },
+ quotaInfo: deviceResponse.propertyQuota
+ });
+
+ const formattedData = analyticsDoc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('realtime_detailed')
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error('Error fetching realtime detailed data:', {
+ error: error.message,
+ stack: error.stack
+ });
+ throw error;
+ }
+ }
+
+ async getUserBehavior(params = {}) {
+ const cacheKey = `analytics:user_behavior:${JSON.stringify(params)}`;
+ const timeRange = params.timeRange || '7';
+
+ logger.info('Fetching user behavior data', { params });
+
+ try {
+ // Try Redis first
+ const cachedData = await this.redis.get(cacheKey);
+ if (cachedData) {
+ logger.info('User behavior data found in Redis cache');
+ return JSON.parse(cachedData);
+ }
+
+ // Check MongoDB using new findValidCache method
+ const mongoData = await Analytics.findValidCache('user_behavior', params);
+
+ if (mongoData) {
+ logger.info('User behavior data found in MongoDB');
+ const formattedData = mongoData.formatResponse();
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('user_behavior')
+ });
+ return formattedData;
+ }
+
+ // Fetch fresh data from GA4
+ logger.info('Fetching fresh user behavior data from GA4');
+
+ const [pageResponse] = await this.analyticsClient.runReport({
+ property: `properties/${this.propertyId}`,
+ dateRanges: [{ startDate: `${timeRange}daysAgo`, endDate: 'today' }],
+ dimensions: [{ name: 'pagePath' }],
+ metrics: [
+ { name: 'screenPageViews' },
+ { name: 'averageSessionDuration' },
+ { name: 'bounceRate' },
+ { name: 'sessions' }
+ ],
+ orderBy: [{
+ metric: { metricName: 'screenPageViews' },
+ desc: true
+ }],
+ limit: 25
+ });
+
+ const [deviceResponse] = await this.analyticsClient.runReport({
+ property: `properties/${this.propertyId}`,
+ dateRanges: [{ startDate: `${timeRange}daysAgo`, endDate: 'today' }],
+ dimensions: [{ name: 'deviceCategory' }],
+ metrics: [
+ { name: 'screenPageViews' },
+ { name: 'sessions' }
+ ]
+ });
+
+ const [sourceResponse] = await this.analyticsClient.runReport({
+ property: `properties/${this.propertyId}`,
+ dateRanges: [{ startDate: `${timeRange}daysAgo`, endDate: 'today' }],
+ dimensions: [{ name: 'sessionSource' }],
+ metrics: [
+ { name: 'sessions' },
+ { name: 'conversions' }
+ ],
+ orderBy: [{
+ metric: { metricName: 'sessions' },
+ desc: true
+ }],
+ limit: 25,
+ returnPropertyQuota: true
+ });
+
+ // Create new Analytics document
+ const analyticsDoc = await Analytics.create({
+ type: 'user_behavior',
+ params,
+ data: {
+ pageResponse,
+ deviceResponse,
+ sourceResponse
+ },
+ quotaInfo: sourceResponse.propertyQuota
+ });
+
+ const formattedData = analyticsDoc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Analytics.getCacheDuration('user_behavior')
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error('Error fetching user behavior data:', {
+ error: error.message,
+ stack: error.stack
+ });
+ throw error;
+ }
+ }
+}
+
+module.exports = new AnalyticsService();
\ No newline at end of file
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY googleAnalyticsService.js b/examples DO NOT USE OR EDIT/EXAMPLE ONLY googleAnalyticsService.js
new file mode 100644
index 0000000..6cc4177
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY googleAnalyticsService.js
@@ -0,0 +1,292 @@
+// src/services/googleAnalyticsService.js
+class GoogleAnalyticsService {
+ constructor() {
+ this.baseUrl = "/api/analytics"; // This matches your NGINX config
+ }
+
+ async getBasicMetrics({ startDate = "7daysAgo" } = {}) {
+ try {
+ const response = await fetch(
+ `${this.baseUrl}/metrics?startDate=${startDate}`,
+ {
+ credentials: "include",
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch metrics");
+ }
+
+ const result = await response.json();
+
+ if (!result?.data) {
+ throw new Error("No data received");
+ }
+
+ return this.processMetricsData(result.data);
+ } catch (error) {
+ console.error("Failed to fetch basic metrics:", error);
+ throw error;
+ }
+ }
+
+ async getRealTimeBasicData() {
+ try {
+ const response = await fetch(`${this.baseUrl}/realtime/basic`, {
+ credentials: "include",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch basic realtime data");
+ }
+
+ const result = await response.json();
+
+ if (!result?.data) {
+ throw new Error("No data received");
+ }
+
+ const processed = this.processRealTimeBasicData(result.data);
+ return {
+ ...processed,
+ lastUpdated: result.lastUpdated || new Date().toISOString(),
+ };
+ } catch (error) {
+ console.error("Failed to fetch basic realtime data:", error);
+ throw error;
+ }
+ }
+
+ async getRealTimeDetailedData() {
+ try {
+ const response = await fetch(`${this.baseUrl}/realtime/detailed`, {
+ credentials: "include",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch detailed realtime data");
+ }
+
+ const result = await response.json();
+
+ if (!result?.data) {
+ throw new Error("No data received");
+ }
+
+ const processed = this.processRealTimeDetailedData(result.data);
+ return {
+ ...processed,
+ lastUpdated: result.lastUpdated || new Date().toISOString(),
+ };
+ } catch (error) {
+ console.error("Failed to fetch detailed realtime data:", error);
+ throw error;
+ }
+ }
+
+ async getUserBehavior(timeRange = "30") {
+ try {
+ const response = await fetch(
+ `${this.baseUrl}/user-behavior?timeRange=${timeRange}`,
+ {
+ credentials: "include",
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch user behavior");
+ }
+
+ const result = await response.json();
+ console.log("Raw user behavior response:", result);
+
+ if (!result?.success) {
+ throw new Error("Invalid response structure");
+ }
+
+ // Handle both data structures
+ const rawData = result.data?.data || result.data;
+
+ // Try to access the data differently based on the structure
+ const pageResponse = rawData?.pageResponse || rawData?.reports?.[0];
+ const deviceResponse = rawData?.deviceResponse || rawData?.reports?.[1];
+ const sourceResponse = rawData?.sourceResponse || rawData?.reports?.[2];
+
+ console.log("Extracted responses:", {
+ pageResponse,
+ deviceResponse,
+ sourceResponse,
+ });
+
+ const processed = {
+ success: true,
+ data: {
+ pageData: {
+ pageData: this.processPageData(pageResponse),
+ deviceData: this.processDeviceData(deviceResponse),
+ },
+ sourceData: this.processSourceData(sourceResponse),
+ },
+ };
+
+ console.log("Final processed data:", processed);
+ return processed;
+ } catch (error) {
+ console.error("Failed to fetch user behavior:", error);
+ throw error;
+ }
+ }
+
+ processMetricsData(data) {
+ if (!data?.rows) {
+ console.log("No rows found in data");
+ return [];
+ }
+
+ return data.rows.map((row) => ({
+ date: row.dimensionValues[0].value,
+ activeUsers: parseInt(row.metricValues[0].value),
+ newUsers: parseInt(row.metricValues[1].value),
+ avgSessionDuration: parseFloat(row.metricValues[2].value),
+ pageViews: parseInt(row.metricValues[3].value),
+ bounceRate: parseFloat(row.metricValues[4].value) * 100,
+ conversions: parseInt(row.metricValues[5].value),
+ }));
+ }
+
+ processRealTimeBasicData(data) {
+ const last30MinUsers = parseInt(
+ data.userResponse?.rows?.[0]?.metricValues?.[0]?.value || 0
+ );
+ const last5MinUsers = parseInt(
+ data.fiveMinResponse?.rows?.[0]?.metricValues?.[0]?.value || 0
+ );
+
+ const byMinute = Array.from({ length: 30 }, (_, i) => {
+ const matchingRow = data.timeSeriesResponse?.rows?.find(
+ (row) => parseInt(row.dimensionValues[0].value) === i
+ );
+ const users = matchingRow
+ ? parseInt(matchingRow.metricValues[0].value)
+ : 0;
+ const timestamp = new Date(Date.now() - i * 60000);
+ return {
+ minute: -i,
+ users,
+ timestamp: timestamp.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ }),
+ };
+ }).reverse();
+
+ const tokenQuota = data.quotaInfo
+ ? {
+ projectHourly: data.quotaInfo.projectHourly || {},
+ daily: data.quotaInfo.daily || {},
+ serverErrors: data.quotaInfo.serverErrors || {},
+ thresholdedRequests: data.quotaInfo.thresholdedRequests || {},
+ }
+ : null;
+
+ return {
+ last30MinUsers,
+ last5MinUsers,
+ byMinute,
+ tokenQuota,
+ };
+ }
+
+ processRealTimeDetailedData(data) {
+ return {
+ currentPages:
+ data.pageResponse?.rows?.map((row) => ({
+ page: row.dimensionValues[0].value,
+ views: parseInt(row.metricValues[0].value),
+ })) || [],
+
+ sources:
+ data.sourceResponse?.rows?.map((row) => ({
+ device: row.dimensionValues[0].value,
+ users: parseInt(row.metricValues[0].value),
+ })) || [],
+
+ recentEvents:
+ data.eventResponse?.rows
+ ?.filter(
+ (row) =>
+ !["session_start", "(other)"].includes(
+ row.dimensionValues[0].value
+ )
+ )
+ .map((row) => ({
+ event: row.dimensionValues[0].value,
+ count: parseInt(row.metricValues[0].value),
+ })) || [],
+ };
+ }
+
+ processPageData(data) {
+ console.log("Processing page data input:", data);
+ if (!data?.rows) {
+ console.log("No rows in page data");
+ return [];
+ }
+
+ const processed = data.rows.map((row) => ({
+ path: row.dimensionValues[0].value || "Unknown",
+ pageViews: parseInt(row.metricValues[0].value || 0),
+ avgSessionDuration: parseFloat(row.metricValues[1].value || 0),
+ bounceRate: parseFloat(row.metricValues[2].value || 0) * 100,
+ engagedSessions: parseInt(row.metricValues[3].value || 0),
+ }));
+ console.log("Processed page data:", processed);
+ return processed;
+ }
+ processDeviceData(data) {
+ console.log("Processing device data input:", data);
+ if (!data?.rows) {
+ console.log("No rows in device data");
+ return [];
+ }
+
+ const processed = data.rows
+ .filter((row) => {
+ const device = (row.dimensionValues[0].value || "").toLowerCase();
+ return ["desktop", "mobile", "tablet"].includes(device);
+ })
+ .map((row) => {
+ const device = row.dimensionValues[0].value || "Unknown";
+ return {
+ device:
+ device.charAt(0).toUpperCase() + device.slice(1).toLowerCase(),
+ pageViews: parseInt(row.metricValues[0].value || 0),
+ sessions: parseInt(row.metricValues[1].value || 0),
+ };
+ })
+ .sort((a, b) => b.pageViews - a.pageViews);
+
+ console.log("Processed device data:", processed);
+ return processed;
+ }
+ processSourceData(data) {
+ console.log("Processing source data input:", data);
+ if (!data?.rows) {
+ console.log("No rows in source data");
+ return [];
+ }
+
+ const processed = data.rows.map((row) => ({
+ source: row.dimensionValues[0].value || "Unknown",
+ sessions: parseInt(row.metricValues[0].value || 0),
+ conversions: parseInt(row.metricValues[1].value || 0),
+ }));
+ console.log("Processed source data:", processed);
+ return processed;
+ }
+}
+// Create a single instance
+const service = new GoogleAnalyticsService();
+
+// Export both the instance and the class
+export { service as googleAnalyticsService, GoogleAnalyticsService };
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgias.service.js b/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgias.service.js
new file mode 100644
index 0000000..5031ed3
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgias.service.js
@@ -0,0 +1,129 @@
+const axios = require('axios');
+const { createClient } = require('redis');
+const Gorgias = require('../models/gorgias.model');
+const logger = require('../utils/logger');
+
+class GorgiasService {
+ constructor() {
+ this.redis = createClient({
+ url: process.env.REDIS_URL
+ });
+
+ this.redis.on('error', err => logger.error('Redis Client Error:', err));
+ this.redis.connect().catch(err => logger.error('Redis connection error:', err));
+
+ this.apiClient = axios.create({
+ baseURL: 'https://acherryontop.gorgias.com/api',
+ auth: {
+ username: process.env.GORGIAS_API_USERNAME,
+ password: process.env.GORGIAS_API_PASSWORD
+ }
+ });
+ }
+
+ async getStatistics(name, filters = {}) {
+ const cacheKey = `gorgias:stats:${name}:${JSON.stringify(filters)}`;
+
+ logger.info(`Attempting to fetch statistics for ${name}`, {
+ filters,
+ cacheKey
+ });
+
+ try {
+ // Try Redis first
+ const cachedData = await this.redis.get(cacheKey);
+ if (cachedData) {
+ logger.info(`Statistics ${name} found in Redis cache`);
+ return JSON.parse(cachedData);
+ }
+
+ // Check MongoDB
+ const mongoData = await Gorgias.findValidCache(name, filters);
+ if (mongoData) {
+ logger.info(`Statistics ${name} found in MongoDB`);
+ const formattedData = mongoData.formatResponse();
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Gorgias.getCacheDuration(name)
+ });
+ return formattedData;
+ }
+
+ // Fetch from API
+ const response = await this.apiClient.post(`/stats/${name}`, { filters });
+
+ // Save to MongoDB
+ const doc = await Gorgias.create({
+ type: name,
+ params: filters,
+ data: response.data
+ });
+
+ const formattedData = doc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Gorgias.getCacheDuration(name)
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error(`Error in getStatistics for ${name}:`, {
+ error: error.message,
+ stack: error.stack,
+ filters,
+ response: error.response?.data
+ });
+ throw error;
+ }
+}
+
+ async getTickets() {
+ const cacheKey = 'gorgias:tickets';
+
+ try {
+ // Try Redis first
+ const cachedData = await this.redis.get(cacheKey);
+ if (cachedData) {
+ logger.info('Tickets found in Redis cache');
+ return JSON.parse(cachedData);
+ }
+
+ // Check MongoDB
+ const mongoData = await Gorgias.findValidCache('tickets');
+ if (mongoData) {
+ logger.info('Tickets found in MongoDB');
+ const formattedData = mongoData.formatResponse();
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Gorgias.getCacheDuration('tickets')
+ });
+ return formattedData;
+ }
+
+ // Fetch from API
+ const response = await this.apiClient.get('/tickets');
+
+ // Save to MongoDB
+ const doc = await Gorgias.create({
+ type: 'tickets',
+ data: response.data
+ });
+
+ const formattedData = doc.formatResponse();
+
+ // Save to Redis
+ await this.redis.set(cacheKey, JSON.stringify(formattedData), {
+ EX: Gorgias.getCacheDuration('tickets')
+ });
+
+ return formattedData;
+ } catch (error) {
+ logger.error('Error fetching tickets:', {
+ error: error.message,
+ stack: error.stack
+ });
+ throw error;
+ }
+ }
+}
+
+module.exports = new GorgiasService();
diff --git a/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgiasService.js b/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgiasService.js
new file mode 100644
index 0000000..8b347b3
--- /dev/null
+++ b/examples DO NOT USE OR EDIT/EXAMPLE ONLY gorgiasService.js
@@ -0,0 +1,39 @@
+// src/services/gorgiasService.js
+import axios from "axios";
+
+const API_BASE_URL = "/api/gorgias";
+
+// Helper function for consistent error handling
+const handleError = (error, context) => {
+ console.error(`Error ${context}:`, error.response?.data || error.message);
+ throw error;
+};
+
+// Export the service object directly
+const gorgiasService = {
+ async fetchTickets() {
+ try {
+ const response = await axios.get(`${API_BASE_URL}/tickets`);
+ return response.data.data || [];
+ } catch (error) {
+ handleError(error, "fetching tickets");
+ }
+ },
+
+ async fetchStatistics(name, filters = {}) {
+ if (!name) {
+ throw new Error("Statistic name is required");
+ }
+
+ try {
+ const response = await axios.post(`${API_BASE_URL}/stats/${name}`, {
+ filters,
+ });
+ return response.data;
+ } catch (error) {
+ handleError(error, `fetching statistics: ${name}`);
+ }
+ },
+};
+
+export default gorgiasService;
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..9d58d68
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,27 @@
+# Gorgias API endpoints
+location /api/gorgias/ {
+ proxy_pass http://localhost:3006/api/gorgias/;
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection 'upgrade';
+ proxy_set_header Host $host;
+ proxy_cache_bypass $http_upgrade;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+ # CORS headers
+ add_header 'Access-Control-Allow-Origin' '*';
+ add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
+ add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
+
+ # Handle OPTIONS method
+ if ($request_method = 'OPTIONS') {
+ add_header 'Access-Control-Allow-Origin' '*';
+ add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
+ add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
+ add_header 'Access-Control-Max-Age' 1728000;
+ add_header 'Content-Type' 'text/plain charset=UTF-8';
+ add_header 'Content-Length' 0;
+ return 204;
+ }
+}
\ No newline at end of file