fix: pagination visibility based on totalCount

- Add totalCount prop to PaginationControlProps
- Update PaginationControl to show/hide based on total items:
  - Hide when totalCount is 0 (empty state)
  - Hide when totalCount <= 5 (minimum page size)
  - Show when totalCount > 5 (user can adjust page size)
  - Show when totalCount undefined (fallback)
- Pass totalCount from x-total-count header in all list components
- Remove unused usePagination hook

Author: jeffredodd

src/components/Common/PaginationControl/PaginationControl.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react'
+import { describe, test, expect, vi } from 'vitest'
+import { PaginationControl } from './PaginationControl'
+import type { PaginationControlProps } from './PaginationControlTypes'
+import { ThemeProvider } from '@/contexts/ThemeProvider'
+import { ComponentsProvider } from '@/contexts/ComponentAdapter/ComponentsProvider'
+import { defaultComponents } from '@/contexts/ComponentAdapter/adapters/defaultComponentAdapter'
+
+const basePaginationProps: PaginationControlProps = {
+  currentPage: 1,
+  totalPages: 3,
+  itemsPerPage: 5,
+  handleFirstPage: vi.fn(),
+  handlePreviousPage: vi.fn(),
+  handleNextPage: vi.fn(),
+  handleLastPage: vi.fn(),
+  handleItemsPerPageChange: vi.fn(),
+}
+
+const renderPaginationControl = (props: Partial<PaginationControlProps> = {}) => {
+  return render(
+    <ThemeProvider>
+      <ComponentsProvider value={defaultComponents}>
+        <PaginationControl {...basePaginationProps} {...props} />
+      </ComponentsProvider>
+    </ThemeProvider>,
+  )
+}
+
+describe('PaginationControl Visibility', () => {
+  describe('based on totalCount', () => {
+    test('hides when totalCount is 0 (empty state)', () => {
+      renderPaginationControl({ totalCount: 0 })
+      expect(screen.queryByTestId('pagination-control')).not.toBeInTheDocument()
+    })
+
+    test('hides when totalCount <= MINIMUM_PAGE_SIZE (5)', () => {
+      renderPaginationControl({ totalCount: 5 })
+      expect(screen.queryByTestId('pagination-control')).not.toBeInTheDocument()
+    })
+
+    test('hides when totalCount is 3 (less than min page size)', () => {
+      renderPaginationControl({ totalCount: 3 })
+      expect(screen.queryByTestId('pagination-control')).not.toBeInTheDocument()
+    })
+
+    test('shows when totalCount > MINIMUM_PAGE_SIZE', () => {
+      renderPaginationControl({ totalCount: 6 })
+      expect(screen.getByTestId('pagination-control')).toBeInTheDocument()
+    })
+
+    test('shows when totalCount is undefined (server info unavailable)', () => {
+      renderPaginationControl({ totalCount: undefined })
+      expect(screen.getByTestId('pagination-control')).toBeInTheDocument()
+    })
+
+    test('shows when totalCount is large', () => {
+      renderPaginationControl({ totalCount: 100 })
+      expect(screen.getByTestId('pagination-control')).toBeInTheDocument()
+    })
+  })
+
+  describe('edge cases', () => {
+    test('shows pagination when totalCount > 5 even with totalPages = 1', () => {
+      renderPaginationControl({ totalCount: 10, totalPages: 1, itemsPerPage: 50 })
+      expect(screen.getByTestId('pagination-control')).toBeInTheDocument()
+    })
+
+    test('hides when totalCount is exactly 5', () => {
+      renderPaginationControl({ totalCount: 5, totalPages: 1 })
+      expect(screen.queryByTestId('pagination-control')).not.toBeInTheDocument()
+    })
+  })
+})

src/components/Common/PaginationControl/PaginationControl.tsx

@@ -9,9 +9,18 @@ import PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'
 import PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'
 import PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'
 
+const MINIMUM_PAGE_SIZE = 5
+
+const shouldShowPagination = (totalCount: number | undefined): boolean => {
+  if (totalCount === undefined) return true
+  if (totalCount === 0) return false
+  return totalCount > MINIMUM_PAGE_SIZE
+}
+
 const DefaultPaginationControl = ({
   currentPage,
   totalPages,
+  totalCount,
   isFetching,
   handleFirstPage,
   handlePreviousPage,
@@ -23,7 +32,7 @@ const DefaultPaginationControl = ({
   const { t } = useTranslation('common')
   const Components = useComponentContext()
 
-  if (totalPages < 2) {
+  if (!shouldShowPagination(totalCount)) {
     return null
   }
 

src/components/Common/PaginationControl/PaginationControlTypes.ts

@@ -8,6 +8,7 @@ export type PaginationControlProps = {
   handleItemsPerPageChange: (n: PaginationItemsPerPage) => void
   currentPage: number
   totalPages: number
+  totalCount?: number
   itemsPerPage?: PaginationItemsPerPage
   isFetching?: boolean
 }

src/components/Company/Locations/LocationsList/List.tsx

@@ -14,6 +14,7 @@ export const List = () => {
     handleEditLocation,
     currentPage,
     totalPages,
+    totalCount,
     handleFirstPage,
     handleItemsPerPageChange,
     handleLastPage,
@@ -89,6 +90,7 @@ export const List = () => {
       handleItemsPerPageChange,
       currentPage,
       totalPages,
+      totalCount,
       itemsPerPage,
     },
     emptyState: () => (

src/components/Company/Locations/LocationsList/LocationsList.tsx

@@ -35,6 +35,7 @@ function Root({ companyId, className, children }: LocationsListProps) {
   } = useLocationsGetSuspense({ companyId, page: currentPage, per: itemsPerPage })
 
   const totalPages = Number(httpMeta.response.headers.get('x-total-pages') ?? 1)
+  const totalCount = Number(httpMeta.response.headers.get('x-total-count') ?? 0)
 
   const handleItemsPerPageChange = (newCount: PaginationItemsPerPage) => {
     setItemsPerPage(newCount)
@@ -69,6 +70,7 @@ function Root({ companyId, className, children }: LocationsListProps) {
           locationList: locationList ?? [],
           currentPage,
           totalPages,
+          totalCount,
           handleFirstPage,
           handlePreviousPage,
           handleNextPage,

src/components/Company/Locations/LocationsList/useLocationsList.ts

@@ -5,6 +5,7 @@ import type { PaginationItemsPerPage } from '@/components/Common/PaginationContr
 type LocationsListContextType = {
   locationList: Location[]
   totalPages: number
+  totalCount: number
   currentPage: number
   itemsPerPage: PaginationItemsPerPage
   handleItemsPerPageChange: (n: PaginationItemsPerPage) => void

src/components/Contractor/ContractorList/index.tsx

@@ -139,6 +139,7 @@ function Root({ companyId, className, dictionary, successMessage }: ContractorLi
       handleItemsPerPageChange,
       currentPage,
       totalPages,
+      totalCount,
       itemsPerPage,
     },
   })

src/components/Employee/EmployeeList/EmployeeList.tsx

@@ -62,6 +62,7 @@ function Root({ companyId, className, children, dictionary }: EmployeeListProps)
   const employees = employeeList!
 
   const totalPages = Number(httpMeta.response.headers.get('x-total-pages') ?? 1)
+  const totalCount = Number(httpMeta.response.headers.get('x-total-count') ?? 0)
 
   const handleItemsPerPageChange = (newCount: PaginationItemsPerPage) => {
     setItemsPerPage(newCount)
@@ -139,6 +140,7 @@ function Root({ companyId, className, children, dictionary }: EmployeeListProps)
           employees,
           currentPage,
           totalPages,
+          totalCount,
           handleFirstPage,
           handlePreviousPage,
           handleNextPage,

src/components/Employee/EmployeeList/List.tsx

@@ -27,6 +27,7 @@ export const List = () => {
     handleItemsPerPageChange,
     currentPage,
     totalPages,
+    totalCount,
     itemsPerPage,
     handleSkip,
     isFetching,
@@ -139,6 +140,7 @@ export const List = () => {
       handleItemsPerPageChange,
       currentPage,
       totalPages,
+      totalCount,
       itemsPerPage,
     },
     emptyState: () => (

src/components/Employee/EmployeeList/useEmployeeList.ts

@@ -18,6 +18,7 @@ type EmployeeListContextType = {
   handleItemsPerPageChange: (newCount: PaginationItemsPerPage) => void
   currentPage: number
   totalPages: number
+  totalCount: number
   employees: Employee[]
   itemsPerPage: PaginationItemsPerPage
   isFetching: boolean