Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx (TypeScript)

Code before:
              <TableFooter>
                <TableRow>
                  <TableCell className="font-medium py-2 px-0 flex items-center">
                    <span className="mr-2">Current Costs</span>
                    <InfoTooltip>
                      Costs accumulated from the beginning of the billing cycle up to now.
                    </InfoTooltip>
                  </TableCell>
                  <TableCell className="text-right font-medium py-2 px-0" translate="no">
                    {formatCurrency(upcomingInvoice?.amount_total) ?? '-'}
                  </TableCell>
                </TableRow>

                {upcomingInvoice?.amount_projected && (
                  <TableRow>
                    <TableCell className="font-medium py-2 px-0 flex items-center">
                      <span className="mr-2">Projected Costs</span>
                      <InfoTooltip className="max-w-xs">
                        Projected costs at the end of the billing cycle. Includes predictable costs
                        for Compute Hours, IPv4, Custom Domain and Point-In-Time-Recovery, but no
                        costs for metrics like MAU, storage or function invocations. Final amounts
                        may vary depending on your usage.
                      </InfoTooltip>
                    </TableCell>
                    <TableCell className="text-right font-medium py-2 px-0" translate="no">
                      {formatCurrency(upcomingInvoice?.amount_projected) ?? '-'}
                    </TableCell>
                  </TableRow>
                )}
              </TableFooter>
            </Table>
          </div>
        </div>
      )}
    </>
  )
}

function InvoiceLineItemAmount({
  amountBeforeDiscount,
  amount,
}: {
  amountBeforeDiscount?: number
  amount: number
}) {
  if (amountBeforeDiscount && amount < amountBeforeDiscount) {
    return (
      <div>
        <span className="text-foreground-light line-through mr-2" translate="no">
          {formatCurrency(amountBeforeDiscount)}
        </span>

Review comment (suggestion):
```suggestion
                      {formatCurrency(upcomingInvoice.amount_projected) ?? '-'}
```

Code after:
              <TableFooter>
                <TableRow>
                  <TableCell className="font-medium py-2 px-0 flex items-center">
                    <span className="mr-2">Current Costs</span>
                    <InfoTooltip>
                      Costs accumulated from the beginning of the billing cycle up to now.
                    </InfoTooltip>
                  </TableCell>
                  <TableCell className="text-right font-medium py-2 px-0" translate="no">
                    {formatCurrency(upcomingInvoice?.amount_total) ?? '-'}
                  </TableCell>
                </TableRow>

                {upcomingInvoice?.amount_projected && (
                  <TableRow>
                    <TableCell className="font-medium py-2 px-0 flex items-center">
                      <span className="mr-2">Projected Costs</span>
                      <InfoTooltip className="max-w-xs">
                        Projected costs at the end of the billing cycle. Includes predictable costs
                        for Compute Hours, IPv4, Custom Domain and Point-In-Time-Recovery, but no
                        costs for metrics like MAU, storage or function invocations. Final amounts
                        may vary depending on your usage.
                      </InfoTooltip>
                    </TableCell>
                    <TableCell className="text-right font-medium py-2 px-0" translate="no">
                      {formatCurrency(upcomingInvoice.amount_projected) ?? '-'}
                    </TableCell>
                  </TableRow>
                )}
              </TableFooter>
            </Table>
          </div>
        </div>
      )}
    </>
  )
}

function InvoiceLineItemAmount({
  amountBeforeDiscount,
  amount,
}: {
  amountBeforeDiscount?: number
  amount: number
}) {
  if (amountBeforeDiscount && amount < amountBeforeDiscount) {
    return (
      <div>
        <span className="text-foreground-light line-through mr-2" translate="no">
          {formatCurrency(amountBeforeDiscount)}
        </span>