Function UsageBar

apps/webapp/app/components/billing/UsageBar.tsx:15–125

({
  numberOfCurrentRuns,
  billingLimit,
  tierRunLimit,
  projectedRuns,
  subscribedToPaidTier = false,
}: UsageBarProps)

};

export function UsageBar({
  numberOfCurrentRuns,
  billingLimit,
  tierRunLimit,
  projectedRuns,
  subscribedToPaidTier = false,
}: UsageBarProps) {
  const getLargestNumber = Math.max(
    numberOfCurrentRuns,
    tierRunLimit ?? -Infinity,
    projectedRuns,
    billingLimit ?? -Infinity
  );
  //creates a maximum range for the progress bar, add 10% to the largest number so the bar doesn't reach the end
  const maxRange = Math.round(getLargestNumber * 1.1);
  const tierRunLimitPercentage = tierRunLimit ? Math.round((tierRunLimit / maxRange) * 100) : 0;
  const projectedRunsPercentage = Math.round((projectedRuns / maxRange) * 100);
  const billingLimitPercentage =
    billingLimit !== undefined ? Math.round((billingLimit / maxRange) * 100) : 0;
  const usagePercentage = Math.round((numberOfCurrentRuns / maxRange) * 100);

  //cap the usagePercentage to the freeRunLimitPercentage
  const usageCappedToLimitPercentage = Math.min(usagePercentage, tierRunLimitPercentage);

  return (
    <div className="h-fit w-full py-16">
      <div className="relative h-3 w-full rounded-sm bg-charcoal-800">
        {billingLimit && (
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: billingLimitPercentage + "%" }}
            transition={{ duration: 1.5, type: "spring" }}
            style={{ width: `${billingLimitPercentage}%` }}
            className="absolute h-3 rounded-l-sm"
          >
            <Legend
              text="Billing limit:"
              value={formatNumberCompact(billingLimit)}
              position="bottomRow2"
              percentage={billingLimitPercentage}
              tooltipContent={`Billing limit: ${formatNumberCompact(billingLimit)}`}
            />
          </motion.div>
        )}
        {tierRunLimit && (
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: tierRunLimitPercentage + "%" }}
            transition={{ duration: 1.5, type: "spring" }}
            style={{ width: `${tierRunLimitPercentage}%` }}
            className="absolute h-3 rounded-l-sm bg-green-900/50"
          >
            <Legend
              text={`${subscribedToPaidTier ? "Included free:" : "Free tier limit:"}`}
              value={formatNumberCompact(tierRunLimit)}
              position="bottomRow1"
              percentage={tierRunLimitPercentage}
              tooltipContent={`${