fix: item description and unit price of Billing Breakdown (supabase#29996)

Author: ecktoteckto

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx

@@ -113,7 +113,7 @@ const UpcomingInvoice = ({ slug }: UpcomingInvoiceProps) => {
                 <th className="py-2 font-medium text-right text-sm text-foreground-light pr-4">
                   Usage
                 </th>
-                <th className="py-2 font-medium text-left text-sm text-foreground-light">
+                <th className="py-2 pr-2 font-medium text-left text-sm text-foreground-light max-w-[200px]">
                   Unit price
                 </th>
                 <th className="py-2 font-medium text-right text-sm text-foreground-light">Cost</th>
@@ -124,19 +124,22 @@ const UpcomingInvoice = ({ slug }: UpcomingInvoiceProps) => {
                 <tr key={item.description} className="border-b">
                   <td className="py-2 text-sm max-w-[200px]" colSpan={item.proration ? 3 : 1}>
                     {item.description ?? 'Unknown'}
+                    {item.usage_metric &&
+                      billingMetricUnit(item.usage_metric) &&
+                      ` (${billingMetricUnit(item.usage_metric)})`}
                   </td>
                   {!item.proration && (
                     <td className="py-2 text-sm text-right pr-4">
                       {item.quantity?.toLocaleString()}
                     </td>
                   )}
                   {!item.proration && (
-                    <td className="py-2 text-sm">
+                    <td className="py-2 pr-2 text-sm max-w-[200px]">
                       {item.unit_price === 0
                         ? 'FREE'
                         : item.unit_price
                           ? formatCurrency(item.unit_price)
-                          : null}
+                          : `${item.unit_price_desc}`}
                     </td>
                   )}
                   <td className="py-2 text-sm text-right">{formatCurrency(item.amount)}</td>

apps/studio/components/interfaces/Organization/BillingSettings/helpers.ts

@@ -46,6 +46,9 @@ export const billingMetricUnit = (pricingMetric: PricingMetric) => {
       PricingMetric.PITR_7,
       PricingMetric.PITR_14,
       PricingMetric.PITR_28,
+      PricingMetric.LOG_DRAIN,
+      PricingMetric.AUTH_MFA_PHONE,
+      PricingMetric.AUTH_MFA_WEB_AUTHN,
     ].includes(pricingMetric)
   ) {
     return 'Hours'

apps/studio/data/analytics/org-daily-stats-query.ts

@@ -40,6 +40,8 @@ export enum PricingMetric {
   DISK_THROUGHPUT_GP3 = 'DISK_THROUGHPUT_GP3',
   LOG_DRAIN = 'LOG_DRAIN',
   LOG_DRAIN_EVENTS = 'LOG_DRAIN_EVENTS',
+  AUTH_MFA_PHONE = 'AUTH_MFA_PHONE',
+  AUTH_MFA_WEB_AUTHN = 'AUTH_MFA_WEB_AUTHN',
 }
 
 export enum ComputeUsageMetric {