Function OrganizationAnalyticsPage

web/src/app/orgs/[slug]/analytics/page.tsx:59–476

()

}

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

  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null)
  const [analyticsLoading, setAnalyticsLoading] = useState(true)
  const [analyticsError, setAnalyticsError] = useState<string | null>(null)

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

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

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

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

      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.error || 'Failed to fetch analytics')
      }

      const data = await response.json()
      setAnalytics(data)
    } catch (error) {
      console.error('Error fetching analytics:', error)
      setAnalyticsError(
        error instanceof Error ? error.message : 'Failed to load analytics',
      )
    } finally {
      setAnalyticsLoading(false)
    }
  }

  const exportData = async (format: 'csv' | 'json') => {
    if (!organization) return

    try {
      const response = await fetch(
        `/api/orgs/${organization.id}/analytics/export?format=${format}`,
      )

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

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