@hed-hog/operations 0.0.303 → 0.0.305

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

@@ -23,7 +23,6 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
-  Building2,
   CalendarDays,
   FileText,
   LayoutGrid,
@@ -43,8 +42,12 @@ 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 } from '../_lib/types';
+import type {
+  OperationsCollaborator,
+  OperationsCollaboratorType,
+} from '../_lib/types';
 import {
+  formatCurrency,
   formatDate,
   formatEnumLabel,
   formatHours,
@@ -136,23 +139,6 @@ export default function OperationsCollaboratorsPage() {
     }
   };
 
-  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':
@@ -180,6 +166,30 @@ export default function OperationsCollaboratorsPage() {
       ),
   });
 
+  const { data: collaboratorTypes = [] } = useQuery<
+    OperationsCollaboratorType[]
+  >({
+    queryKey: ['operations-collaborator-types-list', currentLocaleCode],
+    enabled: access.isCollaborator,
+    queryFn: () =>
+      fetchOperations<OperationsCollaboratorType[]>(
+        request,
+        '/operations/collaborator-types?active=true'
+      ),
+  });
+
+  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 filteredRows = useMemo(
     () =>
       collaborators.filter((item) => {
@@ -201,7 +211,10 @@ export default function OperationsCollaboratorsPage() {
         const matchesStatus =
           statusFilter === 'all' ? true : item.status === statusFilter;
         const matchesType =
-          typeFilter === 'all' ? true : item.collaboratorType === typeFilter;
+          typeFilter === 'all'
+            ? true
+            : item.collaboratorTypeSlug === typeFilter ||
+              item.collaboratorType === typeFilter;
         return matchesSearch && matchesStatus && matchesType;
       }),
     [collaborators, search, statusFilter, typeFilter]
@@ -212,18 +225,21 @@ export default function OperationsCollaboratorsPage() {
       {
         key: 'total',
         title: t('cards.total'),
+        description: t('cards.totalDescription'),
         value: collaborators.length,
         icon: Users,
       },
       {
         key: 'active',
         title: t('cards.active'),
+        description: t('cards.activeDescription'),
         value: collaborators.filter((item) => item.status === 'active').length,
         icon: UserCheck,
       },
       {
         key: 'onLeave',
         title: t('cards.onLeave'),
+        description: t('cards.onLeaveDescription'),
         value: collaborators.filter((item) => item.status === 'on_leave')
           .length,
         icon: CalendarDays,
@@ -231,6 +247,7 @@ export default function OperationsCollaboratorsPage() {
       {
         key: 'withContracts',
         title: t('cards.withContracts'),
+        description: t('cards.withContractsDescription'),
         value: collaborators.filter((item) => Boolean(item.contractId)).length,
         icon: FileText,
       },
@@ -277,12 +294,6 @@ export default function OperationsCollaboratorsPage() {
         actions={
           access.isDirector ? (
             <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')}
               </Button>
@@ -309,17 +320,10 @@ export default function OperationsCollaboratorsPage() {
                 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') },
+                  ...collaboratorTypes.map((item) => ({
+                    value: item.slug,
+                    label: item.name,
+                  })),
                 ],
               },
               {
@@ -377,7 +381,8 @@ export default function OperationsCollaboratorsPage() {
             {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"
+                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">
@@ -410,7 +415,11 @@ export default function OperationsCollaboratorsPage() {
 
                   <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)}
+                      {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">
@@ -433,6 +442,16 @@ export default function OperationsCollaboratorsPage() {
                       </span>{' '}
                       {formatHours(collaborator.weeklyCapacityHours)}
                     </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {formT('fields.compensationAmount')}:
+                      </span>{' '}
+                      {collaborator.compensationAmount != null
+                        ? formatCurrency(
+                            Number(collaborator.compensationAmount)
+                          )
+                        : commonT('labels.notAvailable')}
+                    </div>
                     <div>
                       <span className="font-medium text-foreground">
                         {commonT('labels.startDate')}:
@@ -443,22 +462,21 @@ export default function OperationsCollaboratorsPage() {
                         currentLocaleCode
                       )}
                     </div>
-                    <div className="flex items-center gap-2">
+                  </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>
-                      {collaborator.contractStatus ? (
-                        <StatusBadge
-                          label={getStatusLabel(collaborator.contractStatus)}
-                          className={getStatusBadgeClass(
-                            collaborator.contractStatus
-                          )}
-                        />
-                      ) : (
-                        <span>{commonT('labels.notAssigned')}</span>
-                      )}
+                      <StatusBadge
+                        label={getStatusLabel(collaborator.contractStatus)}
+                        className={getStatusBadgeClass(
+                          collaborator.contractStatus
+                        )}
+                      />
                     </div>
-                  </div>
+                  ) : null}
 
                   <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
                     {access.isDirector ? (
@@ -530,9 +548,9 @@ export default function OperationsCollaboratorsPage() {
                     {commonT('labels.weeklyCapacity')}
                   </TableHead>
                   <TableHead className="hidden 2xl:table-cell">
-                    {commonT('labels.contractStatus')}
+                    {formT('fields.compensationAmount')}
                   </TableHead>
-                  <TableHead className="hidden 2xl:table-cell">
+                  <TableHead className="hidden xl:table-cell">
                     {commonT('labels.startDate')}
                   </TableHead>
                   <TableHead className="w-30 text-right sm:w-42.5">
@@ -542,7 +560,11 @@ export default function OperationsCollaboratorsPage() {
               </TableHeader>
               <TableBody>
                 {filteredRows.map((collaborator) => (
-                  <TableRow key={collaborator.id} className="hover:bg-muted/30">
+                  <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">
@@ -561,19 +583,46 @@ export default function OperationsCollaboratorsPage() {
                             {collaborator.displayName}
                           </div>
                           <div className="truncate text-xs text-muted-foreground">
-                            {[
-                              collaborator.code,
-                              collaborator.department,
-                              collaborator.title,
-                            ]
+                            {[collaborator.code, collaborator.department]
                               .filter(Boolean)
-                              .join(' • ')}
+                              .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.collaboratorType)}
+                      {getCollaboratorTypeLabel(
+                        collaborator.collaboratorTypeSlug ??
+                          collaborator.collaboratorType,
+                        collaborator.collaboratorTypeName
+                      )}
                     </TableCell>
                     <TableCell className="hidden max-w-55 sm:table-cell">
                       <div className="truncate">
@@ -598,18 +647,13 @@ export default function OperationsCollaboratorsPage() {
                       {formatHours(collaborator.weeklyCapacityHours)}
                     </TableCell>
                     <TableCell className="hidden 2xl:table-cell">
-                      {collaborator.contractStatus ? (
-                        <StatusBadge
-                          label={getStatusLabel(collaborator.contractStatus)}
-                          className={getStatusBadgeClass(
-                            collaborator.contractStatus
-                          )}
-                        />
-                      ) : (
-                        commonT('labels.notAssigned')
-                      )}
+                      {collaborator.compensationAmount != null
+                        ? formatCurrency(
+                            Number(collaborator.compensationAmount)
+                          )
+                        : commonT('labels.notAvailable')}
                     </TableCell>
-                    <TableCell className="hidden 2xl:table-cell">
+                    <TableCell className="hidden xl:table-cell">
                       {formatDate(
                         collaborator.joinedAt,
                         getSettingValue,