Function BillingStatus

web/src/components/organization/billing-status.tsx:56–323

({
  organizationId,
  noCardWrapper = false,
}: BillingStatusProps)

}

export function BillingStatus({
  organizationId,
  noCardWrapper = false,
}: BillingStatusProps) {
  const isMobile = useIsMobile()

  const billingPortalMutation = useMutation({
    mutationFn: async () => {
      const res = await fetch(`/api/orgs/${organizationId}/billing/portal`, {
        method: 'POST',
      })
      if (!res.ok) {
        const error = await res.json().catch(() => ({ error: 'Failed to open billing portal' }))
        throw new Error(error.error || 'Failed to open billing portal')
      }
      const data = await res.json()
      return data.url as string
    },
    onSuccess: (url) => {
      window.open(url, '_blank', 'noopener,noreferrer')
    },
    onError: (err: Error) => {
      toast({
        title: 'Error',
        description: err.message || 'Failed to open billing portal',
        variant: 'destructive',
      })
    },
  })

  const {
    data: billingStatus,
    isLoading,
    error,
  } = useQuery({
    queryKey: ['billingStatus', organizationId],
    queryFn: () => fetchBillingStatus(organizationId),
    staleTime: 2 * 60 * 1000, // 2 minutes
    refetchOnWindowFocus: false,
  })

  if (isLoading) {
    return (
      <Card
        className={cn(
          'w-full',
          noCardWrapper && 'border-0 shadow-none bg-transparent',
        )}
      >
        <CardHeader
          className={noCardWrapper ? 'p-0' : 'px-4 py-3 sm:px-6 sm:py-4'}
        >
          <CardTitle className="flex items-center text-base sm:text-lg">
            <CreditCard className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
            Billing & Seats
          </CardTitle>
        </CardHeader>
        <CardContent