Add minirealtimeanalytics component

dashboard/src/App.jsx

@@ -28,6 +28,7 @@ import RealtimeAnalytics from "@/components/dashboard/RealtimeAnalytics";
 import UserBehaviorDashboard from "@/components/dashboard/UserBehaviorDashboard";
 import TypeformDashboard from "@/components/dashboard/TypeformDashboard";
 import MiniStatCards from "@/components/dashboard/MiniStatCards";
+import MiniRealtimeAnalytics from "@/components/dashboard/MiniRealtimeAnalytics";
 
 // Public layout
 const PublicLayout = () => (
@@ -64,6 +65,7 @@ const PinProtectedLayout = ({ children }) => {
 const SmallLayout = () => {
   const DATETIME_SCALE = 2;
   const STATS_SCALE = 1.65;
+  const ANALYTICS_SCALE = 1.5;
   
   return (
     <div className="min-h-screen w-screen">
@@ -99,7 +101,17 @@ const SmallLayout = () => {
           </div>
         </div>
 
-        {/* You can easily add more grid items here */}
+        <div className="col-span-12 relative">
+          <div 
+            className="origin-top-left"
+            style={{
+              transform: `scale(${ANALYTICS_SCALE})`,
+              width: `${100/ANALYTICS_SCALE}%`,
+            }}
+          >
+            <MiniRealtimeAnalytics />
+          </div>
+        </div>
       </div>
     </div>
   );

dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { AlertTriangle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { format } from "date-fns";
+import {
+  summaryCard,
+  SkeletonSummaryCard,
+  SkeletonBarChart,
+  processBasicData,
+} from "./RealtimeAnalytics";
+
+const MiniRealtimeAnalytics = () => {
+  const [basicData, setBasicData] = useState({
+    last30MinUsers: 0,
+    last5MinUsers: 0,
+    byMinute: [],
+    tokenQuota: null,
+    lastUpdated: null,
+  });
+
+  const [loading, setLoading] = useState(true);
+  const [isPaused, setIsPaused] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let basicInterval;
+
+    const fetchBasicData = async () => {
+      if (isPaused) return;
+      try {
+        const response = await fetch("/api/analytics/realtime/basic", {
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch basic realtime data");
+        }
+
+        const result = await response.json();
+        const processed = processBasicData(result.data);
+        setBasicData(processed);
+        setError(null);
+        setLoading(false);
+      } 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");
+        }
+      }
+    };
+
+    // Initial fetch
+    fetchBasicData();
+
+    // Set up interval
+    basicInterval = setInterval(fetchBasicData, 30000); // 30 seconds
+
+    return () => {
+      clearInterval(basicInterval);
+    };
+  }, [isPaused]);
+
+  if (loading && !basicData) {
+    return (
+      <Card className="w-full bg-gradient-to-br from-purple-900 to-purple-800 backdrop-blur-sm h-full">
+        <CardHeader className="p-4 pb-2">
+          <div className="flex justify-between items-center">
+            <CardTitle className="text-lg font-bold text-purple-100">
+              Real-Time Analytics
+            </CardTitle>
+            <Skeleton className="h-4 w-32 bg-purple-700" />
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-4 pt-0">
+          <div className="grid grid-cols-2 gap-2 mt-1 mb-3">
+            <SkeletonSummaryCard />
+            <SkeletonSummaryCard />
+          </div>
+          <SkeletonBarChart />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="w-full bg-gradient-to-br from-purple-900 to-purple-800 backdrop-blur-sm h-full">
+      <CardHeader className="p-4 pb-2">
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-lg font-bold text-purple-100">
+            Real-Time Analytics
+          </CardTitle>
+          <div className="text-xs text-purple-200">
+            {format(new Date(basicData.lastUpdated), "h:mm a")}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-4 pt-0">
+        {error && (
+          <Alert variant="destructive" className="mb-4">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="grid grid-cols-2 gap-2 mt-1 mb-3">
+          {summaryCard(
+            "Last 30 minutes",
+            "Active users",
+            basicData.last30MinUsers,
+            { 
+              colorClass: "text-purple-200",
+              titleClass: "text-purple-100 font-bold text-md",
+              descriptionClass: "text-purple-200 text-md font-semibold",
+              background: "bg-gradient-to-br from-purple-800 to-purple-700"
+            }
+          )}
+          {summaryCard(
+            "Last 5 minutes",
+            "Active users",
+            basicData.last5MinUsers,
+            { 
+              colorClass: "text-purple-200",
+              titleClass: "text-purple-100 font-bold text-md",
+              descriptionClass: "text-purple-200 text-md font-semibold",
+              background: "bg-gradient-to-br from-purple-800 to-purple-700"
+            }
+          )}
+        </div>
+
+        <div className="h-[235px] bg-gradient-to-br from-purple-800 to-purple-700 rounded-lg p-2">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={basicData.byMinute}
+              margin={{ top: 5, right: 5, left: -35, bottom: -5 }}
+            >
+              <XAxis
+                dataKey="minute"
+                tickFormatter={(value) => value + "m"}
+                className="text-xs"
+                tick={{ fill: "#E9D5FF" }}
+              />
+              <YAxis 
+                className="text-xs" 
+                tick={{ fill: "#E9D5FF" }}
+              />
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    const timestamp = new Date(
+                      Date.now() + payload[0].payload.minute * 60000
+                    );
+                    return (
+                      <Card className="p-2 shadow-lg bg-purple-800 border-none">
+                        <CardContent className="p-0 space-y-1">
+                          <p className="font-medium text-sm text-purple-100 border-b border-purple-700 pb-1 mb-1">
+                            {format(timestamp, "h:mm a")}
+                          </p>
+                          <div className="flex justify-between items-center text-sm">
+                            <span className="text-purple-200">
+                              Active Users:
+                            </span>
+                            <span className="font-medium ml-4 text-purple-100">
+                              {payload[0].value.toLocaleString()}
+                            </span>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Bar dataKey="users" fill="#A855F7" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MiniRealtimeAnalytics; 

dashboard/src/components/dashboard/RealtimeAnalytics.jsx

@@ -636,4 +636,14 @@ export const RealtimeAnalytics = () => {
   );
 };
 
+export {
+  summaryCard,
+  SkeletonSummaryCard,
+  SkeletonBarChart,
+  SkeletonTable,
+  processBasicData,
+  METRIC_COLORS,
+  QuotaInfo
+};
+
 export default RealtimeAnalytics;