diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx index 752c5a2..3020ce3 100644 --- a/src/components/dashboard/Dashboard.tsx +++ b/src/components/dashboard/Dashboard.tsx @@ -10,7 +10,7 @@ import { import FootprintChart from "@/components/charts/FootprintChart"; import ComparisonSection from "@/components/dashboard/ComparisonSection"; import ShareButton from "@/components/ui/ShareButton"; -import { getUserFootprints } from "@/lib/firebase/firestore"; +import { getUserFootprints, subscribeToUserActivitiesCount } from "@/lib/firebase/firestore"; import { exportToCSV, ActivityHistoryEntry } from "@/utils/exportCSV"; import { ArrowDownTrayIcon } from "@heroicons/react/24/outline"; @@ -29,11 +29,12 @@ interface StatCardProps { change?: number; icon: string; color: string; + tooltip?: string; } -function StatCard({ title, value, change, icon, color }: StatCardProps) { +function StatCard({ title, value, change, icon, color, tooltip }: StatCardProps) { return ( -
+

{title}

@@ -100,6 +101,7 @@ export default function Dashboard({ null ); const [loading, setLoading] = useState(true); + const [activitiesCount, setActivitiesCount] = useState(0); const [exportStatus, setExportStatus] = useState<{ show: boolean; success: boolean; @@ -212,6 +214,12 @@ export default function Dashboard({ } }, [propDashboardData]); + // Real-time subscription to activities count + useEffect(() => { + if (!user) return; + const unsubscribe = subscribeToUserActivitiesCount(user.id, setActivitiesCount); + return () => unsubscribe(); + }, [user, activityHistory.length]); // Handle CSV export const handleExportCSV = () => { const result = exportToCSV(activityHistory as ActivityHistoryEntry[]); @@ -259,6 +267,11 @@ export default function Dashboard({ const equivalentIcons = ["🚗", "📱", "☕", "💡"]; + // Format join date for tooltip + const joinDateLabel = user?.createdAt + ? new Date(user.createdAt).toLocaleDateString() + : ''; + return (
@@ -280,7 +293,7 @@ export default function Dashboard({
{/* Stats Cards */} -
+
+
{/* Comparison Section */} diff --git a/src/lib/firebase/firestore.ts b/src/lib/firebase/firestore.ts index f9c6cb5..58b8551 100644 --- a/src/lib/firebase/firestore.ts +++ b/src/lib/firebase/firestore.ts @@ -12,6 +12,7 @@ import { limit, getDocs, Timestamp, + onSnapshot, } from 'firebase/firestore'; import { db } from './config'; import { Activity, CarbonFootprint, User, WeeklyGoal, Badge } from '@/types'; @@ -159,4 +160,30 @@ export const awardBadge = async (userId: string, badge: Omit void +) => { + const footprintsRef = collection(db, 'carbon_footprints'); + const q = query(footprintsRef, where('userId', '==', userId)); + const unsubscribe = onSnapshot(q, (snapshot) => { + onCount(snapshot.size); + }); + return unsubscribe; +}; + +// Real-time subscription to count of user's individual activities +export const subscribeToUserActivitiesCount = ( + userId: string, + onCount: (count: number) => void +) => { + const activitiesRef = collection(db, 'activities'); + const q = query(activitiesRef, where('userId', '==', userId)); + const unsubscribe = onSnapshot(q, (snapshot) => { + onCount(snapshot.size); + }); + return unsubscribe; }; \ No newline at end of file