Merge pull request #47 from VectorInstitute/add_update_ts

Add last updated timestamp

Author: amrit110

services/analytics/app/analytics-content.tsx

@@ -22,7 +22,7 @@ async function handleLogout() {
 }
 
 export default function AnalyticsContent({ user }: AnalyticsContentProps) {
-  const { data, loading, error, refetch } = useAnalyticsData();
+  const { data, loading, error, lastUpdated, refetch } = useAnalyticsData();
 
   if (loading && !data) {
     return <LoadingState />;
@@ -36,7 +36,7 @@ export default function AnalyticsContent({ user }: AnalyticsContentProps) {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
-      <PageHeader user={user} onLogout={handleLogout} />
+      <PageHeader user={user} onLogout={handleLogout} lastUpdated={lastUpdated} />
 
       <div className="max-w-7xl mx-auto px-4 md:px-8 pb-8">
         <div className="mb-8 animate-slide-up">

services/analytics/app/hooks/use-analytics-data.ts

@@ -5,6 +5,7 @@ interface UseAnalyticsDataResult {
   data: AnalyticsSnapshot | null;
   loading: boolean;
   error: string | null;
+  lastUpdated: Date | undefined;
   refetch: () => void;
 }
 
@@ -14,6 +15,7 @@ export function useAnalyticsData(): UseAnalyticsDataResult {
   const [data, setData] = useState<AnalyticsSnapshot | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | undefined>(undefined);
 
   const fetchData = useCallback(async () => {
     try {
@@ -23,6 +25,8 @@ export function useAnalyticsData(): UseAnalyticsDataResult {
       }
       const json = await response.json();
       setData(json);
+      // Use the timestamp from the snapshot data (when it was collected)
+      setLastUpdated(json.timestamp ? new Date(json.timestamp) : undefined);
       setError(null);
     } catch (err) {
       console.error('Failed to fetch analytics data:', err);
@@ -43,6 +47,7 @@ export function useAnalyticsData(): UseAnalyticsDataResult {
     data,
     loading,
     error,
+    lastUpdated,
     refetch: fetchData,
   };
 }

services/analytics/app/template/[templateName]/template-teams-content.tsx

@@ -19,6 +19,7 @@ export default function TemplateTeamsContent({ user, templateName }: TemplateTea
   const [data, setData] = useState<AnalyticsSnapshot | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [sortColumn, setSortColumn] = useState<SortColumn>('workspaces_for_template');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
 
@@ -39,6 +40,8 @@ export default function TemplateTeamsContent({ user, templateName }: TemplateTea
       }
       const json = await response.json();
       setData(json);
+      // Use the timestamp from the snapshot data (when it was collected)
+      setLastUpdated(json.timestamp ? new Date(json.timestamp) : null);
       setError(null);
     } catch (err) {
       console.error('Failed to fetch analytics data:', err);
@@ -188,6 +191,11 @@ export default function TemplateTeamsContent({ user, templateName }: TemplateTea
                 <p className="text-slate-700 dark:text-slate-300 text-lg">
                   Team breakdown for this template
                 </p>
+                {lastUpdated && (
+                  <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">
+                    Last updated: {lastUpdated.toLocaleTimeString()}
+                  </p>
+                )}
               </div>
               <div className="flex items-center gap-4">
                 {user && (