@hed-hog/operations 0.0.302 → 0.0.304

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,28 @@ 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 +209,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 +223,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 +245,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 +292,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 +318,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 +379,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 +413,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 +440,14 @@ export default function OperationsCollaboratorsPage() {
                       </span>{' '}
                       {formatHours(collaborator.weeklyCapacityHours)}
                     </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {formT('fields.compensationAmount')}:
+                      </span>{' '}
+                      {collaborator.compensationAmount != null
+                        ? formatCurrency(collaborator.compensationAmount)
+                        : commonT('labels.notAvailable')}
+                    </div>
                     <div>
                       <span className="font-medium text-foreground">
                         {commonT('labels.startDate')}:
@@ -443,22 +458,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 +544,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 +556,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">
@@ -564,16 +582,46 @@ export default function OperationsCollaboratorsPage() {
                             {[
                               collaborator.code,
                               collaborator.department,
-                              collaborator.title,
                             ]
                               .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 +646,11 @@ 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(collaborator.compensationAmount)
+                        : commonT('labels.notAvailable')}
                     </TableCell>
-                    <TableCell className="hidden 2xl:table-cell">
+                    <TableCell className="hidden xl:table-cell">
                       {formatDate(
                         collaborator.joinedAt,
                         getSettingValue,

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

@@ -722,111 +722,108 @@ export default function OperationsContractsPage() {
             })}
           </div>
         ) : (
-          <Card className="overflow-hidden border-border/60 py-0 shadow-sm">
-            <CardContent className="p-0">
-              <Table className="table-fixed">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[34%]">
-                      {t('columns.title')}
-                    </TableHead>
-                    <TableHead>{commonT('labels.status')}</TableHead>
-                    <TableHead className="hidden md:table-cell">
-                      {t('columns.signatureStatus')}
-                    </TableHead>
-                    <TableHead className="hidden lg:table-cell">
-                      {t('columns.type')}
-                    </TableHead>
-                    <TableHead className="hidden xl:table-cell">
-                      {commonT('labels.client')}
-                    </TableHead>
-                    <TableHead className="hidden 2xl:table-cell">
-                      {t('columns.financials')}
-                    </TableHead>
-                    <TableHead className="w-30 text-right sm:w-42.5">
-                      {commonT('labels.actions')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredRows.map((contract) => {
-                    const financialTotal =
-                      (contract.valueAmount ?? 0) +
-                      (contract.revenueAmount ?? 0);
-
-                    return (
-                      <TableRow key={contract.id} className="hover:bg-muted/30">
-                        <TableCell>
-                          <div className="min-w-0">
-                            <div className="truncate font-medium">
-                              {contract.name ||
-                                contract.code ||
-                                commonT('labels.notAvailable')}
-                            </div>
-                            <div className="truncate text-xs text-muted-foreground">
-                              {[
-                                contract.code,
-                                contract.contractTemplateName,
-                                contract.mainRelatedPartyName,
-                                getContractOptionLabel(
-                                  'originTypes',
-                                  contract.originType
-                                ),
-                              ]
-                                .filter(Boolean)
-                                .join(' • ') || commonT('labels.notAvailable')}
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <StatusBadge
-                            label={getContractOptionLabel(
-                              'statuses',
-                              contract.status
-                            )}
-                            className={getStatusBadgeClass(contract.status)}
-                          />
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          <StatusBadge
-                            label={getContractOptionLabel(
-                              'signatureStatuses',
-                              contract.signatureStatus
-                            )}
-                            className={getStatusBadgeClass(
-                              contract.signatureStatus
-                            )}
-                          />
-                        </TableCell>
-                        <TableCell className="hidden lg:table-cell">
-                          <div className="truncate">
-                            {getContractOptionLabel(
-                              'contractTypes',
-                              contract.contractType
-                            )}
-                          </div>
-                        </TableCell>
-                        <TableCell className="hidden xl:table-cell">
-                          <div className="truncate">
-                            {contract.clientName ||
+          <div className="overflow-x-auto rounded-md border">
+            <Table className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[34%]">
+                    {t('columns.title')}
+                  </TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {t('columns.signatureStatus')}
+                  </TableHead>
+                  <TableHead className="hidden lg:table-cell">
+                    {t('columns.type')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.client')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {t('columns.financials')}
+                  </TableHead>
+                  <TableHead className="w-30 text-right sm:w-42.5">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((contract) => {
+                  const financialTotal =
+                    (contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0);
+
+                  return (
+                    <TableRow key={contract.id} className="hover:bg-muted/30">
+                      <TableCell>
+                        <div className="min-w-0">
+                          <div className="truncate font-medium">
+                            {contract.name ||
+                              contract.code ||
                               commonT('labels.notAvailable')}
                           </div>
-                        </TableCell>
-                        <TableCell className="hidden 2xl:table-cell">
-                          {formatCurrency(financialTotal)}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex justify-end">
-                            {renderContractActions(contract, 'end')}
+                          <div className="truncate text-xs text-muted-foreground">
+                            {[
+                              contract.code,
+                              contract.contractTemplateName,
+                              contract.mainRelatedPartyName,
+                              getContractOptionLabel(
+                                'originTypes',
+                                contract.originType
+                              ),
+                            ]
+                              .filter(Boolean)
+                              .join(' • ') || commonT('labels.notAvailable')}
                           </div>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={getContractOptionLabel(
+                            'statuses',
+                            contract.status
+                          )}
+                          className={getStatusBadgeClass(contract.status)}
+                        />
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell">
+                        <StatusBadge
+                          label={getContractOptionLabel(
+                            'signatureStatuses',
+                            contract.signatureStatus
+                          )}
+                          className={getStatusBadgeClass(
+                            contract.signatureStatus
+                          )}
+                        />
+                      </TableCell>
+                      <TableCell className="hidden lg:table-cell">
+                        <div className="truncate">
+                          {getContractOptionLabel(
+                            'contractTypes',
+                            contract.contractType
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden xl:table-cell">
+                        <div className="truncate">
+                          {contract.clientName ||
+                            commonT('labels.notAvailable')}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden 2xl:table-cell">
+                        {formatCurrency(financialTotal)}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end">
+                          {renderContractActions(contract, 'end')}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
         )
       ) : (
         <EmptyState