235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
import { prisma } from '@innungsapp/shared'
|
|
import { notFound } from 'next/navigation'
|
|
import { format } from 'date-fns'
|
|
import { de } from 'date-fns/locale'
|
|
import Link from 'next/link'
|
|
import { EditOrgForm } from './EditOrgForm'
|
|
import { DeleteOrgButton } from './DeleteOrgButton'
|
|
import { CreateAdminForm } from './CreateAdminForm'
|
|
import { CreateMemberForm } from './CreateMemberForm'
|
|
import { UserRoleActions } from './UserRoleActions'
|
|
import { MemberActions } from './MemberActions'
|
|
import { toggleAiFeature } from '../../actions'
|
|
|
|
const PLAN_COLORS: Record<string, string> = {
|
|
pilot: 'bg-gray-100 text-gray-700',
|
|
standard: 'bg-blue-100 text-blue-800',
|
|
pro: 'bg-purple-100 text-purple-800',
|
|
verband: 'bg-amber-100 text-amber-800',
|
|
}
|
|
|
|
export default async function OrgDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
|
|
const org = await prisma.organization.findUnique({
|
|
where: { id },
|
|
include: {
|
|
_count: {
|
|
select: {
|
|
members: true,
|
|
userRoles: true,
|
|
news: true,
|
|
termine: true,
|
|
stellen: true,
|
|
},
|
|
},
|
|
userRoles: {
|
|
include: { user: true },
|
|
},
|
|
members: {
|
|
take: 5,
|
|
orderBy: { createdAt: 'desc' },
|
|
select: { id: true, name: true, betrieb: true, status: true, createdAt: true },
|
|
},
|
|
},
|
|
})
|
|
|
|
if (!org) notFound()
|
|
|
|
const planColor = PLAN_COLORS[org.plan] ?? 'bg-gray-100 text-gray-700'
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Breadcrumb */}
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<Link href="/superadmin" className="hover:text-gray-900 transition-colors">
|
|
← Alle Innungen
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-2xl font-bold text-gray-900">{org.name}</h1>
|
|
<span className={`text-xs font-semibold px-2.5 py-0.5 rounded ${planColor}`}>
|
|
{org.plan}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-1 text-sm text-gray-500">
|
|
<span className="font-mono bg-gray-100 px-2 py-0.5 rounded text-[11px]">{org.slug}</span>
|
|
<span>•</span>
|
|
<span>Erstellt {format(org.createdAt, 'dd. MMMM yyyy', { locale: de })}</span>
|
|
{org.avvAccepted && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="text-green-600">AVV akzeptiert</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
|
|
{[
|
|
{ label: 'Mitglieder', value: org._count.members },
|
|
{ label: 'Admins', value: org._count.userRoles },
|
|
{ label: 'News', value: org._count.news },
|
|
{ label: 'Termine', value: org._count.termine },
|
|
{ label: 'Stellen', value: org._count.stellen },
|
|
].map(({ label, value }) => (
|
|
<div key={label} className="bg-white rounded-xl border p-4 text-center">
|
|
<div className="text-2xl font-bold text-gray-900">{value}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Edit form */}
|
|
<div className="lg:col-span-1 space-y-4">
|
|
<EditOrgForm org={org} />
|
|
|
|
{/* KI-Assistent */}
|
|
<div className="bg-white rounded-xl border p-4 space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-900">KI-Assistent</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
Aktiviert den KI-Chat-Assistenten für Mitglieder dieser Innung.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className={`text-sm font-medium ${org.aiEnabled ? 'text-green-700' : 'text-gray-400'}`}>
|
|
{org.aiEnabled ? 'Aktiviert' : 'Deaktiviert'}
|
|
</span>
|
|
<form action={async () => {
|
|
'use server'
|
|
await toggleAiFeature(org.id, !org.aiEnabled)
|
|
}}>
|
|
<button
|
|
type="submit"
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${org.aiEnabled ? 'bg-green-500' : 'bg-gray-200'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${org.aiEnabled ? 'translate-x-6' : 'translate-x-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Danger zone */}
|
|
<div className="bg-white rounded-xl border border-red-200 p-4">
|
|
<h3 className="text-sm font-semibold text-red-700 mb-1">Gefahrenzone</h3>
|
|
<p className="text-xs text-gray-500 mb-3">
|
|
Das Löschen einer Innung entfernt alle zugehörigen Daten unwiderruflich.
|
|
</p>
|
|
<DeleteOrgButton id={org.id} name={org.name} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column: admins + recent members */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Admins */}
|
|
<div className="bg-white rounded-xl border overflow-hidden">
|
|
<div className="p-4 border-b flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-gray-900">
|
|
Nutzer & Rollen ({org.userRoles.length})
|
|
</h2>
|
|
</div>
|
|
<div className="p-4 bg-gray-50/50 border-b">
|
|
<CreateAdminForm orgId={org.id} />
|
|
</div>
|
|
<div className="divide-y">
|
|
{org.userRoles.length === 0 ? (
|
|
<p className="p-4 text-sm text-gray-400">Noch keine Nutzer zugewiesen.</p>
|
|
) : (
|
|
org.userRoles.map((ur) => (
|
|
<div key={ur.id} className="p-4 flex items-center justify-between">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">{ur.user.name}</div>
|
|
<div className="text-xs text-gray-500">
|
|
{ur.user.email}
|
|
<span className="ml-2 font-mono text-[10px] bg-gray-100 px-1 py-0.5 rounded">
|
|
{ur.role}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{ur.user.emailVerified ? (
|
|
<span className="text-[10px] text-green-600 bg-green-50 px-2 py-0.5 rounded-full uppercase font-bold tracking-wider">
|
|
Verifiziert
|
|
</span>
|
|
) : (
|
|
<span className="text-[10px] text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full uppercase font-bold tracking-wider">
|
|
Eingeladen
|
|
</span>
|
|
)}
|
|
<UserRoleActions ur={ur} orgId={org.id} />
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent members */}
|
|
<div className="bg-white rounded-xl border overflow-hidden">
|
|
<div className="p-4 border-b flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-gray-900">
|
|
Mitglieder
|
|
</h2>
|
|
<span className="text-xs text-gray-400">{org._count.members} gesamt</span>
|
|
</div>
|
|
<div className="p-4 bg-gray-50/50 border-b">
|
|
<CreateMemberForm orgId={org.id} />
|
|
</div>
|
|
<div className="divide-y">
|
|
{org.members.length === 0 ? (
|
|
<p className="p-4 text-sm text-gray-400">Noch keine Mitglieder.</p>
|
|
) : (
|
|
org.members.map((m) => (
|
|
<div key={m.id} className="p-4 flex items-center justify-between">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">{m.name}</div>
|
|
<div className="text-xs text-gray-500">{m.betrieb}</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<span
|
|
className={`text-xs px-2 py-0.5 rounded-full ${m.status === 'aktiv'
|
|
? 'bg-green-50 text-green-700'
|
|
: 'bg-gray-100 text-gray-500'
|
|
}`}
|
|
>
|
|
{m.status}
|
|
</span>
|
|
<span className="text-xs text-gray-400">
|
|
{format(m.createdAt, 'dd.MM.yy', { locale: de })}
|
|
</span>
|
|
<MemberActions member={m} orgId={org.id} />
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|