@hed-hog/operations 0.0.328 → 0.0.330

package/hedhog/frontend/src/app/(app)/(libraries)/operations/collaborators/page.tsx

@@ -1,939 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  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,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  CalendarDays,
-  FileText,
-  Info,
-  LayoutGrid,
-  List,
-  Pencil,
-  Power,
-  TrendingUp,
-  UserCheck,
-  UserRound,
-  Users,
-  Wallet,
-} 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 { CollaboratorFormScreen } from '../_components/collaborator-form-screen';
-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 {
-  OperationsCollaborator,
-  OperationsCollaboratorStats,
-  OperationsCollaboratorType,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatCurrency,
-  formatDate,
-  formatEnumLabel,
-  formatHours,
-  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, 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 [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  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 openCreateSheet = () => {
-    setIsCreateSheetOpen(true);
-    updateSheetQuery(null);
-  };
-
-  const openEditSheet = (collaboratorId: number) => {
-    setIsCreateSheetOpen(false);
-    updateSheetQuery(collaboratorId);
-  };
-
-  const closeFormSheet = () => {
-    setIsCreateSheetOpen(false);
-
-    if (editingCollaboratorId !== null) {
-      updateSheetQuery(null);
-    }
-  };
-
-  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: collaboratorsResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsCollaborator>
-  >({
-    queryKey: [
-      'operations-collaborators-list',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      typeFilter,
-      page,
-      pageSize,
-    ],
-    enabled: access.isCollaborator,
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: String(page),
-        pageSize: String(pageSize),
-      });
-
-      if (search.trim()) {
-        params.set('search', search.trim());
-      }
-
-      if (statusFilter !== 'all') {
-        params.set('status', statusFilter);
-      }
-
-      if (typeFilter !== 'all') {
-        params.set('collaboratorType', typeFilter);
-      }
-
-      return fetchOperations<PaginatedResponse<OperationsCollaborator>>(
-        request,
-        `/operations/collaborators?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const { data: collaboratorTypes = [] } = useQuery<
-    OperationsCollaboratorType[]
-  >({
-    queryKey: ['operations-collaborator-types-list', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsCollaboratorType[]>(
-        request,
-        '/operations/collaborator-types?active=true'
-      ),
-  });
-
-  const { data: collaboratorStats } = useQuery<OperationsCollaboratorStats>({
-    queryKey: [
-      'operations-collaborators-stats',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      typeFilter,
-    ],
-    enabled: access.isCollaborator,
-    queryFn: () => {
-      const params = new URLSearchParams();
-
-      if (search.trim()) {
-        params.set('search', search.trim());
-      }
-
-      if (statusFilter !== 'all') {
-        params.set('status', statusFilter);
-      }
-
-      if (typeFilter !== 'all') {
-        params.set('collaboratorType', typeFilter);
-      }
-
-      const query = params.toString();
-
-      return fetchOperations<OperationsCollaboratorStats>(
-        request,
-        query
-          ? `/operations/collaborators/stats?${query}`
-          : '/operations/collaborators/stats'
-      );
-    },
-  });
-
-  const getCollaboratorTypeLabel = (
-    slug?: string | null,
-    fallbackName?: string | null
-  ) => {
-    if (fallbackName) {
-      return fallbackName;
-    }
-
-    const matchedType = collaboratorTypes.find((item) => item.slug === slug);
-    return matchedType?.name ?? formatEnumLabel(slug);
-  };
-
-  const collaborators = collaboratorsResponse?.data ?? [];
-  const filteredRows = collaborators;
-
-  const statsCards = useMemo(() => {
-    const withTooltip = (description: string, tooltip: string) => (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="inline-flex cursor-default items-center gap-1">
-              {description}
-              <Info className="h-3 w-3 shrink-0 text-muted-foreground/60" />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="max-w-64 text-xs">
-            {tooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-
-    return [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        description: withTooltip(
-          t('cards.totalDescription'),
-          t('cards.totalTooltip')
-        ),
-        value: collaboratorStats?.total ?? 0,
-        icon: Users,
-      },
-      {
-        key: 'active',
-        title: t('cards.active'),
-        description: withTooltip(
-          t('cards.activeDescription'),
-          t('cards.activeTooltip')
-        ),
-        value: collaboratorStats?.active ?? 0,
-        icon: UserCheck,
-      },
-      {
-        key: 'onLeave',
-        title: t('cards.onLeave'),
-        description: withTooltip(
-          t('cards.onLeaveDescription'),
-          t('cards.onLeaveTooltip')
-        ),
-        value: collaboratorStats?.onLeave ?? 0,
-        icon: CalendarDays,
-      },
-      {
-        key: 'withContracts',
-        title: t('cards.withContracts'),
-        description: withTooltip(
-          t('cards.withContractsDescription'),
-          t('cards.withContractsTooltip')
-        ),
-        value: collaboratorStats?.withContracts ?? 0,
-        icon: FileText,
-      },
-      {
-        key: 'totalSalary',
-        title: t('cards.totalSalary'),
-        description: withTooltip(
-          t('cards.totalSalaryDescription'),
-          t('cards.totalSalaryTooltip')
-        ),
-        value: formatCurrency(
-          collaboratorStats?.totalSalary ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
-        icon: Wallet,
-        accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
-        iconContainerClassName:
-          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
-      },
-      {
-        key: 'totalCosts',
-        title: t('cards.totalCosts'),
-        description: withTooltip(
-          t('cards.totalCostsDescription'),
-          t('cards.totalCostsTooltip')
-        ),
-        value: formatCurrency(
-          collaboratorStats?.totalCosts ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
-        icon: TrendingUp,
-        accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
-        iconContainerClassName:
-          'bg-amber-500/10 text-amber-700 dark:text-amber-400',
-      },
-      {
-        key: 'avgSalaryPlusCosts',
-        title: t('cards.avgSalaryPlusCosts'),
-        description: withTooltip(
-          t('cards.avgSalaryPlusCostsDescription'),
-          t('cards.avgSalaryPlusCostsTooltip')
-        ),
-        value: formatCurrency(
-          collaboratorStats?.avgSalaryPlusCosts ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
-        icon: Wallet,
-        accentClassName: 'from-violet-500/20 via-purple-500/10 to-transparent',
-        iconContainerClassName:
-          'bg-violet-500/10 text-violet-700 dark:text-violet-400',
-      },
-      {
-        key: 'avgSalaryPlusCostsPerCollaborator',
-        title: t('cards.avgSalaryPlusCostsPerCollaborator'),
-        description: withTooltip(
-          t('cards.avgSalaryPlusCostsPerCollaboratorDescription'),
-          t('cards.avgSalaryPlusCostsPerCollaboratorTooltip')
-        ),
-        value: formatCurrency(
-          collaboratorStats?.avgSalaryPlusCostsPerCollaborator ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
-        icon: TrendingUp,
-        accentClassName: 'from-rose-500/20 via-pink-500/10 to-transparent',
-        iconContainerClassName:
-          'bg-rose-500/10 text-rose-700 dark:text-rose-400',
-      },
-    ];
-  }, [
-    collaboratorStats,
-    t,
-    formatCurrency,
-    getSettingValue,
-    currentLocaleCode,
-  ]);
-
-  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';
-
-    try {
-      await mutateOperations(
-        request,
-        `/operations/collaborators/${collaborator.id}`,
-        'PATCH',
-        { status: nextStatus }
-      );
-      showToastHandler?.('success', t('messages.statusSuccess'));
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.statusError'));
-    }
-  };
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isDirector ? (
-            <div className="flex flex-wrap gap-2">
-              <Button size="sm" onClick={openCreateSheet}>
-                {commonT('actions.create')}
-              </Button>
-            </div>
-          ) : undefined
-        }
-      />
-
-      <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={(value) => {
-              setSearch(value);
-              setPage(1);
-            }}
-            showSearchButton={false}
-            debounceMs={500}
-            placeholder={t('searchPlaceholder')}
-            controls={[
-              {
-                id: 'type',
-                type: 'select',
-                value: typeFilter,
-                onChange: (value) => {
-                  setTypeFilter(value);
-                  setPage(1);
-                },
-                placeholder: commonT('labels.collaboratorType'),
-                options: [
-                  { value: 'all', label: commonT('filters.allTypes') },
-                  ...collaboratorTypes.map((item) => ({
-                    value: item.slug,
-                    label: item.name,
-                  })),
-                ],
-              },
-              {
-                id: 'status',
-                type: 'select',
-                value: statusFilter,
-                onChange: (value) => {
-                  setStatusFilter(value);
-                  setPage(1);
-                },
-                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 ? (
-        viewMode === 'cards' ? (
-          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {filteredRows.map((collaborator) => (
-              <Card
-                key={collaborator.id}
-                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
-                onClick={() => openEditSheet(collaborator.id)}
-              >
-                <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>
-                    <StatusBadge
-                      label={getStatusLabel(collaborator.status)}
-                      className={getStatusBadgeClass(collaborator.status)}
-                    />
-                  </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.collaboratorTypeSlug ??
-                          collaborator.collaboratorType,
-                        collaborator.collaboratorTypeName
-                      )}
-                    </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">
-                        {formT('fields.compensationAmount')}:
-                      </span>{' '}
-                      {collaborator.compensationAmount != null
-                        ? formatCurrency(
-                            Number(collaborator.compensationAmount),
-                            getSettingValue,
-                            currentLocaleCode
-                          )
-                        : commonT('labels.notAvailable')}
-                    </div>
-                    <div>
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.startDate')}:
-                      </span>{' '}
-                      {formatDate(
-                        collaborator.joinedAt,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </div>
-                  </div>
-
-                  {collaborator.contractStatus ? (
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.contractStatus')}:
-                      </span>
-                      <StatusBadge
-                        label={getStatusLabel(collaborator.contractStatus)}
-                        className={getStatusBadgeClass(
-                          collaborator.contractStatus
-                        )}
-                      />
-                    </div>
-                  ) : null}
-
-                  <div className="flex items-center justify-end gap-1.5 border-t border-border/60 pt-3">
-                    {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="icon"
-                        onClick={() => void toggleStatus(collaborator)}
-                        title={
-                          collaborator.status === 'inactive'
-                            ? commonT('actions.activate')
-                            : commonT('actions.deactivate')
-                        }
-                      >
-                        <Power className="size-4" />
-                      </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">
-                    {formT('fields.compensationAmount')}
-                  </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.startDate')}
-                  </TableHead>
-                  <TableHead className="w-30 text-right sm:w-42.5">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredRows.map((collaborator) => (
-                  <TableRow
-                    key={collaborator.id}
-                    className="cursor-pointer hover:bg-muted/30"
-                    onClick={() => openEditSheet(collaborator.id)}
-                  >
-                    <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]
-                              .filter(Boolean)
-                              .join(' • ') ||
-                              collaborator.title ||
-                              commonT('labels.notAvailable')}
-                          </div>
-                          <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground lg:hidden">
-                            <span>
-                              <span className="font-medium text-foreground/80">
-                                {commonT('labels.supervisor')}:
-                              </span>{' '}
-                              {collaborator.supervisorName ||
-                                commonT('labels.notAssigned')}
-                            </span>
-                            <span>
-                              <span className="font-medium text-foreground/80">
-                                {commonT('labels.weeklyCapacity')}:
-                              </span>{' '}
-                              {formatHours(collaborator.weeklyCapacityHours)}
-                            </span>
-                            <span>
-                              <span className="font-medium text-foreground/80">
-                                {commonT('labels.startDate')}:
-                              </span>{' '}
-                              {formatDate(
-                                collaborator.joinedAt,
-                                getSettingValue,
-                                currentLocaleCode
-                              )}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell">
-                      {getCollaboratorTypeLabel(
-                        collaborator.collaboratorTypeSlug ??
-                          collaborator.collaboratorType,
-                        collaborator.collaboratorTypeName
-                      )}
-                    </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.compensationAmount != null
-                        ? formatCurrency(
-                            Number(collaborator.compensationAmount),
-                            getSettingValue,
-                            currentLocaleCode
-                          )
-                        : commonT('labels.notAvailable')}
-                    </TableCell>
-                    <TableCell className="hidden xl:table-cell">
-                      {formatDate(
-                        collaborator.joinedAt,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center justify-end gap-1.5">
-                        {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="icon"
-                            onClick={() => void toggleStatus(collaborator)}
-                            title={
-                              collaborator.status === 'inactive'
-                                ? commonT('actions.activate')
-                                : commonT('actions.deactivate')
-                            }
-                          >
-                            <Power className="size-4" />
-                          </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={access.isDirector ? openCreateSheet : () => void refetch()}
-        />
-      )}
-
-      <PaginationFooter
-        currentPage={collaboratorsResponse?.page ?? page}
-        pageSize={collaboratorsResponse?.pageSize ?? pageSize}
-        totalItems={collaboratorsResponse?.total ?? 0}
-        onPageChange={setPage}
-        onPageSizeChange={(value) => {
-          setPageSize(value);
-          setPage(1);
-        }}
-        pageSizeOptions={[12, 24, 48]}
-      />
-
-      <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>
-  );
-}