Created Banquet Management System using Bolt and Supabase but not able to fetch data in Property Manager view

[shashankrai1983]

Hi can some one help me in fetching the data in view of Property Manager Dashboard.
here is the Dashboard.tsx:
import React, { useState, useEffect } from 'react';
import { DashboardStats } from './DashboardStats';
import { QuickActions } from './QuickActions';
import { RecentActivity } from './RecentActivity';
import { TaskWidget } from './TaskWidget';
import { LeadForm } from '../leads/LeadForm';
import { BookingForm } from '../bookings/BookingForm';
import { ArrowRight, Users, Building2, ChevronRight } from 'lucide-react';
import { useAdmin } from '../../contexts/AdminContext';
import { useTask } from '../../contexts/TaskContext';
import { useNavigate } from '../../hooks/useNavigate';
import { supabase } from '../../lib/supabase';
import { PropertyManagerView } from './PropertyManagerView';

interface DashboardStats {
totalLeads: number;
activeBookings: number;
}

export function Dashboard() {
const [showLeadForm, setShowLeadForm] = useState(false);
const [showBookingForm, setShowBookingForm] = useState(false);
const [stats, setStats] = useState({
totalLeads: 0,
activeBookings: 0,
});
const [managers, setManagers] = useState<any[]>([]);
const { navigate } = useNavigate();
const [loading, setLoading] = useState(false);
const { fetchTasks } = useTask();
const { isAdmin, userProfile } = useAdmin();

useEffect(() => {
fetchTasks();
}, [fetchTasks]);

useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);

    // Get total leads count
    const { count: totalLeads, error: leadsError } = await supabase
      .from('leads')
      .select('*', { count: 'exact', head: true });

    if (leadsError) throw leadsError;

    // Get bookings count
    const { count: totalBookings, error: bookingsError } = await supabase
      .from('bookings')
      .select('*', { count: 'exact', head: true });

    if (bookingsError) throw bookingsError;

    setStats({
      totalLeads: totalLeads || 0,
      activeBookings: totalBookings || 0
    });

    // Fetch property managers
    const { data: managersData, error: managersError } = await supabase
      .from('user_profiles')
      .select(`
        id,
        email,
        full_name,
        status,
        stats:property_manager_stats!manager_id(
          total_properties,
          active_leads,
          total_leads
        ),
        property_assignments:property_managers_properties(
          property:properties!property_id(
            id,
            name
          )
        )
      `)
      .eq('role', 'property_manager')
      .not('email', 'eq', 'workwithsr@gmail.com')
      .order('full_name');

    if (managersError) {
      throw managersError;
    }

    // Transform manager data
    const transformedManagers = (managersData || []).map(manager => ({
      ...manager,
      assigned_properties: manager.property_assignments?.map(pa => pa.property?.name).filter(Boolean) || [],
      stats: manager.stats?.[0] || {
        total_properties: 0,
        active_leads: 0,
        total_leads: 0
      }
    }));

    setManagers(transformedManagers);
  } catch (err) {
    console.error('Error fetching managers:', err);
    setStats({
      totalLeads: 0,
      activeBookings: 0
    });
  }
}

fetchData();

}, [isAdmin, userProfile?.id]);

// Render property manager view if user is a property manager
if (userProfile?.role === 'property_manager') {
return ;
}

return (

Dashboard

Logged in as: {userProfile?.email}
|
Role: {userProfile?.role || 'User'}

  {/* Stats Cards */}
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    {/* Total Leads Card */}
    <div 
      onClick={() => navigate('leads')}
      className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-md transition-shadow"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600">Total Leads</p>
          <p className="text-2xl font-semibold text-gray-900 mt-2">
            {loading ? '...' : stats.totalLeads}
          </p>
        </div>
        <div className="text-indigo-600 flex items-center gap-1">
          View Leads <ArrowRight className="w-4 h-4" />
        </div>
      </div>
    </div>

    {/* Active Bookings Card */}
    <div 
      onClick={() => navigate('bookings')}
      className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-md transition-shadow"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600">Bookings</p>
          <p className="text-2xl font-semibold text-gray-900 mt-2">
            {loading ? '...' : stats.activeBookings}
          </p>
        </div>
        <div className="text-indigo-600 flex items-center gap-1">
          View Bookings <ArrowRight className="w-4 h-4" />
        </div>
      </div>
    </div>
  </div>
  
  {/* Quick Actions and Task Widget */}
  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <QuickActions
      onNewLead={() => setShowLeadForm(true)}
      onNewBooking={() => setShowBookingForm(true)}
      onViewProperties={() => navigate('properties')}
    />
    <TaskWidget />
    
    {/* Property Managers Widget */}
    <div className="bg-white rounded-lg shadow">
      <div className="p-6 border-b border-gray-200">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-medium text-gray-900">Property Managers</h3>
          <button
            onClick={() => navigate('property-managers')}
            className="text-sm text-indigo-600 hover:text-indigo-900 flex items-center gap-1"
          >
            View All
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>
      <div className="divide-y divide-gray-200">
        {managers.slice(0, 5).map((manager) => (
          <div key={manager.id} className="p-4 hover:bg-gray-50">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
                  <Users className="h-5 w-5 text-indigo-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-900">{manager.full_name}</p>
                  <div className="flex items-center gap-4 mt-1">
                    <span className="text-xs text-gray-500 flex items-center gap-1">
                      <Users className="w-3 h-3" />
                      {manager.stats.total_leads} total leads
                    </span>
                    <span className="text-xs text-gray-500 flex items-center gap-1">
                      <Building2 className="w-3 h-3" />
                      {manager.assigned_properties.length} properties
                    </span>
                  </div>
                </div>
              </div>
              <button
                onClick={() => navigate('leads', { filter: { manager: manager.id } })}
                className="text-sm text-indigo-600 hover:text-indigo-900"
              >
                View Leads
              </button>
            </div>
            {manager.assigned_properties.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-2">
                {manager.assigned_properties.map((property: string) => (
                  <span
                    key={property}
                    className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800"
                  >
                    {property}
                  </span>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  </div>
  
  <RecentActivity />

  {showLeadForm && <LeadForm onClose={() => setShowLeadForm(false)} />}

  {showBookingForm && <BookingForm onClose={() => setShowBookingForm(false)} onSubmit={async () => setShowBookingForm(false)} />}
</div>

);
}