Function UsagePage

web/src/app/orgs/[slug]/usage/page.tsx:43–450

()

}

export default function UsagePage() {
  const { data: session, status } = useSession()
  const params = useParams() ?? {}
  const router = useRouter()
  const orgSlug = (params.slug as string) ?? ''

  const [usageData, setUsageData] = useState<UsageData | null>(null)
  const [usageLoading, setUsageLoading] = useState(true)
  const [usageError, setUsageError] = useState<string | null>(null)

  // Use the custom hook for organization data
  const { organization, isLoading, error } = useOrganizationData(orgSlug)

  useEffect(() => {
    if (organization) {
      fetchUsageData()
    }
  }, [organization])

  const fetchUsageData = async () => {
    if (!organization) return

    try {
      setUsageLoading(true)
      const response = await fetch(`/api/orgs/${organization.id}/usage`)

      if (response.ok) {
        const usage = await response.json()
        setUsageData(usage)
      } else {
        const error = await response.json()
        throw new Error(error.error || 'Failed to fetch usage data')
      }
    } catch (error) {
      console.error('Error fetching usage data:', error)
      setUsageError(
        error instanceof Error ? error.message : 'Failed to load usage data',
      )
    } finally {
      setUsageLoading(false)
    }
  }

  const handleExportUsage = async () => {
    if (!organization) return

    try {
      const response = await fetch(`/api/orgs/${organization.id}/usage/export`)

      if (!response.ok) {
        throw new Error('Failed to export usage data')
      }

      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = url