@hed-hog/operations 0.0.299 → 0.0.301

package/hedhog/frontend/app/collaborators/page.tsx.ejs

@@ -1,7 +1,17 @@
 'use client';
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -10,11 +20,25 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Eye, FileText, Pencil, UserRound } from 'lucide-react';
+import {
+  Building2,
+  CalendarDays,
+  FileText,
+  LayoutGrid,
+  List,
+  Pencil,
+  Power,
+  UserCheck,
+  UserRound,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl';
+import { CollaboratorFormScreen } from '../_components/collaborator-form-screen';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
@@ -27,20 +51,133 @@ import {
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 
+const COLLABORATOR_VIEW_STORAGE_KEY = 'operations-collaborators-view-mode';
+
+type CollaboratorViewMode = 'table' | 'cards';
+
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return '??';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
 export default function OperationsCollaboratorsPage() {
   const t = useTranslations('operations.CollaboratorsPage');
+  const formT = useTranslations('operations.CollaboratorFormPage');
   const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [typeFilter, setTypeFilter] = useState('all');
+  const [viewMode, setViewMode] = useState<CollaboratorViewMode>(() => {
+    if (typeof window === 'undefined') {
+      return 'table';
+    }
+
+    const savedViewMode = window.localStorage.getItem(
+      COLLABORATOR_VIEW_STORAGE_KEY
+    );
+
+    return savedViewMode === 'cards' ? 'cards' : 'table';
+  });
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+
+  const editParam = searchParams.get('edit');
+  const editingCollaboratorId =
+    editParam && /^\d+$/.test(editParam) ? Number(editParam) : null;
+
+  const updateSheetQuery = (collaboratorId?: number | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (collaboratorId && collaboratorId > 0) {
+      params.set('edit', String(collaboratorId));
+    } else {
+      params.delete('edit');
+    }
+
+    const nextUrl = params.size ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(nextUrl, { scroll: false });
+  };
 
-  const { data: collaborators = [], refetch } = useQuery<OperationsCollaborator[]>({
+  const openCreateSheet = () => {
+    setIsCreateSheetOpen(true);
+    updateSheetQuery(null);
+  };
+
+  const openEditSheet = (collaboratorId: number) => {
+    setIsCreateSheetOpen(false);
+    updateSheetQuery(collaboratorId);
+  };
+
+  const closeFormSheet = () => {
+    setIsCreateSheetOpen(false);
+
+    if (editingCollaboratorId !== null) {
+      updateSheetQuery(null);
+    }
+  };
+
+  const getCollaboratorTypeLabel = (value?: string | null) => {
+    switch (value) {
+      case 'clt':
+        return formT('options.collaboratorTypes.clt');
+      case 'pj':
+        return formT('options.collaboratorTypes.pj');
+      case 'freelancer':
+        return formT('options.collaboratorTypes.freelancer');
+      case 'intern':
+        return formT('options.collaboratorTypes.intern');
+      case 'other':
+        return formT('options.collaboratorTypes.other');
+      default:
+        return formatEnumLabel(value);
+    }
+  };
+
+  const getStatusLabel = (value?: string | null) => {
+    switch (value) {
+      case 'active':
+        return formT('options.statuses.active');
+      case 'on_leave':
+        return formT('options.statuses.on_leave');
+      case 'inactive':
+        return formT('options.statuses.inactive');
+      case 'draft':
+        return formT('options.statuses.draft');
+      default:
+        return formatEnumLabel(value);
+    }
+  };
+
+  const { data: collaborators = [], refetch } = useQuery<
+    OperationsCollaborator[]
+  >({
     queryKey: ['operations-collaborators-list', currentLocaleCode],
     enabled: access.isCollaborator,
     queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
   });
 
   const filteredRows = useMemo(
@@ -57,7 +194,9 @@ export default function OperationsCollaboratorsPage() {
             ]
               .filter(Boolean)
               .some((value) =>
-                String(value).toLowerCase().includes(search.trim().toLowerCase())
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
               );
         const matchesStatus =
           statusFilter === 'all' ? true : item.status === statusFilter;
@@ -68,8 +207,52 @@ export default function OperationsCollaboratorsPage() {
     [collaborators, search, statusFilter, typeFilter]
   );
 
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: collaborators.length,
+        icon: Users,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: collaborators.filter((item) => item.status === 'active').length,
+        icon: UserCheck,
+      },
+      {
+        key: 'onLeave',
+        title: t('cards.onLeave'),
+        value: collaborators.filter((item) => item.status === 'on_leave')
+          .length,
+        icon: CalendarDays,
+      },
+      {
+        key: 'withContracts',
+        title: t('cards.withContracts'),
+        value: collaborators.filter((item) => Boolean(item.contractId)).length,
+        icon: FileText,
+      },
+    ],
+    [collaborators, t]
+  );
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(COLLABORATOR_VIEW_STORAGE_KEY, value);
+    }
+  };
+
   const toggleStatus = async (collaborator: OperationsCollaborator) => {
-    const nextStatus = collaborator.status === 'inactive' ? 'active' : 'inactive';
+    const nextStatus =
+      collaborator.status === 'inactive' ? 'active' : 'inactive';
 
     try {
       await mutateOperations(
@@ -93,169 +276,443 @@ export default function OperationsCollaboratorsPage() {
         current={t('breadcrumb')}
         actions={
           access.isDirector ? (
-            <Button size="sm" asChild>
-              <Link href="/operations/collaborators/new">
+            <div className="flex flex-wrap gap-2">
+              <Button variant="outline" size="sm" asChild>
+                <Link href="/operations/departments">
+                  <Building2 className="size-4" />
+                  {commonT('actions.manageDepartments')}
+                </Link>
+              </Button>
+              <Button size="sm" onClick={openCreateSheet}>
                 {commonT('actions.create')}
-              </Link>
-            </Button>
+              </Button>
+            </div>
           ) : undefined
         }
       />
 
-      <SearchBar
-        searchQuery={search}
-        onSearchChange={setSearch}
-        onSearch={() => undefined}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'type',
-            type: 'select',
-            value: typeFilter,
-            onChange: setTypeFilter,
-            placeholder: commonT('labels.collaboratorType'),
-            options: [
-              { value: 'all', label: commonT('filters.allTypes') },
-              { value: 'clt', label: 'CLT' },
-              { value: 'pj', label: 'PJ' },
-              { value: 'freelancer', label: 'Freelancer' },
-              { value: 'intern', label: 'Intern' },
-              { value: 'other', label: 'Other' }
-            ]
-          },
-          {
-            id: 'status',
-            type: 'select',
-            value: statusFilter,
-            onChange: setStatusFilter,
-            placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'active', label: formatEnumLabel('active') },
-              { value: 'on_leave', label: formatEnumLabel('on_leave') },
-              { value: 'inactive', label: formatEnumLabel('inactive') }
-            ]
-          }
-        ]}
-      />
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onSearch={() => undefined}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'type',
+                type: 'select',
+                value: typeFilter,
+                onChange: setTypeFilter,
+                placeholder: commonT('labels.collaboratorType'),
+                options: [
+                  { value: 'all', label: commonT('filters.allTypes') },
+                  { value: 'clt', label: getCollaboratorTypeLabel('clt') },
+                  { value: 'pj', label: getCollaboratorTypeLabel('pj') },
+                  {
+                    value: 'freelancer',
+                    label: getCollaboratorTypeLabel('freelancer'),
+                  },
+                  {
+                    value: 'intern',
+                    label: getCollaboratorTypeLabel('intern'),
+                  },
+                  { value: 'other', label: getCollaboratorTypeLabel('other') },
+                ],
+              },
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: setStatusFilter,
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  { value: 'active', label: getStatusLabel('active') },
+                  { value: 'on_leave', label: getStatusLabel('on_leave') },
+                  { value: 'inactive', label: getStatusLabel('inactive') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
 
       {filteredRows.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{commonT('labels.collaborator')}</TableHead>
-                <TableHead>{commonT('labels.collaboratorType')}</TableHead>
-                <TableHead>{commonT('labels.title')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead>{commonT('labels.supervisor')}</TableHead>
-                <TableHead>{commonT('labels.weeklyCapacity')}</TableHead>
-                <TableHead>{commonT('labels.contractStatus')}</TableHead>
-                <TableHead>{commonT('labels.startDate')}</TableHead>
-                <TableHead className="w-[260px] text-right">
-                  {commonT('labels.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredRows.map((collaborator) => (
-                <TableRow key={collaborator.id}>
-                  <TableCell>
-                    <div className="font-medium">{collaborator.displayName}</div>
-                    <div className="text-xs text-muted-foreground">
-                      {collaborator.code}
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {filteredRows.map((collaborator) => (
+              <Card
+                key={collaborator.id}
+                className="overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <CardContent className="space-y-4 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex min-w-0 items-center gap-3">
+                      <Avatar className="h-12 w-12 border border-border/60 bg-muted">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(collaborator.personAvatarId)}
+                          alt={collaborator.displayName}
+                        />
+                        <AvatarFallback className="bg-muted text-sm font-semibold text-foreground">
+                          {getInitials(collaborator.displayName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <div className="truncate font-semibold">
+                          {collaborator.displayName}
+                        </div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {[collaborator.code, collaborator.title]
+                            .filter(Boolean)
+                            .join(' • ') || commonT('labels.notAvailable')}
+                        </div>
+                      </div>
                     </div>
-                  </TableCell>
-                  <TableCell>{formatEnumLabel(collaborator.collaboratorType)}</TableCell>
-                  <TableCell>
-                    {[collaborator.department, collaborator.title]
-                      .filter(Boolean)
-                      .join(' • ') || commonT('labels.notAvailable')}
-                  </TableCell>
-                  <TableCell>
                     <StatusBadge
-                      label={formatEnumLabel(collaborator.status)}
+                      label={getStatusLabel(collaborator.status)}
                       className={getStatusBadgeClass(collaborator.status)}
                     />
-                  </TableCell>
-                  <TableCell>
-                    {collaborator.supervisorName || commonT('labels.notAssigned')}
-                  </TableCell>
-                  <TableCell>{formatHours(collaborator.weeklyCapacityHours)}</TableCell>
-                  <TableCell>
-                    {collaborator.contractStatus ? (
-                      <StatusBadge
-                        label={formatEnumLabel(collaborator.contractStatus)}
-                        className={getStatusBadgeClass(collaborator.contractStatus)}
-                      />
-                    ) : (
-                      commonT('labels.notAssigned')
-                    )}
-                  </TableCell>
-                  <TableCell>{formatDate(collaborator.joinedAt)}</TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      <Button variant="outline" size="icon" asChild>
-                        <Link href={`/operations/collaborators/${collaborator.id}`}>
-                          <Eye className="size-4" />
-                        </Link>
-                      </Button>
-                      {access.isDirector ? (
-                        <Button variant="outline" size="icon" asChild>
-                          <Link href={`/operations/collaborators/${collaborator.id}/edit`}>
-                            <Pencil className="size-4" />
-                          </Link>
-                        </Button>
-                      ) : null}
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
+                      {getCollaboratorTypeLabel(collaborator.collaboratorType)}
+                    </span>
+                    {collaborator.department ? (
+                      <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+                        {collaborator.department}
+                      </span>
+                    ) : null}
+                  </div>
+
+                  <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.supervisor')}:
+                      </span>{' '}
+                      {collaborator.supervisorName ||
+                        commonT('labels.notAssigned')}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.weeklyCapacity')}:
+                      </span>{' '}
+                      {formatHours(collaborator.weeklyCapacityHours)}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.startDate')}:
+                      </span>{' '}
+                      {formatDate(
+                        collaborator.joinedAt,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.contractStatus')}:
+                      </span>
+                      {collaborator.contractStatus ? (
+                        <StatusBadge
+                          label={getStatusLabel(collaborator.contractStatus)}
+                          className={getStatusBadgeClass(
+                            collaborator.contractStatus
+                          )}
+                        />
+                      ) : (
+                        <span>{commonT('labels.notAssigned')}</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
+                    {access.isDirector ? (
                       <Button
                         variant="outline"
                         size="icon"
-                        asChild={Boolean(collaborator.contractId)}
-                        disabled={!collaborator.contractId}
+                        onClick={() => openEditSheet(collaborator.id)}
                       >
-                        {collaborator.contractId ? (
-                          <Link href={`/operations/contracts?edit=${collaborator.contractId}`}>
-                            <FileText className="size-4" />
-                          </Link>
-                        ) : (
-                          <span>
-                            <FileText className="size-4" />
-                          </span>
-                        )}
+                        <Pencil className="size-4" />
                       </Button>
-                      {access.isDirector ? (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => void toggleStatus(collaborator)}
+                    ) : null}
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      asChild={Boolean(collaborator.contractId)}
+                      disabled={!collaborator.contractId}
+                    >
+                      {collaborator.contractId ? (
+                        <Link
+                          href={`/operations/contracts?edit=${collaborator.contractId}`}
                         >
+                          <FileText className="size-4" />
+                        </Link>
+                      ) : (
+                        <span>
+                          <FileText className="size-4" />
+                        </span>
+                      )}
+                    </Button>
+                    {access.isDirector ? (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-1.5 px-2 sm:px-3"
+                        onClick={() => void toggleStatus(collaborator)}
+                      >
+                        <Power className="size-4" />
+                        <span className="hidden sm:inline">
                           {collaborator.status === 'inactive'
                             ? commonT('actions.activate')
                             : commonT('actions.deactivate')}
-                        </Button>
-                      ) : null}
-                    </div>
-                  </TableCell>
+                        </span>
+                      </Button>
+                    ) : null}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
+            <Table className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[34%]">
+                    {commonT('labels.collaborator')}
+                  </TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {commonT('labels.collaboratorType')}
+                  </TableHead>
+                  <TableHead className="hidden sm:table-cell">
+                    {commonT('labels.title')}
+                  </TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="hidden lg:table-cell">
+                    {commonT('labels.supervisor')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.weeklyCapacity')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {commonT('labels.contractStatus')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {commonT('labels.startDate')}
+                  </TableHead>
+                  <TableHead className="w-30 text-right sm:w-42.5">
+                    {commonT('labels.actions')}
+                  </TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((collaborator) => (
+                  <TableRow key={collaborator.id} className="hover:bg-muted/30">
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-9 w-9 border border-border/60 bg-muted">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(
+                              collaborator.personAvatarId
+                            )}
+                            alt={collaborator.displayName}
+                          />
+                          <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                            {getInitials(collaborator.displayName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0">
+                          <div className="truncate font-medium">
+                            {collaborator.displayName}
+                          </div>
+                          <div className="truncate text-xs text-muted-foreground">
+                            {[
+                              collaborator.code,
+                              collaborator.department,
+                              collaborator.title,
+                            ]
+                              .filter(Boolean)
+                              .join(' • ')}
+                          </div>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      {getCollaboratorTypeLabel(collaborator.collaboratorType)}
+                    </TableCell>
+                    <TableCell className="hidden max-w-55 sm:table-cell">
+                      <div className="truncate">
+                        {[collaborator.department, collaborator.title]
+                          .filter(Boolean)
+                          .join(' • ') || commonT('labels.notAvailable')}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={getStatusLabel(collaborator.status)}
+                        className={getStatusBadgeClass(collaborator.status)}
+                      />
+                    </TableCell>
+                    <TableCell className="hidden lg:table-cell">
+                      <div className="truncate">
+                        {collaborator.supervisorName ||
+                          commonT('labels.notAssigned')}
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatHours(collaborator.weeklyCapacityHours)}
+                    </TableCell>
+                    <TableCell className="hidden 2xl:table-cell">
+                      {collaborator.contractStatus ? (
+                        <StatusBadge
+                          label={getStatusLabel(collaborator.contractStatus)}
+                          className={getStatusBadgeClass(
+                            collaborator.contractStatus
+                          )}
+                        />
+                      ) : (
+                        commonT('labels.notAssigned')
+                      )}
+                    </TableCell>
+                    <TableCell className="hidden 2xl:table-cell">
+                      {formatDate(
+                        collaborator.joinedAt,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
+                        {access.isDirector ? (
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => openEditSheet(collaborator.id)}
+                          >
+                            <Pencil className="size-4" />
+                          </Button>
+                        ) : null}
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          asChild={Boolean(collaborator.contractId)}
+                          disabled={!collaborator.contractId}
+                        >
+                          {collaborator.contractId ? (
+                            <Link
+                              href={`/operations/contracts?edit=${collaborator.contractId}`}
+                            >
+                              <FileText className="size-4" />
+                            </Link>
+                          ) : (
+                            <span>
+                              <FileText className="size-4" />
+                            </span>
+                          )}
+                        </Button>
+                        {access.isDirector ? (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="gap-1.5 px-2 sm:px-3"
+                            onClick={() => void toggleStatus(collaborator)}
+                          >
+                            <Power className="size-4" />
+                            <span className="hidden sm:inline">
+                              {collaborator.status === 'inactive'
+                                ? commonT('actions.activate')
+                                : commonT('actions.deactivate')}
+                            </span>
+                          </Button>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
       ) : (
         <EmptyState
           icon={<UserRound className="size-12" />}
           title={commonT('states.emptyTitle')}
           description={t('emptyDescription')}
-          actionLabel={access.isDirector ? commonT('actions.create') : commonT('actions.refresh')}
-          onAction={
+          actionLabel={
             access.isDirector
-              ? () => {
-                  window.location.href = '/operations/collaborators/new';
-                }
-              : () => void refetch()
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
           }
+          onAction={access.isDirector ? openCreateSheet : () => void refetch()}
         />
       )}
+
+      <Sheet
+        open={isCreateSheetOpen || editingCollaboratorId !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeFormSheet();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-6xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingCollaboratorId
+                ? t('sheet.editTitle')
+                : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <CollaboratorFormScreen
+            key={
+              editingCollaboratorId ? `edit-${editingCollaboratorId}` : 'create'
+            }
+            collaboratorId={editingCollaboratorId ?? undefined}
+            onCancel={closeFormSheet}
+            onSaved={async () => {
+              closeFormSheet();
+              await refetch();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
     </Page>
   );
 }