Function OrganizationSettingsPage

web/src/app/orgs/[slug]/settings/page.tsx:23–502

()

import { useOrganizationData } from '@/hooks/use-organization-data'

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

  const [updateForm, setUpdateForm] = useState({
    name: '',
    description: '',
  })
  const [updating, setUpdating] = useState(false)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [publishers, setPublishers] = useState<PublisherProfileResponse[]>([])
  const [publishersLoading, setPublishersLoading] = useState(true)

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

  // Fetch publishers data for this organization
  useEffect(() => {
    const fetchPublishers = async () => {
      if (!organization?.id) return

      setPublishersLoading(true)
      try {
        const response = await fetch(`/api/orgs/${organization.id}/publishers`)
        if (response.ok) {
          const data = await response.json()
          setPublishers(data.publishers || [])
        }
      } catch (error) {
        console.error('Error fetching publishers:', error)
      } finally {
        setPublishersLoading(false)
      }
    }

    fetchPublishers()
  }, [organization?.id])

  // Initialize form when organization data loads
  useEffect(() => {
    if (organization) {
      setUpdateForm({
        name: organization.name,
        description: organization.description || '',
      })
    }
  }, [organization])

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

    if (!updateForm.name.trim()) {
      toast({
        title: 'Error',
        description: 'Organization name is required',