refactor(frontend): extract date helpers and add unit tests

Move formatDate out of PayrollScheduler into a shared
utils/dateHelpers module. Add getRemainingDays helper that
computes the day-level difference between now and a target date.

Include 12 vitest cases covering empty input, ISO strings,
date-only strings, invalid dates, past/future dates, and
day-level precision.

Author: Mosas2000

frontend/src/__tests__/utils/dateHelpers.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { formatDate, getRemainingDays } from '../../utils/dateHelpers';
+
+describe('formatDate', () => {
+  it('returns N/A for empty string', () => {
+    expect(formatDate('')).toBe('N/A');
+  });
+
+  it('formats a date-only string (YYYY-MM-DD) correctly', () => {
+    const result = formatDate('2024-01-15');
+    expect(result).toBe('Jan 15, 2024');
+  });
+
+  it('formats an ISO datetime string correctly', () => {
+    const result = formatDate('2024-06-01T10:00:00Z');
+    expect(result).toContain('2024');
+    expect(result).toContain('Jun');
+  });
+
+  it('returns the original string for an invalid date', () => {
+    expect(formatDate('not-a-date')).toBe('not-a-date');
+  });
+
+  it('handles single-digit month and day', () => {
+    const result = formatDate('2024-03-05');
+    expect(result).toBe('Mar 5, 2024');
+  });
+
+  it('handles Dec 31 edge case', () => {
+    const result = formatDate('2024-12-31');
+    expect(result).toBe('Dec 31, 2024');
+  });
+});
+
+describe('getRemainingDays', () => {
+  it('returns 0 for an invalid date string', () => {
+    expect(getRemainingDays('garbage')).toBe(0);
+  });
+
+  it('returns 0 for today', () => {
+    const today = new Date();
+    expect(getRemainingDays(today)).toBe(0);
+  });
+
+  it('returns a positive number for a future date', () => {
+    const future = new Date();
+    future.setDate(future.getDate() + 10);
+    expect(getRemainingDays(future)).toBe(10);
+  });
+
+  it('returns a negative number for a past date', () => {
+    const past = new Date();
+    past.setDate(past.getDate() - 5);
+    expect(getRemainingDays(past)).toBe(-5);
+  });
+
+  it('accepts a date string', () => {
+    const future = new Date();
+    future.setDate(future.getDate() + 3);
+    const iso = future.toISOString();
+    expect(getRemainingDays(iso)).toBe(3);
+  });
+
+  it('uses day-level precision, not time-level', () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    tomorrow.setHours(0, 0, 0, 0);
+    expect(getRemainingDays(tomorrow)).toBe(1);
+  });
+});

frontend/src/pages/PayrollScheduler.tsx

@@ -15,6 +15,7 @@ import { BulkPaymentStatusTracker } from '../components/BulkPaymentStatusTracker
 import { ContractErrorPanel } from '../components/ContractErrorPanel';
 import { parseContractError, type ContractErrorDetail } from '../utils/contractErrorParser';
 import { HelpLink } from '../components/HelpLink';
+import { formatDate } from '../utils/dateHelpers';
 
 interface PayrollFormState {
   employeeName: string;
@@ -106,25 +107,6 @@ function computeNextRunDate(config: SchedulingConfig, from: Date = new Date()):
   return first;
 }
 
-const formatDate = (dateString: string) => {
-  if (!dateString) return 'N/A';
-
-  const dateOnlyMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateString);
-  const date = dateOnlyMatch
-    ? new Date(
-        Number.parseInt(dateOnlyMatch[1], 10),
-        Number.parseInt(dateOnlyMatch[2], 10) - 1,
-        Number.parseInt(dateOnlyMatch[3], 10)
-      )
-    : new Date(dateString);
-
-  if (isNaN(date.getTime())) return dateString;
-  return date.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-};
 
 interface PendingClaim {
   id: string;

frontend/src/utils/dateHelpers.ts

@@ -0,0 +1,31 @@
+export function formatDate(dateString: string): string {
+  if (!dateString) return 'N/A';
+
+  const dateOnlyMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateString);
+  const date = dateOnlyMatch
+    ? new Date(
+        Number.parseInt(dateOnlyMatch[1], 10),
+        Number.parseInt(dateOnlyMatch[2], 10) - 1,
+        Number.parseInt(dateOnlyMatch[3], 10)
+      )
+    : new Date(dateString);
+
+  if (isNaN(date.getTime())) return dateString;
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function getRemainingDays(targetDate: string | Date): number {
+  const target = typeof targetDate === 'string' ? new Date(targetDate) : targetDate;
+  if (isNaN(target.getTime())) return 0;
+
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfTarget = new Date(target.getFullYear(), target.getMonth(), target.getDate());
+
+  const diffMs = startOfTarget.getTime() - startOfToday.getTime();
+  return Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+}