ComputeLineItem() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx lines 336–427

function ComputeLineItem({
  computeItems,
  tooltip,
  title,
  computeCredits,
}: {
  title: string
  tooltip: React.ReactElement
  computeItems: UpcomingInvoiceResponse['lines']
  computeCredits?: UpcomingInvoiceResponse['lines'][number] | null
}) {
  const computeProjects = computeItems
    .flatMap((item) =>
      item.breakdown!.map((project) => ({
        ...project,
        computeType: item.description,
        computeCosts: project.amount!,
      }))
    )
    // descending by cost
    .sort((a, b) => b.computeCosts - a.computeCosts)

  const computeItemsSortedByCost = computeItems
    // descending by cost
    .sort((a, b) => b.amount - a.amount)

  const computeCosts = Math.max(
    0,
    computeItems.reduce((prev, cur) => prev + cur.amount_before_discount, 0)
  )

  const discountedComputeCosts = Math.max(
    0,
    computeItems.reduce((prev, cur) => prev + (cur.amount ?? 0), 0) + (computeCredits?.amount ?? 0)
  )

  if (!computeItems.length) return null

  return (
    <>
      <TableRow>
        <TableCell className="!py-2 px-0 flex items-center gap-1">
          <span>{title}</span>
          <InfoTooltip className="max-w-sm">{tooltip}</InfoTooltip>
        </TableCell>
        <TableCell className="text-right py-2 px-0">
          <InvoiceLineItemAmount
            amount={discountedComputeCosts}
            amountBeforeDiscount={computeCosts}
          />
        </TableCell>
      </TableRow>
      {computeProjects.map((project) => (
        <TableRow key={project.project_ref} className="text-foreground-light text-xs">
          <TableCell className="!py-2 px-0 pl-6">
            {project.project_name} ({project.computeType} - {project.usage} Hours)
          </TableCell>

          <TableCell className="!py-2 px-0 text-right" translate="no">
            {formatCurrency(project.computeCosts)}
          </TableCell>
        </TableRow>
      ))}

      {/* Fallback to breakdown by instance size if project breakdown not available  */}
      {!computeProjects.length &&
        computeItemsSortedByCost.map((computeItem) => (
          <TableRow
            key={title + computeItem.usage_metric}
            className="text-foreground-light text-xs"
          >
            <TableCell className="!py-2 px-0 pl-6">
              {computeItem.description} - {computeItem.usage_original} Hours
            </TableCell>

            <TableCell className="!py-2 px-0 text-right" translate="no">
              {formatCurrency(computeItem.amount)}
            </TableCell>
          </TableRow>
        ))}

      {computeCredits && (
        <TableRow className="text-foreground-light text-xs">
          <TableCell className="!py-2 px-0 pl-6">Compute Credits</TableCell>
          <TableCell className="!py-2 px-0 text-right" translate="no">
            {formatCurrency(computeCredits.amount)}
          </TableCell>
        </TableRow>
      )}
    </>
  )
}