@hed-hog/operations 0.0.304 → 0.0.306

package/hedhog/frontend/app/collaborator-types/page.tsx.ejs

@@ -1,502 +1,513 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Briefcase, Pencil, Users } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type { OperationsCollaboratorType } from '../_lib/types';
-import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
-
-type CollaboratorTypeFormState = {
-  name: string;
-  slug: string;
-  description: string;
-  category: string;
-  sortOrder: string;
-  status: 'active' | 'inactive';
-};
-
-const EMPTY_FORM_STATE: CollaboratorTypeFormState = {
-  name: '',
-  slug: '',
-  description: '',
-  category: '',
-  sortOrder: '0',
-  status: 'active',
-};
-
-export default function OperationsCollaboratorTypesPage() {
-  const t = useTranslations('operations.CollaboratorTypesPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>(
-    'all'
-  );
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [editingType, setEditingType] = useState<OperationsCollaboratorType | null>(
-    null
-  );
-  const [form, setForm] = useState<CollaboratorTypeFormState>(EMPTY_FORM_STATE);
-
-  const {
-    data: collaboratorTypes = [],
-    isLoading,
-    refetch,
-  } = useQuery<OperationsCollaboratorType[]>({
-    queryKey: ['operations-collaborator-types-page', currentLocaleCode],
-    enabled: access.isDirector,
-    queryFn: () =>
-      fetchOperations<OperationsCollaboratorType[]>(
-        request,
-        '/operations/collaborator-types'
-      ),
-  });
-
-  const filteredTypes = useMemo(
-    () =>
-      collaboratorTypes.filter((collaboratorType) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              collaboratorType.name,
-              collaboratorType.slug,
-              collaboratorType.category,
-              collaboratorType.description,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-
-        const matchesStatus =
-          statusFilter === 'all' ? true : collaboratorType.status === statusFilter;
-
-        return matchesSearch && matchesStatus;
-      }),
-    [collaboratorTypes, search, statusFilter]
-  );
-
-  const statsCards = useMemo(
-    () => [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        value: collaboratorTypes.length,
-        icon: Briefcase,
-      },
-      {
-        key: 'active',
-        title: t('cards.active'),
-        value: collaboratorTypes.filter((item) => item.status === 'active').length,
-        icon: Briefcase,
-      },
-      {
-        key: 'linkedCollaborators',
-        title: t('cards.linkedCollaborators'),
-        value: collaboratorTypes.reduce(
-          (total, item) => total + Number(item.collaboratorCount ?? 0),
-          0
-        ),
-        icon: Users,
-      },
-      {
-        key: 'inactive',
-        title: t('cards.inactive'),
-        value: collaboratorTypes.filter((item) => item.status === 'inactive').length,
-        icon: Briefcase,
-      },
-    ],
-    [collaboratorTypes, t]
-  );
-
-  const updateForm = <K extends keyof CollaboratorTypeFormState>(
-    field: K,
-    value: CollaboratorTypeFormState[K]
-  ) => {
-    setForm((current) => ({
-      ...current,
-      [field]: value,
-    }));
-  };
-
-  const openCreateSheet = () => {
-    setEditingType(null);
-    setForm(EMPTY_FORM_STATE);
-    setIsSheetOpen(true);
-  };
-
-  const openEditSheet = (collaboratorType: OperationsCollaboratorType) => {
-    setEditingType(collaboratorType);
-    setForm({
-      name: collaboratorType.name ?? '',
-      slug: collaboratorType.slug ?? '',
-      description: collaboratorType.description ?? '',
-      category: collaboratorType.category ?? '',
-      sortOrder: String(collaboratorType.sortOrder ?? 0),
-      status: collaboratorType.status ?? 'active',
-    });
-    setIsSheetOpen(true);
-  };
-
-  const saveCollaboratorType = async () => {
-    if (!form.name.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      await mutateOperations(
-        request,
-        editingType
-          ? `/operations/collaborator-types/${editingType.id}`
-          : '/operations/collaborator-types',
-        editingType ? 'PATCH' : 'POST',
-        {
-          name: form.name.trim(),
-          slug: form.slug.trim() || null,
-          description: form.description.trim() || null,
-          category: form.category.trim() || null,
-          sortOrder: Number(form.sortOrder || '0'),
-          status: form.status,
-          isActive: form.status === 'active',
-        }
-      );
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setEditingType(null);
-      setForm(EMPTY_FORM_STATE);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const toggleStatus = async (collaboratorType: OperationsCollaboratorType) => {
-    const nextStatus =
-      collaboratorType.status === 'inactive' ? 'active' : 'inactive';
-
-    try {
-      await mutateOperations(
-        request,
-        `/operations/collaborator-types/${collaboratorType.id}`,
-        'PATCH',
-        { status: nextStatus, isActive: nextStatus === 'active' }
-      );
-      showToastHandler?.('success', t('messages.statusSuccess'));
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.statusError'));
-    }
-  };
-
-  if (!access.isLoading && !access.isDirector) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-          actions={
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-          }
-        />
-
-        <EmptyState
-          icon={<Briefcase className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.back')}
-          onAction={() => {
-            window.location.href = '/operations';
-          }}
-        />
-      </Page>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-            <Button size="sm" onClick={openCreateSheet}>
-              {commonT('actions.create')}
-            </Button>
-          </div>
-        }
-      />
-
-      <KpiCardsGrid items={statsCards} columns={4} />
-
-      <div className="flex flex-col gap-4">
-        <SearchBar
-          searchQuery={search}
-          onSearchChange={setSearch}
-          onSearch={() => undefined}
-          placeholder={t('searchPlaceholder')}
-          controls={[
-            {
-              id: 'status',
-              type: 'select',
-              value: statusFilter,
-              onChange: (value) =>
-                setStatusFilter(
-                  (value as 'all' | 'active' | 'inactive') ?? 'all'
-                ),
-              placeholder: commonT('labels.status'),
-              options: [
-                { value: 'all', label: commonT('filters.allStatuses') },
-                { value: 'active', label: formatEnumLabel('active') },
-                { value: 'inactive', label: formatEnumLabel('inactive') },
-              ],
-            },
-          ]}
-        />
-      </div>
-
-      {isLoading ? (
-        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
-          {commonT('actions.refresh')}...
-        </div>
-      ) : filteredTypes.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('columns.name')}</TableHead>
-                <TableHead>{t('columns.slug')}</TableHead>
-                <TableHead>{t('columns.category')}</TableHead>
-                <TableHead>{t('columns.description')}</TableHead>
-                <TableHead>{t('columns.sortOrder')}</TableHead>
-                <TableHead>{t('columns.collaborators')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead className="text-right">
-                  {commonT('labels.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredTypes.map((collaboratorType) => (
-                <TableRow key={collaboratorType.id}>
-                  <TableCell className="font-medium">
-                    {collaboratorType.name}
-                  </TableCell>
-                  <TableCell>{collaboratorType.slug}</TableCell>
-                  <TableCell>
-                    {collaboratorType.category || commonT('labels.notAvailable')}
-                  </TableCell>
-                  <TableCell className="max-w-md text-sm text-muted-foreground">
-                    {collaboratorType.description || commonT('labels.notAvailable')}
-                  </TableCell>
-                  <TableCell>{Number(collaboratorType.sortOrder ?? 0)}</TableCell>
-                  <TableCell>
-                    {Number(collaboratorType.collaboratorCount ?? 0)}
-                  </TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(collaboratorType.status)}
-                      className={getStatusBadgeClass(collaboratorType.status)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="cursor-pointer"
-                        onClick={() => openEditSheet(collaboratorType)}
-                      >
-                        <Pencil className="size-4" />
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="cursor-pointer"
-                        onClick={() => void toggleStatus(collaboratorType)}
-                      >
-                        {collaboratorType.status === 'inactive'
-                          ? commonT('actions.activate')
-                          : commonT('actions.deactivate')}
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      ) : (
-        <EmptyState
-          icon={<Briefcase className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.create')}
-          onAction={openCreateSheet}
-        />
-      )}
-
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-          <SheetHeader>
-            <SheetTitle>
-              {editingType ? t('sheet.editTitle') : t('sheet.createTitle')}
-            </SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <form
-            className="mt-6 space-y-4"
-            onSubmit={(event) => {
-              event.preventDefault();
-              void saveCollaboratorType();
-            }}
-          >
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-name">
-                {t('form.name')}
-              </label>
-              <input
-                id="type-name"
-                value={form.name}
-                onChange={(event) => updateForm('name', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.name')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-slug">
-                {t('form.slug')}
-              </label>
-              <input
-                id="type-slug"
-                value={form.slug}
-                onChange={(event) => updateForm('slug', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.slug')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-category">
-                {t('form.category')}
-              </label>
-              <input
-                id="type-category"
-                value={form.category}
-                onChange={(event) => updateForm('category', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.category')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-description">
-                {t('form.description')}
-              </label>
-              <textarea
-                id="type-description"
-                value={form.description}
-                onChange={(event) => updateForm('description', event.target.value)}
-                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.description')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-sort-order">
-                {t('form.sortOrder')}
-              </label>
-              <input
-                id="type-sort-order"
-                type="number"
-                value={form.sortOrder}
-                onChange={(event) => updateForm('sortOrder', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder="0"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-status">
-                {t('form.status')}
-              </label>
-              <select
-                id="type-status"
-                value={form.status}
-                onChange={(event) =>
-                  updateForm(
-                    'status',
-                    event.target.value === 'inactive' ? 'inactive' : 'active'
-                  )
-                }
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-              >
-                <option value="active">{formatEnumLabel('active')}</option>
-                <option value="inactive">{formatEnumLabel('inactive')}</option>
-              </select>
-            </div>
-
-            <div className="flex justify-end gap-2 pt-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setIsSheetOpen(false)}
-              >
-                {commonT('actions.cancel')}
-              </Button>
-              <Button type="submit" disabled={isSaving}>
-                {commonT('actions.save')}
-              </Button>
-            </div>
-          </form>
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Briefcase, Pencil, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { StatusBadge } from '../_components/status-badge';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsCollaboratorType } from '../_lib/types';
+import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
+
+type CollaboratorTypeFormState = {
+  name: string;
+  slug: string;
+  description: string;
+  category: string;
+  sortOrder: string;
+  status: 'active' | 'inactive';
+};
+
+const EMPTY_FORM_STATE: CollaboratorTypeFormState = {
+  name: '',
+  slug: '',
+  description: '',
+  category: '',
+  sortOrder: '0',
+  status: 'active',
+};
+
+export default function OperationsCollaboratorTypesPage() {
+  const t = useTranslations('operations.CollaboratorTypesPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'inactive'
+  >('all');
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [editingType, setEditingType] =
+    useState<OperationsCollaboratorType | null>(null);
+  const [form, setForm] = useState<CollaboratorTypeFormState>(EMPTY_FORM_STATE);
+
+  const {
+    data: collaboratorTypes = [],
+    isLoading,
+    refetch,
+  } = useQuery<OperationsCollaboratorType[]>({
+    queryKey: ['operations-collaborator-types-page', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaboratorType[]>(
+        request,
+        '/operations/collaborator-types'
+      ),
+  });
+
+  const filteredTypes = useMemo(
+    () =>
+      collaboratorTypes.filter((collaboratorType) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              collaboratorType.name,
+              collaboratorType.slug,
+              collaboratorType.category,
+              collaboratorType.description,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
+              );
+
+        const matchesStatus =
+          statusFilter === 'all'
+            ? true
+            : collaboratorType.status === statusFilter;
+
+        return matchesSearch && matchesStatus;
+      }),
+    [collaboratorTypes, search, statusFilter]
+  );
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: collaboratorTypes.length,
+        icon: Briefcase,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: collaboratorTypes.filter((item) => item.status === 'active')
+          .length,
+        icon: Briefcase,
+      },
+      {
+        key: 'linkedCollaborators',
+        title: t('cards.linkedCollaborators'),
+        value: collaboratorTypes.reduce(
+          (total, item) => total + Number(item.collaboratorCount ?? 0),
+          0
+        ),
+        icon: Users,
+      },
+      {
+        key: 'inactive',
+        title: t('cards.inactive'),
+        value: collaboratorTypes.filter((item) => item.status === 'inactive')
+          .length,
+        icon: Briefcase,
+      },
+    ],
+    [collaboratorTypes, t]
+  );
+
+  const updateForm = <K extends keyof CollaboratorTypeFormState>(
+    field: K,
+    value: CollaboratorTypeFormState[K]
+  ) => {
+    setForm((current) => ({
+      ...current,
+      [field]: value,
+    }));
+  };
+
+  const openCreateSheet = () => {
+    setEditingType(null);
+    setForm(EMPTY_FORM_STATE);
+    setIsSheetOpen(true);
+  };
+
+  const openEditSheet = (collaboratorType: OperationsCollaboratorType) => {
+    setEditingType(collaboratorType);
+    setForm({
+      name: collaboratorType.name ?? '',
+      slug: collaboratorType.slug ?? '',
+      description: collaboratorType.description ?? '',
+      category: collaboratorType.category ?? '',
+      sortOrder: String(collaboratorType.sortOrder ?? 0),
+      status: collaboratorType.status ?? 'active',
+    });
+    setIsSheetOpen(true);
+  };
+
+  const saveCollaboratorType = async () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      await mutateOperations(
+        request,
+        editingType
+          ? `/operations/collaborator-types/${editingType.id}`
+          : '/operations/collaborator-types',
+        editingType ? 'PATCH' : 'POST',
+        {
+          name: form.name.trim(),
+          slug: form.slug.trim() || null,
+          description: form.description.trim() || null,
+          category: form.category.trim() || null,
+          sortOrder: Number(form.sortOrder || '0'),
+          status: form.status,
+          isActive: form.status === 'active',
+        }
+      );
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setIsSheetOpen(false);
+      setEditingType(null);
+      setForm(EMPTY_FORM_STATE);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const toggleStatus = async (collaboratorType: OperationsCollaboratorType) => {
+    const nextStatus =
+      collaboratorType.status === 'inactive' ? 'active' : 'inactive';
+
+    try {
+      await mutateOperations(
+        request,
+        `/operations/collaborator-types/${collaboratorType.id}`,
+        'PATCH',
+        { status: nextStatus, isActive: nextStatus === 'active' }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  if (!access.isLoading && !access.isDirector) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+          actions={
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+          }
+        />
+
+        <EmptyState
+          icon={<Briefcase className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.back')}
+          onAction={() => {
+            window.location.href = '/operations';
+          }}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={openCreateSheet}>
+              {commonT('actions.create')}
+            </Button>
+          </div>
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <div className="flex flex-col gap-4">
+        <SearchBar
+          searchQuery={search}
+          onSearchChange={setSearch}
+          onSearch={() => undefined}
+          placeholder={t('searchPlaceholder')}
+          controls={[
+            {
+              id: 'status',
+              type: 'select',
+              value: statusFilter,
+              onChange: (value) =>
+                setStatusFilter(
+                  (value as 'all' | 'active' | 'inactive') ?? 'all'
+                ),
+              placeholder: commonT('labels.status'),
+              options: [
+                { value: 'all', label: commonT('filters.allStatuses') },
+                { value: 'active', label: formatEnumLabel('active') },
+                { value: 'inactive', label: formatEnumLabel('inactive') },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      {isLoading ? (
+        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
+          {commonT('actions.refresh')}...
+        </div>
+      ) : filteredTypes.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.slug')}</TableHead>
+                <TableHead>{t('columns.category')}</TableHead>
+                <TableHead>{t('columns.description')}</TableHead>
+                <TableHead>{t('columns.sortOrder')}</TableHead>
+                <TableHead>{t('columns.collaborators')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredTypes.map((collaboratorType) => (
+                <TableRow key={collaboratorType.id}>
+                  <TableCell className="font-medium">
+                    {collaboratorType.name}
+                  </TableCell>
+                  <TableCell>{collaboratorType.slug}</TableCell>
+                  <TableCell>
+                    {collaboratorType.category ||
+                      commonT('labels.notAvailable')}
+                  </TableCell>
+                  <TableCell className="max-w-md text-sm text-muted-foreground">
+                    {collaboratorType.description ||
+                      commonT('labels.notAvailable')}
+                  </TableCell>
+                  <TableCell>
+                    {Number(collaboratorType.sortOrder ?? 0)}
+                  </TableCell>
+                  <TableCell>
+                    {Number(collaboratorType.collaboratorCount ?? 0)}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(collaboratorType.status)}
+                      className={getStatusBadgeClass(collaboratorType.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(collaboratorType)}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => void toggleStatus(collaboratorType)}
+                      >
+                        {collaboratorType.status === 'inactive'
+                          ? commonT('actions.activate')
+                          : commonT('actions.deactivate')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<Briefcase className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={commonT('actions.create')}
+          onAction={openCreateSheet}
+        />
+      )}
+
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingType ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <form
+            className="mt-6 px-6 space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void saveCollaboratorType();
+            }}
+          >
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-name">
+                {t('form.name')}
+              </label>
+              <input
+                id="type-name"
+                value={form.name}
+                onChange={(event) => updateForm('name', event.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.name')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-slug">
+                {t('form.slug')}
+              </label>
+              <input
+                id="type-slug"
+                value={form.slug}
+                onChange={(event) => updateForm('slug', event.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.slug')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-category">
+                {t('form.category')}
+              </label>
+              <input
+                id="type-category"
+                value={form.category}
+                onChange={(event) => updateForm('category', event.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.category')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-description">
+                {t('form.description')}
+              </label>
+              <textarea
+                id="type-description"
+                value={form.description}
+                onChange={(event) =>
+                  updateForm('description', event.target.value)
+                }
+                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.description')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-sort-order">
+                {t('form.sortOrder')}
+              </label>
+              <input
+                id="type-sort-order"
+                type="number"
+                value={form.sortOrder}
+                onChange={(event) =>
+                  updateForm('sortOrder', event.target.value)
+                }
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder="0"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="type-status">
+                {t('form.status')}
+              </label>
+              <select
+                id="type-status"
+                value={form.status}
+                onChange={(event) =>
+                  updateForm(
+                    'status',
+                    event.target.value === 'inactive' ? 'inactive' : 'active'
+                  )
+                }
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              >
+                <option value="active">{formatEnumLabel('active')}</option>
+                <option value="inactive">{formatEnumLabel('inactive')}</option>
+              </select>
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsSheetOpen(false)}
+              >
+                {commonT('actions.cancel')}
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {commonT('actions.save')}
+              </Button>
+            </div>
+          </form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}