Files
myeasycms-v2/apps/web/app/[locale]/home/[account]/members-cms/departments/page.tsx

75 lines
2.4 KiB
TypeScript

import { Users } from 'lucide-react';
import { createMemberManagementApi } from '@kit/member-management/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { AccountNotFound } from '~/components/account-not-found';
import { CmsPageShell } from '~/components/cms-page-shell';
import { EmptyState } from '~/components/empty-state';
import { CreateDepartmentDialog } from './create-department-dialog';
interface Props {
params: Promise<{ account: string }>;
}
export default async function DepartmentsPage({ params }: Props) {
const { account } = await params;
const client = getSupabaseServerClient();
const { data: acct } = await client
.from('accounts')
.select('id')
.eq('slug', account)
.single();
if (!acct) return <AccountNotFound />;
const api = createMemberManagementApi(client);
const departments = await api.listDepartments(acct.id);
return (
<CmsPageShell
account={account}
title="Abteilungen"
description="Sparten und Abteilungen verwalten"
>
<div className="space-y-4">
<div className="flex items-center justify-end">
<CreateDepartmentDialog accountId={acct.id} />
</div>
{departments.length === 0 ? (
<EmptyState
icon={<Users className="h-8 w-8" />}
title="Keine Abteilungen vorhanden"
description="Erstellen Sie Ihre erste Abteilung."
/>
) : (
<div className="rounded-md border">
<table className="w-full text-sm">
<thead>
<tr className="bg-muted/50 border-b">
<th className="p-3 text-left font-medium">Name</th>
<th className="p-3 text-left font-medium">Beschreibung</th>
</tr>
</thead>
<tbody>
{departments.map((dept: Record<string, unknown>) => (
<tr
key={String(dept.id)}
className="hover:bg-muted/30 border-b"
>
<td className="p-3 font-medium">{String(dept.name)}</td>
<td className="text-muted-foreground p-3">
{String(dept.description ?? '—')}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</CmsPageShell>
);
}