Dashboard Integration Guide - Backend API Connection

🔗 Connecting Dashboard to Backend Services

This guide explains how to replace mock data with real backend API calls.

📌 Current State

✅ Dashboard UI fully created
✅ Mock data implemented
⏳ Ready for service integration
⏳ Services created (auth, complaint, etc.)

🔄 Integration Steps

Step 1: Update Complaint List Page

File: src/pages/ComplaintsListPage.tsx

Replace mock data with service:

// OLD - Using mock data
import { MOCK_COMPLAINTS } from '@/services/mock.data';

// NEW - Using service
import { useComplaintsService } from '@/services/hooks';
import { useEffect, useState } from 'react';

export function ComplaintsListPage() {
  const [complaints, setComplaints] = useState([]);
  const [loading, setLoading] = useState(true);
  const complaintService = useComplaintsService();

  useEffect(() => {
    async function fetchComplaints() {
      try {
        const data = await complaintService.getAll();
        setComplaints(data);
      } catch (error) {
        console.error('Error fetching complaints:', error);
      } finally {
        setLoading(false);
      }
    }
    
    fetchComplaints();
  }, []);

  if (loading) return <LoadingSpinner />;
  
  // Use complaints instead of MOCK_COMPLAINTS
}

Step 2: Update Dashboard Page

File: src/pages/DashboardPage.tsx

// Import services
import { useComplaintsService } from '@/services/hooks';
import { useNotificationsService } from '@/services/hooks'; // Create if needed

export function DashboardPage() {
  const complaintService = useComplaintsService();
  const [complaints, setComplaints] = useState([]);

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

  async function loadComplaints() {
    try {
      const data = await complaintService.getAll();
      setComplaints(data);
    } catch (error) {
      console.error('Failed to load complaints:', error);
    }
  }

  // Replace MOCK_COMPLAINTS with complaints state
}

Step 3: Update New Complaint Form

File: src/pages/NewComplaintPage.tsx

import { useComplaintsService } from '@/services/hooks';

export function NewComplaintPage() {
  const complaintService = useComplaintsService();
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await complaintService.create(formData);
      setSuccess(true);
      setTimeout(() => navigate('/dashboard/complaints'), 2000);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  }
}

Step 4: Update Complaint Detail Page

File: src/pages/ComplaintDetailPage.tsx

import { useComplaintsService } from '@/services/hooks';

export function ComplaintDetailPage() {
  const { id } = useParams<{ id: string }>();
  const [complaint, setComplaint] = useState(null);
  const complaintService = useComplaintsService();

  useEffect(() => {
    async function fetchComplaint() {
      try {
        const data = await complaintService.getById(parseInt(id!));
        setComplaint(data);
      } catch (error) {
        console.error('Error fetching complaint:', error);
      }
    }
    
    fetchComplaint();
  }, [id]);

  if (!complaint) return <LoadingSpinner />;

  return (
    // Use complaint data from API instead of mock
  );
}

📋 Service Methods to Implement

ComplaintService

interface IComplaintService {
  // Get all complaints for current user
  getAll(): Promise<Complaint[]>;
  
  // Get single complaint by ID
  getById(id: number): Promise<Complaint>;
  
  // Create new complaint
  create(data: CreateComplaintRequest): Promise<Complaint>;
  
  // Update complaint
  update(id: number, data: UpdateComplaintRequest): Promise<Complaint>;
  
  // Delete complaint
  delete(id: number): Promise<void>;
  
  // Get complaints with filters
  getFiltered(filters: ComplaintFilters): Promise<Complaint[]>;
}

RTIService

interface IRTIService {
  getAll(): Promise<RTIRequest[]>;
  getById(id: number): Promise<RTIRequest>;
  create(data: CreateRTIRequest): Promise<RTIRequest>;
  update(id: number, data: UpdateRTIRequest): Promise<RTIRequest>;
}

LandRecordService

interface ILandRecordService {
  getAll(): Promise<LandRecord[]>;
  getById(id: number): Promise<LandRecord>;
  verify(id: number): Promise<LandRecord>;
}

🎯 Data Flow

Current (Mock)

Component → useState → MOCK_DATA → Render

After Integration (Real API)

Component → useService → Axios → Backend API → useState → Render

📊 Example: Full Integration Flow

1. User logs in

LoginForm → authService.login() → API → Token stored → Redirect to /dashboard

2. Dashboard loads

DashboardPage → useComplaintsService.getAll() → API (with auth header) → MOCK_COMPLAINTS replaced → Render

3. User files complaint

NewComplaintForm → complaintService.create(data) → API → Complaint created → Redirect to list

4. User views details

ComplaintDetailPage → complaintService.getById(id) → API → Render with real data

🔐 Authentication Integration

Services automatically include auth headers via Axios interceptors:

// axios.service.ts already configured with:
// 1. Authorization header injection
// 2. Token refresh on 401
// 3. Error handling

// All services use this axios instance
const response = await axiosInstance.get('/api/complaints');
// Authorization: Bearer <token> added automatically

📝 Backend Endpoint Mapping

Replace mock paths with your actual backend endpoints:

// src/services/config.ts - Update API endpoints

export const API_ENDPOINTS = {
  // Complaints
  COMPLAINTS: '/api/complaints',
  COMPLAINT_DETAIL: '/api/complaints/:id',
  COMPLAINT_CREATE: '/api/complaints',
  COMPLAINT_UPDATE: '/api/complaints/:id',
  COMPLAINT_DELETE: '/api/complaints/:id',

  // RTI
  RTI_REQUESTS: '/api/rti',
  RTI_REQUEST_DETAIL: '/api/rti/:id',
  
  // Land Records
  LAND_RECORDS: '/api/land-records',
  LAND_RECORD_DETAIL: '/api/land-records/:id',
  
  // Contracts
  CONTRACTS: '/api/contracts',
  
  // Budget
  BUDGET: '/api/budget',
};

🔍 Filtering & Searching

Mock Implementation

// Current: Done in-component
const filtered = complaints.filter(c => c.status === filterStatus);

Backend Implementation

// Better: Let backend filter
async function getFiltered(filters: ComplaintFilters) {
  const response = await axiosInstance.get('/api/complaints', { params: filters });
  return response.data;
}

// Usage
const complaints = await complaintService.getFiltered({
  status: 'Open',
  priority: 'High',
  search: 'pothole'
});

🚀 Implementation Checklist

Phase 1: Services Ready

Phase 2: Dashboard Integration

Replace MOCK_USER with real user from auth
Replace MOCK_COMPLAINTS with API call
Replace MOCK_NOTIFICATIONS with API call
Add loading states
Add error handling

Phase 3: Pages Integration

ComplaintsListPage: Fetch from API
ComplaintDetailPage: Fetch from API
NewComplaintPage: Create via API
Add form validation
Add success/error messages

Phase 4: Additional Services

RTI Service integration
Land Records Service integration
Contract Service integration
Notifications Service integration

💾 Mock to Real Transition Strategy

Keep Mock Data For:

Development without backend
Placeholder images
Testing UI components
Demo mode

Replace with API For:

User data in header
Complaints list
Statistics/counts
Notifications
User profile

🧪 Testing with Real API

1. Start Backend

cd backend/
python main.py
# Backend runs on localhost:8000

2. Update API URL if needed

// .env or src/services/config.ts
VITE_API_BASE_URL=http://localhost:8000

3. Test login first

http://localhost:3000/login
→ Use real credentials from backend

4. Test dashboard

http://localhost:3000/dashboard
→ Should load real data

🐛 Debugging API Integration

Enable API Logging

// src/services/axios.service.ts
axiosInstance.interceptors.request.use(config => {
  console.log('API Request:', config.url, config.params);
  return config;
});

Check Network Tab

Open browser DevTools
Go to Network tab
Look for API requests
Check response status and data

Common Issues

401 Unauthorized

Token expired or invalid
Check localStorage for 'user_data'
Try logging in again

404 Not Found

Wrong endpoint URL
Check API_ENDPOINTS config
Verify backend routes exist

CORS Error

Backend needs CORS headers
Check FastAPI CORS configuration
Verify API URL in frontend config

📚 Service Layer Architecture

Dashboard Components
        ↓
useComplaintsService() hook
        ↓
ComplaintService class
        ↓
Axios Instance (with interceptors)
        ↓
API Endpoints
        ↓
Backend (FastAPI)
        ↓
Database (PostgreSQL)

✅ Future Enhancements

Once API integration complete:

Add pagination for large datasets
Implement infinite scroll
Add real-time updates via WebSocket
Add data caching/optimization
Add offline capability
Add sync when online

📞 Common Questions

Q: Can I test without backend running? A: Yes, keep using mock data in mock.data.ts

Q: How do I switch between mock and real? A: Use environment variables or feature flags

Q: What if API is slow? A: Add loading states and error boundaries

Q: How to handle API errors? A: Use try-catch, show error messages to user

Ready to Connect to Backend!

Follow the steps above to replace mock data with real API calls.

For questions, check the service documentation or backend API docs.

FilesExpand file tree

DASHBOARD_BACKEND_INTEGRATION.md

Latest commit

History