@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+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';
@@ -44,7 +49,9 @@ 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,
@@ -91,6 +98,8 @@ export default function OperationsCollaboratorsPage() {
   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';
@@ -154,16 +163,43 @@ export default function OperationsCollaboratorsPage() {
     }
   };
 
-  const { data: collaborators = [], refetch } = useQuery<
-    OperationsCollaborator[]
+  const { data: collaboratorsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsCollaborator>
   >({
-    queryKey: ['operations-collaborators-list', currentLocaleCode],
+    queryKey: [
+      'operations-collaborators-list',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      typeFilter,
+      page,
+      pageSize,
+    ],
     enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(
+    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'
-      ),
+        `/operations/collaborators?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
   });
 
   const { data: collaboratorTypes = [] } = useQuery<
@@ -178,6 +214,41 @@ export default function OperationsCollaboratorsPage() {
       ),
   });
 
+  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
@@ -190,35 +261,8 @@ export default function OperationsCollaboratorsPage() {
     return matchedType?.name ?? formatEnumLabel(slug);
   };
 
-  const filteredRows = useMemo(
-    () =>
-      collaborators.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.displayName,
-              item.code,
-              item.department,
-              item.title,
-              item.supervisorName,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-        const matchesType =
-          typeFilter === 'all'
-            ? true
-            : item.collaboratorTypeSlug === typeFilter ||
-              item.collaboratorType === typeFilter;
-        return matchesSearch && matchesStatus && matchesType;
-      }),
-    [collaborators, search, statusFilter, typeFilter]
-  );
+  const collaborators = collaboratorsResponse?.data ?? [];
+  const filteredRows = collaborators;
 
   const statsCards = useMemo(
     () => [
@@ -226,33 +270,32 @@ export default function OperationsCollaboratorsPage() {
         key: 'total',
         title: t('cards.total'),
         description: t('cards.totalDescription'),
-        value: collaborators.length,
+        value: collaboratorStats?.total ?? 0,
         icon: Users,
       },
       {
         key: 'active',
         title: t('cards.active'),
         description: t('cards.activeDescription'),
-        value: collaborators.filter((item) => item.status === 'active').length,
+        value: collaboratorStats?.active ?? 0,
         icon: UserCheck,
       },
       {
         key: 'onLeave',
         title: t('cards.onLeave'),
         description: t('cards.onLeaveDescription'),
-        value: collaborators.filter((item) => item.status === 'on_leave')
-          .length,
+        value: collaboratorStats?.onLeave ?? 0,
         icon: CalendarDays,
       },
       {
         key: 'withContracts',
         title: t('cards.withContracts'),
         description: t('cards.withContractsDescription'),
-        value: collaborators.filter((item) => Boolean(item.contractId)).length,
+        value: collaboratorStats?.withContracts ?? 0,
         icon: FileText,
       },
     ],
-    [collaborators, t]
+    [collaboratorStats, t]
   );
 
   const handleViewModeChange = (value: string) => {
@@ -308,15 +351,22 @@ export default function OperationsCollaboratorsPage() {
         <div className="flex-1">
           <SearchBar
             searchQuery={search}
-            onSearchChange={setSearch}
-            onSearch={() => undefined}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
             placeholder={t('searchPlaceholder')}
             controls={[
               {
                 id: 'type',
                 type: 'select',
                 value: typeFilter,
-                onChange: setTypeFilter,
+                onChange: (value) => {
+                  setTypeFilter(value);
+                  setPage(1);
+                },
                 placeholder: commonT('labels.collaboratorType'),
                 options: [
                   { value: 'all', label: commonT('filters.allTypes') },
@@ -330,7 +380,10 @@ export default function OperationsCollaboratorsPage() {
                 id: 'status',
                 type: 'select',
                 value: statusFilter,
-                onChange: setStatusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
                 placeholder: commonT('labels.status'),
                 options: [
                   { value: 'all', label: commonT('filters.allStatuses') },
@@ -448,7 +501,9 @@ export default function OperationsCollaboratorsPage() {
                       </span>{' '}
                       {collaborator.compensationAmount != null
                         ? formatCurrency(
-                            Number(collaborator.compensationAmount)
+                            Number(collaborator.compensationAmount),
+                            getSettingValue,
+                            currentLocaleCode
                           )
                         : commonT('labels.notAvailable')}
                     </div>
@@ -649,7 +704,9 @@ export default function OperationsCollaboratorsPage() {
                     <TableCell className="hidden 2xl:table-cell">
                       {collaborator.compensationAmount != null
                         ? formatCurrency(
-                            Number(collaborator.compensationAmount)
+                            Number(collaborator.compensationAmount),
+                            getSettingValue,
+                            currentLocaleCode
                           )
                         : commonT('labels.notAvailable')}
                     </TableCell>
@@ -726,6 +783,18 @@ export default function OperationsCollaboratorsPage() {
         />
       )}
 
+      <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) => {

package/hedhog/frontend/app/contracts/[id]/page.tsx.ejs

@@ -1,4 +1,4 @@
-import { redirect } from 'next/navigation';
+import { ContractDetailsScreen } from '../../_components/contract-details-screen';
 
 export default async function OperationsContractDetailsPage({
   params,
@@ -7,5 +7,5 @@ export default async function OperationsContractDetailsPage({
 }) {
   const { id } = await params;
 
-  redirect(`/operations/contracts?edit=${id}`);
+  return <ContractDetailsScreen contractId={Number(id)} />;
 }