routstr-core/ui/components/revenue-by-model-table.tsx

'use client';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ModelRevenueData } from '@/lib/api/services/admin';

interface RevenueByModelTableProps {
  models: ModelRevenueData[];
  totalRevenue: number;
}

export function RevenueByModelTable({
  models,
  totalRevenue,
}: RevenueByModelTableProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Revenue by Model</CardTitle>
        <p className="text-sm text-muted-foreground">
          Total Revenue: {totalRevenue.toLocaleString(undefined, { maximumFractionDigits: 2 })} sats
        </p>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Model</TableHead>
              <TableHead className="text-right">Requests</TableHead>
              <TableHead className="text-right">Successful</TableHead>
              <TableHead className="text-right">Failed</TableHead>
              <TableHead className="text-right">Revenue (sats)</TableHead>
              <TableHead className="text-right">Refunds (sats)</TableHead>
              <TableHead className="text-right">Net Revenue (sats)</TableHead>
              <TableHead className="text-right">Avg/Request</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {models.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} className="text-center text-muted-foreground">
                  No model data available
                </TableCell>
              </TableRow>
            ) : (
              models.map((model) => (
                <TableRow key={model.model}>
                  <TableCell className="font-medium">{model.model}</TableCell>
                  <TableCell className="text-right">{model.requests}</TableCell>
                  <TableCell className="text-right text-green-600">{model.successful}</TableCell>
                  <TableCell className="text-right text-red-600">{model.failed}</TableCell>
                  <TableCell className="text-right">
                    {model.revenue_sats.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                  </TableCell>
                  <TableCell className="text-right text-red-500">
                    {model.refunds_sats.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                  </TableCell>
                  <TableCell className="text-right font-semibold">
                    {model.net_revenue_sats.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                  </TableCell>
                  <TableCell className="text-right text-muted-foreground">
                    {model.avg_revenue_per_request.toLocaleString(undefined, { maximumFractionDigits: 3 })}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}