export class ApiClient {
  // ...
  static async getLeads() {
    try {
      const res = await fetch(`${API_BASE}/leads/`, { headers: this.getHeaders() });
      if (res.ok) return await res.json();
    } catch {}
    return [];
  }
}

'use client';

import { useState, useEffect } from 'react';
import { AppShell } from '@/components/layouts/AppShell';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { ApiClient } from '@/lib/api';

export default function LeadsPage() {
  const [leads, setLeads] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    ApiClient.getLeads().then((data) => {
      setLeads(data.results || data);
      setLoading(false);
    });
  }, []);

  return (
    <AppShell>
      <div className="p-6 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold tracking-tight">Sales Leads</h1>
          <Button>Create Lead</Button>
        </div>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Phone</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {leads.map((lead) => (
              <TableRow key={lead.id}>
                <TableCell>{lead.name}</TableCell>
                <TableCell>{lead.phone}</TableCell>
                <TableCell>{lead.status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </AppShell>
  );
}