import { ReactNode, useMemo } from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@/layouts/AdminLayout'; import { useAuth } from '@/hooks/useAuth'; import { useQuery } from '@tanstack/react-query'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Badge } from '@/components/ui/badge'; import { GraduationCap, TrendingUp, Building2 } from 'lucide-react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; import { format, subMonths, startOfMonth, endOfMonth } from 'date-fns'; import { grossCents } from '@/lib/vat'; const fmtGBP = (cents: number) => `£${(cents / 100).toLocaleString('en-GB', { minimumFractionDigits: 2 })}`; // Provider Courses & Revenue — moved from the old /company-portal. Shows a // training/hybrid company's listed courses, trainers and booking revenue. Data // comes from the company-scoped /api/training-companies/{id}/provider-* endpoints. const ProviderHubPage = () => { const { companyId } = useAuth(); const { data: company } = useQuery({ queryKey: ['provider-hub-company-type', companyId], enabled: !!companyId, queryFn: async () => { const res = await fetch(`/api/companies/${companyId}/type`); if (!res.ok) return null; return res.json() as Promise<{ company_type: string } | null>; }, }); const isProvider = company?.company_type === 'training_company' || company?.company_type === 'hybrid'; const { data: providerCourses } = useQuery({ queryKey: ['provider-hub-courses', companyId], enabled: !!companyId && isProvider, queryFn: async () => { const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-courses`); if (!res.ok) return []; const data = await res.json(); return ((data?.data ?? data) as any[]) || []; }, }); const { data: providerOrders } = useQuery({ queryKey: ['provider-hub-orders', companyId], enabled: !!companyId && isProvider, queryFn: async () => { const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-orders`); if (!res.ok) return []; const data = await res.json(); return ((data?.data ?? data) as any[]) || []; }, }); const { data: providerTrainers } = useQuery({ queryKey: ['provider-hub-trainers', companyId], enabled: !!companyId && isProvider, queryFn: async () => { const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-trainers`); if (!res.ok) return []; const data = await res.json(); return ((data?.data ?? data) as any[]) || []; }, }); const providerConfirmed = providerOrders?.filter((o: any) => ['paid', 'confirmed'].includes(o.status)) || []; const providerRevenue = providerConfirmed.reduce((s: number, o: any) => s + grossCents(o.price_cents), 0); const providerChartData = useMemo(() => { if (!providerOrders) return []; const months: { month: string; revenue: number }[] = []; for (let i = 5; i >= 0; i--) { const d = subMonths(new Date(), i); const start = startOfMonth(d); const end = endOfMonth(d); const monthOrders = providerOrders.filter((o: any) => { const created = new Date(o.created_at); return created >= start && created <= end && ['paid', 'confirmed'].includes(o.status); }); months.push({ month: format(d, 'MMM yy'), revenue: monthOrders.reduce((s: number, o: any) => s + grossCents(o.price_cents), 0) / 100, }); } return months; }, [providerOrders]); return ( <>

Provider Courses & Revenue

Your listed courses, trainers, and the bookings they've generated.

{!companyId ? ( Your account isn't linked to a company yet. ) : !company ? ( Loading… ) : !isProvider ? (

For training providers

This section is only available to training/hybrid companies that list their own courses.

) : ( <>

Courses Listed

{providerCourses?.length || 0}

Bookings Received

{providerConfirmed.length}

Total Revenue

{fmtGBP(providerRevenue)}
Revenue (Last 6 Months)
`£${v}`} /> [`£${value.toFixed(2)}`, 'Revenue']} />
Your Listed Courses Title Category Duration Price Status {providerCourses?.map((c: any) => ( {c.title} {c.category} {c.days} day{c.days > 1 ? 's' : ''} {fmtGBP(c.price_cents)} {c.is_active ? 'Active' : 'Inactive'} ))} {!providerCourses?.length && ( No courses assigned yet. )}
{providerTrainers && providerTrainers.length > 0 && ( Your Trainers NameEmailPhone {providerTrainers.map((t: any) => ( {t.first_name} {t.last_name} {t.email || '—'} {t.phone || '—'} ))}
)} )}
); }; ProviderHubPage.layout = (page: ReactNode) => {page}; export default ProviderHubPage;