Add organization management pages and update functionalities

Implemented pages for viewing, editing, and dashboard management of organizations. Integrated Prisma for database interactions and incorporated server-side session handling for authentication-based access control.

Took 54 seconds

Author: mikepsinn

app/organizations/CreateOrganizationForm.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Loader2 } from 'lucide-react'
+import {getOrganization} from "@/app/organizations/organizationActions";
+
+interface CreateOrganizationFormProps {
+  userId: string
+}
+
+export default function CreateOrganizationForm({ userId }: CreateOrganizationFormProps) {
+  const [url, setUrl] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    try {
+      const organization = await getOrganization(url, userId)
+      router.push(`/organizations/${organization.slug}`)
+    } catch (error) {
+      console.error('Error creating/fetching organization:', error)
+      // Handle error (e.g., show error message to user)
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
+      <div>
+        <label htmlFor="url" className="block text-sm font-medium text-gray-700">
+          Organization URL
+        </label>
+        <Input
+          type="text"
+          id="url"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          required
+          placeholder="Enter organization URL"
+        />
+      </div>
+      <Button type="submit" disabled={isLoading}>
+        {isLoading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Creating...
+          </>
+        ) : (
+          'Create Organization'
+        )}
+      </Button>
+    </form>
+  )
+}

app/organizations/[slug]/OrganizationInfo.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import { useState } from 'react'
+import { Organization } from '@prisma/client'
+import { updateOrganization } from '@/app/organizations/organizationActions'
+
+interface OrganizationInfoProps {
+  organization: Organization
+  isOwner: boolean
+}
+
+export default function OrganizationInfo({ organization, isOwner }: OrganizationInfoProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedOrg, setEditedOrg] = useState(organization)
+
+  const handleEdit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      const updatedOrg = await updateOrganization(organization.id, editedOrg)
+      setEditedOrg(updatedOrg)
+      setIsEditing(false)
+    } catch (error) {
+      console.error('Error updating organization:', error)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setEditedOrg((prev) => ({ ...prev, [name]: value }))
+  }
+
+  if (isEditing) {
+    return (
+      <form onSubmit={handleEdit} className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={editedOrg.name}
+            onChange={handleInputChange}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          />
+        </div>
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
+          <textarea
+            id="description"
+            name="description"
+            value={editedOrg.description || ''}
+            onChange={handleInputChange}
+            rows={3}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          ></textarea>
+        </div>
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={editedOrg.email || ''}
+            onChange={handleInputChange}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          />
+        </div>
+        <div>
+          <label htmlFor="telephone" className="block text-sm font-medium text-gray-700">Telephone</label>
+          <input
+            type="tel"
+            id="telephone"
+            name="telephone"
+            value={editedOrg.telephone || ''}
+            onChange={handleInputChange}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          />
+        </div>
+        <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          Save
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-700">{organization.description}</p>
+      <p className="text-gray-700">Email: {organization.email}</p>
+      <p className="text-gray-700">Phone: {organization.telephone}</p>
+      {isOwner && (
+        <button
+          onClick={() => setIsEditing(true)}
+          className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          Edit Organization
+        </button>
+      )}
+    </div>
+  )
+}

app/organizations/[slug]/dashboard/page.tsx

@@ -0,0 +1,46 @@
+import { prisma } from '@/lib/prisma'
+import { notFound } from 'next/navigation'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from "@/lib/auth"
+import Link from 'next/link'
+
+export default async function OrganizationDashboard({ params }: { params: { slug: string } }) {
+  const session = await getServerSession(authOptions)
+  const organization = await prisma.organization.findUnique({
+    where: { slug: params.slug },
+    include: { owner: true }
+  })
+
+  if (!organization) {
+    notFound()
+  }
+
+  const isOwner = session?.user?.id === organization.ownerId
+
+  if (!isOwner) {
+    return <div>You do not have permission to view this dashboard.</div>
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">{organization.name} Dashboard</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div>
+          <h2 className="text-2xl font-semibold mb-4">Quick Actions</h2>
+          <div className="space-y-2">
+            <Link href={`/organizations/${organization.url}/edit`}>
+              <a className="block p-2 bg-blue-100 hover:bg-blue-200 rounded">Edit Organization Info</a>
+            </Link>
+            <Link href={`/organizations/${organization.url}/proposals/new`}>
+              <a className="block p-2 bg-green-100 hover:bg-green-200 rounded">Create New Proposal</a>
+            </Link>
+          </div>
+        </div>
+        <div>
+          <h2 className="text-2xl font-semibold mb-4">Organization Stats</h2>
+          {/* Add organization statistics here */}
+        </div>
+      </div>
+    </div>
+  )
+}

app/organizations/[slug]/page.tsx

@@ -0,0 +1,26 @@
+import { prisma } from '@/lib/prisma'
+import { notFound } from 'next/navigation'
+import OrganizationInfo from '../[slug]/OrganizationInfo'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from "@/lib/auth"
+
+export default async function OrganizationPage({ params }: { params: { slug: string } }) {
+  const session = await getServerSession(authOptions)
+  const organization = await prisma.organization.findUnique({
+    where: { slug: params.slug },
+    include: { owner: true }
+  })
+
+  if (!organization) {
+    notFound()
+  }
+
+  const isOwner = session?.user?.id === organization.ownerId
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">{organization.name}</h1>
+      <OrganizationInfo organization={organization} isOwner={isOwner} />
+    </div>
+  )
+}

app/organizations/organizationActions.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+
+
+import { getOrCreateOrganizationFromUrl } from "@/lib/agents/researcher/organizationAgent";
+import { prisma } from "@/lib/prisma";
+
+
+
+
+
+export async function updateOrganization(organizationId: string, data: any) {
+  try {
+    const updatedOrg = await prisma.organization.update({
+      where: { id: organizationId },
+      data,
+    })
+    revalidatePath(`/organizations/${updatedOrg.url}`)
+    return updatedOrg
+  } catch (error) {
+    console.error("Error updating organization:", error)
+    throw new Error("Failed to update organization")
+  }
+}
+
+export async function getOrganization(organizationUrl: string, userId: string) {
+  return await getOrCreateOrganizationFromUrl(organizationUrl, userId)
+}

app/organizations/page.tsx

@@ -0,0 +1,81 @@
+import { Suspense } from 'react'
+import { prisma } from '@/lib/prisma'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import CreateOrganizationForm from './CreateOrganizationForm'
+import { Organization } from '@prisma/client'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from "@/lib/auth"
+
+async function getOrganizations(search: string = '') {
+  return prisma.organization.findMany({
+      where: {
+          OR: [
+              {name: {contains: search, mode: 'insensitive'}},
+              {description: {contains: search, mode: 'insensitive'}},
+          ],
+      },
+      orderBy: {name: 'asc'},
+  });
+}
+
+async function OrganizationsList({ search }: { search: string }) {
+  const organizations = await getOrganizations(search)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {organizations.map((org: Organization) => (
+        <Card key={org.id}>
+          <CardHeader>
+            <CardTitle>{org.name}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-gray-600 mb-4">{org.description}</p>
+            <Link href={`/organizations/${org.slug}`}>
+              <Button>View Details</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function OrganizationsPage({
+  searchParams,
+}: {
+  searchParams: { search: string }
+}) {
+  const search = searchParams.search || ''
+  const session = await getServerSession(authOptions)
+  const userId = session?.user?.id || ''
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Organizations</h1>
+      
+      <div className="mb-8">
+        <form>
+          <Input
+            type="text"
+            name="search"
+            placeholder="Search organizations..."
+            defaultValue={search}
+            className="w-full max-w-md"
+          />
+        </form>
+      </div>
+
+      <Suspense fallback={<div>Loading organizations...</div>}>
+        <OrganizationsList search={search} />
+      </Suspense>
+
+      <div className="mt-12">
+        <h2 className="text-2xl font-semibold mb-4">Create New Organization</h2>
+        <CreateOrganizationForm userId={userId} />
+      </div>
+    </div>
+  )
+}