Real-Time Dashboards

Overview

Build dashboards that update in real-time using WebSockets and PropTechUSA's streaming API.

Architecture

[PropTechUSA API] → [WebSocket Server] → [Dashboard Client]
        ↓
   [Webhooks]

Using Supabase Realtime

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

// Subscribe to lead changes
supabase
  .channel('leads')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'leads' },
    (payload) => {
      console.log('Lead changed:', payload);
      // Update UI
    }
  )
  .subscribe();

Dashboard Component

'use client';

import { useEffect, useState } from 'react';
import { proptech } from '@/lib/proptech';

export function LiveDashboard() {
  const [metrics, setMetrics] = useState({
    leadsToday: 0,
    conversionRate: 0,
    revenue: 0,
  });

  useEffect(() => {
    // Initial fetch
    fetchMetrics();

    // Subscribe to updates
    const unsubscribe = proptech.realtime.subscribe('metrics', (data) => {
      setMetrics(data);
    });

    return () => unsubscribe();
  }, []);

  return (
    <div className="grid grid-cols-3 gap-6">
      <MetricCard title="Leads Today" value={metrics.leadsToday} />
      <MetricCard title="Conversion Rate" value={${metrics.conversionRate}%} />
      <MetricCard title="Revenue" value={$${metrics.revenue.toLocaleString()}} />
    </div>
  );
}