-
+
About Us
diff --git a/src/app/client-layout.tsx b/src/app/client-layout.tsx
index 365cd5e..026afe6 100644
--- a/src/app/client-layout.tsx
+++ b/src/app/client-layout.tsx
@@ -8,6 +8,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/lib/react-query/queryClient";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
+import { trackPageView } from "@/lib/firebase/analytics";
export default function ClientLayout({
children,
@@ -22,13 +23,16 @@ export default function ClientLayout({
const isAdminRoute = pathname?.startsWith("/dashboard");
useEffect(() => {
- if(isAdminRoute) {
- document.body.style.backgroundColor = "#fff"
- }
- else {
- document.body.style.backgroundColor = "#080d14"
- }
- },[isAdminRoute])
+ if (isAdminRoute) {
+ document.body.style.backgroundColor = "#fff";
+ } else {
+ document.body.style.backgroundColor = "#080d14";
+ }
+ }, [isAdminRoute]);
+
+ useEffect(() => {
+ trackPageView(pathname);
+ }, [pathname]);
return (
diff --git a/src/app/dashboard/analytics/page.tsx b/src/app/dashboard/analytics/page.tsx
new file mode 100644
index 0000000..e51d49b
--- /dev/null
+++ b/src/app/dashboard/analytics/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+ collection,
+ query,
+ orderBy,
+ getDocs,
+ where,
+ Timestamp,
+ deleteDoc,
+} from "firebase/firestore";
+import { db } from "@/lib/firebase/firebase";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+
+interface PageViewData {
+ date: string;
+ views: number;
+}
+
+// AnalyticsDashboard.tsx
+interface WeeklyViewData {
+ weekLabel: string;
+ views: number;
+}
+
+export default function AnalyticsDashboard() {
+ const [weeklyData, setWeeklyData] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchWeeklyViews = async () => {
+ const yearAgo = new Date();
+ yearAgo.setFullYear(yearAgo.getFullYear() - 1);
+
+ const q = query(
+ collection(db, "weeklyViews"),
+ where("timestamp", ">=", yearAgo),
+ orderBy("timestamp", "asc"),
+ );
+
+ const snapshot = await getDocs(q);
+ const viewsByWeek: { [key: string]: number } = {};
+
+ // Get unique week-year combinations
+ snapshot.forEach((doc) => {
+ const data = doc.data();
+ const key = `${data.year}-${data.weekNumber}`;
+ viewsByWeek[key] = (viewsByWeek[key] || 0) + 1;
+ });
+
+ // Sort by year and week
+ const formattedData = Object.entries(viewsByWeek)
+ .map(([key, views]) => {
+ const [year, week] = key.split("-");
+ return {
+ weekLabel: `W${week}-${year}`,
+ views,
+ sortKey: `${year}${week.padStart(2, "0")}`,
+ };
+ })
+ .sort((a, b) => a.sortKey.localeCompare(b.sortKey))
+ .map(({ weekLabel, views }) => ({ weekLabel, views }));
+
+ setWeeklyData(formattedData);
+ setLoading(false);
+ };
+
+ fetchWeeklyViews();
+ }, []);
+
+ if (loading)
+ return (
+ Loading...
+ );
+
+ const totalViews = weeklyData.reduce((sum, week) => sum + week.views, 0);
+ const avgViews = Math.round(totalViews / weeklyData.length);
+
+ return (
+
+
+
+
Total Views (in past year)
+
{totalViews}
+
+
+
+
Average Weekly Views
+
{avgViews}
+
+
+
+
+
Weekly Page Views
+
+
+
+
+
+
+
+
+
+
+
+
+
+