import { useState, useMemo, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
import {
quickbooksApi,
type QuickbooksInvoice,
type QuickbooksTransaction,
type QuickbooksCustomer,
type QuickbooksExpense,
type InvoiceStatus,
type QuickbooksAnalytics,
} from '../../api/quickbooks';
import {
DollarSign,
FileText,
TrendingUp,
TrendingDown,
AlertTriangle,
AlertCircle,
CheckCircle2,
Users,
RefreshCw,
Search,
Filter,
X,
Calendar,
ArrowUpRight,
ArrowDownRight,
CreditCard,
ShoppingCart,
Package,
BarChart3,
} from 'lucide-react';
// ─── Helpers ──────────────────────────────────────────────────────────────
function formatCurrency(value: number | null): string {
if (value == null) return '—';
if (Math.abs(value) >= 1_000_000) return `${value > 0 ? '+' : ''}$${(value / 1_000_000).toFixed(1)}M`;
if (Math.abs(value) >= 1_000) return `${value > 0 ? '+' : ''}$${(value / 1_000).toFixed(1)}K`;
return `$${value.toFixed(2)}`;
}
function statusColor(status: InvoiceStatus): string {
const map: Record<InvoiceStatus, string> = {
draft: 'bg-slate-100 text-slate-700',
sent: 'bg-blue-100 text-blue-700',
paid: 'bg-emerald-100 text-emerald-700',
partial: 'bg-amber-100 text-amber-700',
void: 'bg-red-100 text-red-700',
uncollectible: 'bg-gray-100 text-gray-500',
};
return map[status] || 'bg-gray-100 text-gray-600';
}
function statusLabel(status: InvoiceStatus): string {
return status.charAt(0).toUpperCase() + status.slice(1);
}
function timeAgo(dateStr: string | null | undefined): string {
if (!dateStr) return '—';
const now = Date.now();
const then = new Date(dateStr).getTime();
const diff = Math.abs(now - then);
const days = Math.floor(diff / 86400000);
if (days === 0) return 'today';
if (days === 1) return 'yesterday';
if (days < 30) return `${days}d ago`;
return new Date(dateStr).toLocaleDateString();
}
// ─── Tab Types ────────────────────────────────────────────────────────────
type TabKey = 'overview' | 'invoices' | 'transactions' | 'customers' | 'expenses';
// ─── Overview Tab ─────────────────────────────────────────────────────────
function OverviewTab({ analytics }: { analytics: QuickbooksAnalytics }) {
const stats = [
{ label: 'Outstanding', value: formatCurrency(analytics.total_outstanding), icon: AlertTriangle, color: 'text-amber-600 bg-amber-50' },
{ label: 'Total Paid', value: formatCurrency(analytics.total_paid), icon: CheckCircle2, color: 'text-emerald-600 bg-emerald-50' },
{ label: 'Revenue (30d)', value: formatCurrency(analytics.revenue_last_30d), icon: TrendingUp, color: 'text-blue-600 bg-blue-50' },
{ label: 'Profit Margin', value: `${analytics.profit_margin.toFixed(1)}%`, icon: BarChart3, color: 'text-violet-600 bg-violet-50' },
{ label: 'Avg Invoice', value: formatCurrency(analytics.avg_invoice_amount), icon: FileText, color: 'text-slate-600 bg-slate-50' },
{ label: 'Collection Days', value: `${analytics.avg_collection_days.toFixed(0)}d`, icon: Calendar, color: 'text-cyan-600 bg-cyan-50' },
];
return (
<div className="space-y-6">
{/* Stats Grid */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
{stats.map((stat) => (
<div key={stat.label} className="rounded-xl border border-surface-200 bg-white p-4">
<div className={`inline-flex rounded-lg p-2 mb-2 ${stat.color}`}>
<stat.icon className="h-4 w-4" />
</div>
<p className="text-xs text-surface-500">{stat.label}</p>
<p className="text-lg font-bold text-surface-900 mt-0.5">{stat.value}</p>
</div>
))}
</div>
{/* Revenue & Expenses */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Revenue</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 30 days</span>
<span className="font-semibold text-emerald-600">{formatCurrency(analytics.revenue_last_30d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 90 days</span>
<span className="font-semibold text-emerald-600">{formatCurrency(analytics.revenue_last_90d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Year to date</span>
<span className="font-semibold text-emerald-600">{formatCurrency(analytics.revenue_ytd)}</span>
</div>
</div>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Expenses</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 30 days</span>
<span className="font-semibold text-red-600">{formatCurrency(analytics.expenses_last_30d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 90 days</span>
<span className="font-semibold text-red-600">{formatCurrency(analytics.expenses_last_90d)}</span>
</div>
</div>
</div>
</div>
{/* Invoices by Status */}
{analytics.invoices_by_status && analytics.invoices_by_status.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Invoices by Status</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
{analytics.invoices_by_status.map((item) => (
<div key={item.status} className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500 capitalize">{item.status}</p>
<p className="text-lg font-bold text-surface-900">{item.count}</p>
<p className="text-xs text-surface-400">{formatCurrency(item.total)}</p>
</div>
))}
</div>
</div>
)}
{/* Top Customers */}
{analytics.top_customers && analytics.top_customers.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Top Customers</h3>
<div className="space-y-2">
{analytics.top_customers.map((customer) => (
<div key={customer.name} className="flex justify-between items-center py-2 border-b border-surface-100 last:border-0">
<div>
<p className="text-sm font-medium text-surface-900">{customer.name}</p>
<p className="text-xs text-surface-400">{customer.invoice_count} invoices</p>
</div>
<span className="font-semibold text-emerald-600">{formatCurrency(customer.total_paid)}</span>
</div>
))}
</div>
</div>
)}
</div>
);
}
// ─── Invoices Tab ─────────────────────────────────────────────────────────
function InvoicesTab({ companyId }: { companyId: string }) {
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [selectedInvoice, setSelectedInvoice] = useState<QuickbooksInvoice | null>(null);
const { data, isLoading, refetch } = useQuery({
queryKey: ['quickbooks-invoices', companyId, search, statusFilter],
queryFn: () =>
quickbooksApi.getInvoices(companyId, {
search: search || undefined,
status: statusFilter || undefined,
}),
staleTime: 60_000,
});
const invoices = data?.data?.items || [];
return (
<div>
{/* Filters */}
<div className="flex flex-wrap items-center gap-3 mb-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="text"
placeholder="Search invoices..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-lg border border-surface-300 bg-white pl-10 pr-3 py-2 text-sm outline-none focus:border-brand-500"
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">All Statuses</option>
<option value="draft">Draft</option>
<option value="sent">Sent</option>
<option value="paid">Paid</option>
<option value="partial">Partial</option>
<option value="void">Void</option>
</select>
</div>
{/* Table */}
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="overflow-x-auto rounded-xl border border-surface-200">
<table className="w-full text-sm">
<thead>
<tr className="bg-surface-50">
<th className="text-left px-4 py-3 font-medium text-surface-500">Invoice</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Customer</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Amount</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Status</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Due</th>
</tr>
</thead>
<tbody>
{invoices.length === 0 ? (
<tr><td colSpan={5} className="text-center py-8 text-surface-400">No invoices found</td></tr>
) : (
invoices.map((inv) => (
<tr
key={inv.id}
onClick={() => setSelectedInvoice(inv)}
className="border-t border-surface-100 hover:bg-surface-50 cursor-pointer"
>
<td className="px-4 py-3 font-medium text-surface-900">{inv.invoice_number}</td>
<td className="px-4 py-3 text-surface-600">{inv.customer_name}</td>
<td className="px-4 py-3 text-right font-medium">{formatCurrency(inv.total_amount)}</td>
<td className="px-4 py-3">
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(inv.status)}`}>
{statusLabel(inv.status)}
</span>
</td>
<td className="px-4 py-3 text-surface-500">{timeAgo(inv.due_date)}</td>
</tr>
))
)}
</tbody>
</table>
</div>
)}
{/* Detail Panel */}
{selectedInvoice && (
<div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
<div className="absolute inset-0 bg-black/30" onClick={() => setSelectedInvoice(null)} />
<div className="relative z-10 flex h-full w-full max-w-lg flex-col overflow-y-auto bg-white shadow-xl border-l border-surface-200">
<div className="flex items-center justify-between border-b border-surface-200 px-6 py-4">
<div>
<h2 className="text-lg font-semibold text-surface-900">{selectedInvoice.invoice_number}</h2>
<p className="text-sm text-surface-500">{selectedInvoice.customer_name}</p>
</div>
<button
onClick={() => setSelectedInvoice(null)}
className="rounded-lg p-2 text-surface-400 hover:bg-surface-100 min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="grid grid-cols-2 gap-3 border-b border-surface-200 px-6 py-4">
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Total</p>
<p className="text-lg font-bold text-surface-900">{formatCurrency(selectedInvoice.total_amount)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Status</p>
<span className={`inline-block mt-1 rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(selectedInvoice.status)}`}>
{statusLabel(selectedInvoice.status)}
</span>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Subtotal</p>
<p className="text-sm font-medium">{formatCurrency(selectedInvoice.subtotal)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Tax</p>
<p className="text-sm font-medium">{formatCurrency(selectedInvoice.tax_amount)}</p>
</div>
</div>
<div className="border-b border-surface-200 px-6 py-4">
<p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Dates</p>
<div className="space-y-1 text-sm text-surface-600">
<div className="flex justify-between"><span>Issued</span><span>{timeAgo(selectedInvoice.issue_date)}</span></div>
<div className="flex justify-between"><span>Due</span><span>{timeAgo(selectedInvoice.due_date)}</span></div>
</div>
</div>
{selectedInvoice.line_items && selectedInvoice.line_items.length > 0 && (
<div className="border-b border-surface-200 px-6 py-4">
<p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Line Items</p>
<div className="space-y-2">
{selectedInvoice.line_items.map((item, i) => (
<div key={i} className="flex justify-between text-sm">
<span className="text-surface-600">{item.description}</span>
<span className="font-medium">{formatCurrency(item.amount)}</span>
</div>
))}
</div>
</div>
)}
{selectedInvoice.notes && (
<div className="px-6 py-4">
<p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Notes</p>
<p className="text-sm text-surface-600">{selectedInvoice.notes}</p>
</div>
)}
</div>
</div>
)}
</div>
);
}
// ─── Transactions Tab ─────────────────────────────────────────────────────
function TransactionsTab({ companyId }: { companyId: string }) {
const [search, setSearch] = useState('');
const [typeFilter, setTypeFilter] = useState('');
const { data, isLoading } = useQuery({
queryKey: ['quickbooks-transactions', companyId, search, typeFilter],
queryFn: () =>
quickbooksApi.getTransactions(companyId, {
type: typeFilter || undefined,
}),
staleTime: 60_000,
});
const transactions = data?.data?.items || [];
return (
<div>
<div className="flex flex-wrap items-center gap-3 mb-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="text"
placeholder="Search transactions..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-lg border border-surface-300 bg-white pl-10 pr-3 py-2 text-sm outline-none focus:border-brand-500"
/>
</div>
<select
value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value)}
className="rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">All Types</option>
<option value="sale">Sale</option>
<option value="payment">Payment</option>
<option value="refund">Refund</option>
<option value="credit">Credit</option>
<option value="debit">Debit</option>
</select>
</div>
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="space-y-2">
{transactions.length === 0 ? (
<div className="text-center py-8 text-surface-400">No transactions found</div>
) : (
transactions.map((tx) => (
<div key={tx.id} className="flex items-center justify-between rounded-lg border border-surface-200 bg-white p-4">
<div className="flex items-center gap-3">
{tx.amount >= 0 ? (
<div className="rounded-full bg-emerald-100 p-2">
<ArrowUpRight className="h-4 w-4 text-emerald-600" />
</div>
) : (
<div className="rounded-full bg-red-100 p-2">
<ArrowDownRight className="h-4 w-4 text-red-600" />
</div>
)}
<div>
<p className="text-sm font-medium text-surface-900">{tx.description}</p>
<p className="text-xs text-surface-400">
{timeAgo(tx.transaction_date)} · {tx.transaction_type}
{tx.account_name ? ` · ${tx.account_name}` : ''}
</p>
</div>
</div>
<span className={`font-semibold ${tx.amount >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
{tx.amount >= 0 ? '+' : ''}{formatCurrency(tx.amount)}
</span>
</div>
))
)}
</div>
)}
</div>
);
}
// ─── Customers Tab ────────────────────────────────────────────────────────
function CustomersTab({ companyId }: { companyId: string }) {
const [search, setSearch] = useState('');
const { data, isLoading } = useQuery({
queryKey: ['quickbooks-customers', companyId, search],
queryFn: () =>
quickbooksApi.getCustomers(companyId, {
search: search || undefined,
}),
staleTime: 60_000,
});
const customers = data?.data?.items || [];
return (
<div>
<div className="flex flex-wrap items-center gap-3 mb-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="text"
placeholder="Search customers..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-lg border border-surface-300 bg-white pl-10 pr-3 py-2 text-sm outline-none focus:border-brand-500"
/>
</div>
</div>
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{customers.length === 0 ? (
<div className="col-span-full text-center py-8 text-surface-400">No customers found</div>
) : (
customers.map((customer) => (
<div key={customer.id} className="rounded-xl border border-surface-200 bg-white p-5">
<div className="flex items-start justify-between mb-3">
<div>
<h3 className="text-sm font-semibold text-surface-900">{customer.name}</h3>
{customer.email && <p className="text-xs text-surface-400 mt-0.5">{customer.email}</p>}
</div>
<div className="rounded-full bg-blue-100 p-2">
<Users className="h-4 w-4 text-blue-600" />
</div>
</div>
<div className="grid grid-cols-2 gap-2 text-xs">
<div className="rounded-lg bg-surface-50 p-2">
<p className="text-surface-400">Balance</p>
<p className="font-medium">{formatCurrency(customer.balance)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-2">
<p className="text-surface-400">Invoices</p>
<p className="font-medium">{customer.total_invoices}</p>
</div>
<div className="rounded-lg bg-surface-50 p-2 col-span-2">
<p className="text-surface-400">Total Paid</p>
<p className="font-medium text-emerald-600">{formatCurrency(customer.total_paid)}</p>
</div>
</div>
</div>
))
)}
</div>
)}
</div>
);
}
// ─── Expenses Tab ─────────────────────────────────────────────────────────
function ExpensesTab({ companyId }: { companyId: string }) {
const [search, setSearch] = useState('');
const [categoryFilter, setCategoryFilter] = useState('');
const { data, isLoading } = useQuery({
queryKey: ['quickbooks-expenses', companyId, search, categoryFilter],
queryFn: () =>
quickbooksApi.getExpenses(companyId, {
category: categoryFilter || undefined,
}),
staleTime: 60_000,
});
const expenses = data?.data?.items || [];
return (
<div>
<div className="flex flex-wrap items-center gap-3 mb-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="text"
placeholder="Search expenses..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-lg border border-surface-300 bg-white pl-10 pr-3 py-2 text-sm outline-none focus:border-brand-500"
/>
</div>
<select
value={categoryFilter}
onChange={(e) => setCategoryFilter(e.target.value)}
className="rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">All Categories</option>
<option value="supplies">Supplies</option>
<option value="labor">Labor</option>
<option value="equipment">Equipment</option>
<option value="marketing">Marketing</option>
<option value="overhead">Overhead</option>
</select>
</div>
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="overflow-x-auto rounded-xl border border-surface-200">
<table className="w-full text-sm">
<thead>
<tr className="bg-surface-50">
<th className="text-left px-4 py-3 font-medium text-surface-500">Vendor</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Description</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Category</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Amount</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Date</th>
</tr>
</thead>
<tbody>
{expenses.length === 0 ? (
<tr><td colSpan={5} className="text-center py-8 text-surface-400">No expenses found</td></tr>
) : (
expenses.map((exp) => (
<tr key={exp.id} className="border-t border-surface-100">
<td className="px-4 py-3 font-medium text-surface-900">{exp.vendor_name}</td>
<td className="px-4 py-3 text-surface-600 max-w-[200px] truncate">{exp.description}</td>
<td className="px-4 py-3">
<span className="inline-block rounded-full bg-surface-100 px-2 py-0.5 text-xs font-medium text-surface-600 capitalize">
{exp.category}
</span>
</td>
<td className="px-4 py-3 text-right font-medium text-red-600">{formatCurrency(exp.amount)}</td>
<td className="px-4 py-3 text-surface-500">{timeAgo(exp.expense_date)}</td>
</tr>
))
)}
</tbody>
</table>
</div>
)}
</div>
);
}
// ─── Main Page ────────────────────────────────────────────────────────────
export function QuickBooksPage() {
const { user } = useAuth();
const companyId = user?.tenantId as string;
const [activeTab, setActiveTab] = useState<TabKey>('overview');
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
const queryClient = useQueryClient();
useEffect(() => {
if (toast) {
const timer = setTimeout(() => setToast(null), 4000);
return () => clearTimeout(timer);
}
}, [toast]);
const { data: analyticsData, isLoading: analyticsLoading } = useQuery({
queryKey: ['quickbooks-analytics', companyId],
queryFn: () => quickbooksApi.getAnalytics(companyId),
staleTime: 120_000,
});
const syncMutation = useMutation({
mutationFn: () => quickbooksApi.sync(companyId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['quickbooks'] });
setToast({ message: 'QuickBooks synced successfully', type: 'success' });
},
onError: (err: unknown) => {
const message = (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'QuickBooks sync failed';
setToast({ message, type: 'error' });
},
});
const tabs: { key: TabKey; label: string; icon: typeof Search }[] = [
{ key: 'overview', label: 'Overview', icon: BarChart3 },
{ key: 'invoices', label: 'Invoices', icon: FileText },
{ key: 'transactions', label: 'Transactions', icon: CreditCard },
{ key: 'customers', label: 'Customers', icon: Users },
{ key: 'expenses', label: 'Expenses', icon: ShoppingCart },
];
return (
<AppLayout>
{/* Toast */}
{toast && (
<div className="fixed top-4 right-4 z-[70] flex items-center gap-2 rounded-lg bg-surface-900 px-4 py-3 text-sm text-white shadow-lg">
{toast.type === 'success' ? (
<CheckCircle2 className="h-4 w-4 text-green-400" />
) : (
<AlertCircle className="h-4 w-4 text-red-400" />
)}
{toast.message}
</div>
)}
<div className="space-y-6">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-surface-900">QuickBooks</h1>
<p className="text-sm text-surface-500 mt-1">Financial data synced from QuickBooks Online</p>
</div>
<button
onClick={() => syncMutation.mutate()}
disabled={syncMutation.isPending}
className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px] self-start"
>
<RefreshCw className={`h-4 w-4 ${syncMutation.isPending ? 'animate-spin' : ''}`} />
{syncMutation.isPending ? 'Syncing...' : 'Sync Now'}
</button>
</div>
{/* Tabs */}
<div className="flex gap-1 overflow-x-auto border-b border-surface-200">
{tabs.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px] ${
activeTab === tab.key
? 'border-brand-600 text-brand-600'
: 'border-transparent text-surface-500 hover:text-surface-700'
}`}
>
<tab.icon className="h-4 w-4" />
{tab.label}
</button>
))}
</div>
{/* Content */}
{activeTab === 'overview' ? (
analyticsLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : analyticsData?.data ? (
<OverviewTab analytics={analyticsData.data} />
) : (
<div className="rounded-xl border border-surface-200 bg-white p-12 text-center">
<DollarSign className="h-12 w-12 text-surface-300 mx-auto mb-4" />
<h3 className="text-lg font-medium text-surface-700 mb-2">No QuickBooks data</h3>
<p className="text-sm text-surface-500 mb-4">Connect your QuickBooks account to see your financial data here.</p>
<button
onClick={() => syncMutation.mutate()}
disabled={syncMutation.isPending}
className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
>
<RefreshCw className="h-4 w-4" />
Sync Now
</button>
</div>
)
) : activeTab === 'invoices' ? (
<InvoicesTab companyId={companyId} />
) : activeTab === 'transactions' ? (
<TransactionsTab companyId={companyId} />
) : activeTab === 'customers' ? (
<CustomersTab companyId={companyId} />
) : (
<ExpensesTab companyId={companyId} />
)}
</div>
</AppLayout>
);
}