Fix TypeScript compatibility error in TanStack Router navigation

[Pattkopp]

Issue Description

TypeScript Error

When building the frontend in Docker, the build fails with TypeScript errors in router navigation code in both admin.tsx and items.tsx files:

Type '(prev: { [key: string]: string; }) => { page: number; }' is not assignable to type 'true | ParamsReducerFn<AnyRouter, "SEARCH", string, string | undefined> | undefined'.
Type '(prev: { [key: string]: string; }) => { page: number; }' is not assignable to type 'ParamsReducerFn<AnyRouter, "SEARCH", string, string | undefined>'.
Type '{ page: number; }' is not assignable to type 'never'.

Affected Files

• /frontend/src/routes/_layout/admin.tsx (line 49)
• /frontend/src/routes/_layout/items.tsx (line 55)

Error Context

This TypeScript error occurs in the pagination navigation code where we're using the TanStack Router navigate function to update search parameters:

const setPage = (page: number) =>
  navigate({
    search: (prev: { [key: string]: string }) => ({ ...prev, page }),
  })

Investigation and Analysis

1. Dependency Versions

   • TanStack Router version: 1.114.29 (latest as of March 2025)
   • Related type issues appear to be from the Router's typing system

2. Attempted Solutions

   • Tried various approaches to fix the type mismatch:
     • Adding type casting with as
     • Converting the number to string explicitly
     • Modifying the search schema definition
     • Restructuring the search parameter handling
   • All attempted solutions resulted in TypeScript errors

3. Root Cause Analysis
   There appears to be a mismatch between:

   • How the router expects search parameters to be handled (expecting strings)
   • How the zod schema validates them (expecting numbers)
   • How the actual code processes them (returning numbers)

Suggested Next Steps

1. Short-term Fixes (choose one):

   • Option A: Modify the frontend build process in Docker to bypass TypeScript checks temporarily

     # In Dockerfile
     RUN npm run build -- --skipTypeCheck
     

   • Option B: Run only backend services while frontend issues are addressed

     docker-compose up --build --remove-orphans db backend proxy
     

2. Long-term Solutions:

   • Approach 1: Refactor router search parameter handling to align with TanStack Router API

     • Update search schemas to use z.coerce.number() or similar
     • Modify navigation code to handle string/number conversions explicitly

   • Approach 2: Upgrade or downgrade TanStack Router to a version with compatible type definitions

     • Test with alternative versions to find compatible API
     • Update related dependencies accordingly

3. Code Analysis Required:

   • Review how search parameters are used throughout the application
   • Determine if the issue impacts other router functionality
   • Consider if this is part of a larger pattern that needs addressing

Priority

Medium: Blocks Docker builds but doesn't impact local development directly

Related Information

This issue was discovered when running docker-compose up --build after fixing a password length validation error in the backend.