refactor: consolidate date formatting with date-fns

Replace three separate inline date formatting implementations with
centralized formatDate and formatDualTimestamp utilities powered by
date-fns, improving consistency and locale-aware formatting across
the job table, status badges, and sites page.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: danbim

app/components/job-table.tsx

@@ -16,6 +16,7 @@ import {
   TableHeader,
   TableRow,
 } from '~/components/ui/table'
+import { formatDate } from '~/lib/format-timestamp'
 import type { RankedJobOpening } from '~/services/scoring.service'
 
 type JobTableProps = {
@@ -31,12 +32,6 @@ export function JobTable({
   onAppliedClick,
   onRowClick,
 }: JobTableProps) {
-  const formatDate = (date: Date | string | null) => {
-    if (!date) return '-'
-    const d = typeof date === 'string' ? new Date(date) : date
-    return d.toLocaleDateString()
-  }
-
   return (
     <Table>
       <TableHeader>

app/components/status-badge.tsx

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
 } from '~/components/ui/select'
 import { type ApplicationStatus, applicationStatusEnum } from '~/db/schema'
+import { formatDate } from '~/lib/format-timestamp'
 
 type StatusBadgeProps = {
   jobId: string
@@ -63,11 +64,6 @@ export function StatusBadge({
   const fetcher = useFetcher()
   const config = STATUS_CONFIG[status]
 
-  const formatDate = (date: Date | null | undefined) => {
-    if (!date) return ''
-    return ` ${date.toLocaleDateString()}`
-  }
-
   const handleStatusChange = (newStatus: string) => {
     if (newStatus === 'applied' && onAppliedClick) {
       onAppliedClick()
@@ -85,7 +81,7 @@ export function StatusBadge({
       <SelectTrigger className="w-auto border-0 p-0 h-auto focus:ring-0 shadow-none">
         <Badge variant={config.variant} className={config.className}>
           {config.label}
-          {status === 'applied' && formatDate(appliedAt)}
+          {status === 'applied' && appliedAt && ` ${formatDate(appliedAt)}`}
         </Badge>
       </SelectTrigger>
       <SelectContent position="popper" align="start">

app/lib/format-timestamp.test.ts

@@ -1,28 +1,27 @@
 import { describe, expect, it, vi } from 'vitest'
-import { formatDualTimestamp } from './format-timestamp'
+import { formatDate, formatDualTimestamp } from './format-timestamp'
 
 describe('formatDualTimestamp', () => {
   it('should format timestamp with relative and absolute parts', () => {
-    // Mock current time to 2026-01-23 16:03:00
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-23T14:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('2 hours ago (23.01.2026 - 14:03)')
+    expect(result).toBe('about 2 hours ago (Jan 23, 2026, 2:03 PM)')
 
     vi.useRealTimers()
   })
 
-  it('should handle "just now" for recent timestamps', () => {
+  it('should handle recent timestamps', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-23T16:02:30')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('just now (23.01.2026 - 16:02)')
+    expect(result).toBe('1 minute ago (Jan 23, 2026, 4:02 PM)')
 
     vi.useRealTimers()
   })
@@ -34,7 +33,7 @@ describe('formatDualTimestamp', () => {
     const timestamp = new Date('2026-01-20T14:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('3 days ago (20.01.2026 - 14:03)')
+    expect(result).toBe('3 days ago (Jan 20, 2026, 2:03 PM)')
 
     vi.useRealTimers()
   })
@@ -46,7 +45,7 @@ describe('formatDualTimestamp', () => {
     const timestamp = new Date('2026-01-23T15:58:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('5 minutes ago (23.01.2026 - 15:58)')
+    expect(result).toBe('5 minutes ago (Jan 23, 2026, 3:58 PM)')
 
     vi.useRealTimers()
   })
@@ -58,55 +57,55 @@ describe('formatDualTimestamp', () => {
     const timestamp = new Date('2025-11-23T14:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('2 months ago (23.11.2025 - 14:03)')
+    expect(result).toBe('2 months ago (Nov 23, 2025, 2:03 PM)')
 
     vi.useRealTimers()
   })
 
-  it('should handle singular forms - 1 minute ago', () => {
+  it('should handle 1 minute ago', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-23T16:02:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('1 minute ago (23.01.2026 - 16:02)')
+    expect(result).toBe('1 minute ago (Jan 23, 2026, 4:02 PM)')
 
     vi.useRealTimers()
   })
 
-  it('should handle singular forms - 1 hour ago', () => {
+  it('should handle about 1 hour ago', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-23T15:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('1 hour ago (23.01.2026 - 15:03)')
+    expect(result).toBe('about 1 hour ago (Jan 23, 2026, 3:03 PM)')
 
     vi.useRealTimers()
   })
 
-  it('should handle singular forms - 1 day ago', () => {
+  it('should handle 1 day ago', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-22T16:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('1 day ago (22.01.2026 - 16:03)')
+    expect(result).toBe('1 day ago (Jan 22, 2026, 4:03 PM)')
 
     vi.useRealTimers()
   })
 
-  it('should handle singular forms - 1 month ago', () => {
+  it('should handle about 1 month ago', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2025-12-23T16:03:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('1 month ago (23.12.2025 - 16:03)')
+    expect(result).toBe('about 1 month ago (Dec 23, 2025, 4:03 PM)')
 
     vi.useRealTimers()
   })
@@ -117,7 +116,7 @@ describe('formatDualTimestamp', () => {
 
     const result = formatDualTimestamp('2026-01-23T14:03:00')
 
-    expect(result).toBe('2 hours ago (23.01.2026 - 14:03)')
+    expect(result).toBe('about 2 hours ago (Jan 23, 2026, 2:03 PM)')
 
     vi.useRealTimers()
   })
@@ -128,15 +127,31 @@ describe('formatDualTimestamp', () => {
     )
   })
 
-  it('should handle future dates as "just now"', () => {
+  it('should handle future dates with "in X" prefix', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-01-23T16:03:00'))
 
     const timestamp = new Date('2026-01-23T16:08:00')
     const result = formatDualTimestamp(timestamp)
 
-    expect(result).toBe('just now (23.01.2026 - 16:08)')
+    expect(result).toBe('in 5 minutes (Jan 23, 2026, 4:08 PM)')
 
     vi.useRealTimers()
   })
 })
+
+describe('formatDate', () => {
+  it('should format a Date object', () => {
+    const result = formatDate(new Date('2026-01-23'))
+    expect(result).toBe('Jan 23, 2026')
+  })
+
+  it('should format a date string', () => {
+    const result = formatDate('2026-01-23')
+    expect(result).toBe('Jan 23, 2026')
+  })
+
+  it('should return dash for null', () => {
+    expect(formatDate(null)).toBe('-')
+  })
+})

app/lib/format-timestamp.ts

@@ -1,50 +1,17 @@
+import { format, formatDistanceToNow } from 'date-fns'
+
 export function formatDualTimestamp(date: Date | string): string {
   const d = typeof date === 'string' ? new Date(date) : date
-
-  // Handle invalid dates
   if (Number.isNaN(d.getTime())) {
     throw new Error('Invalid date provided')
   }
-
-  const now = new Date()
-  const diffMs = now.getTime() - d.getTime()
-
-  // Handle future dates - treat as "just now"
-  if (diffMs < 0) {
-    const day = d.getDate().toString().padStart(2, '0')
-    const month = (d.getMonth() + 1).toString().padStart(2, '0')
-    const year = d.getFullYear()
-    const hours = d.getHours().toString().padStart(2, '0')
-    const minutes = d.getMinutes().toString().padStart(2, '0')
-    const absolute = `${day}.${month}.${year} - ${hours}:${minutes}`
-    return `just now (${absolute})`
-  }
-  const diffSeconds = Math.floor(diffMs / 1000)
-  const diffMinutes = Math.floor(diffSeconds / 60)
-  const diffHours = Math.floor(diffMinutes / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  let relative: string
-  if (diffMinutes < 1) {
-    relative = 'just now'
-  } else if (diffMinutes < 60) {
-    relative = `${diffMinutes} minute${diffMinutes === 1 ? '' : 's'} ago`
-  } else if (diffHours < 24) {
-    relative = `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`
-  } else if (diffDays < 30) {
-    relative = `${diffDays} day${diffDays === 1 ? '' : 's'} ago`
-  } else {
-    const diffMonths = Math.floor(diffDays / 30)
-    relative = `${diffMonths} month${diffMonths === 1 ? '' : 's'} ago`
-  }
-
-  const day = d.getDate().toString().padStart(2, '0')
-  const month = (d.getMonth() + 1).toString().padStart(2, '0')
-  const year = d.getFullYear()
-  const hours = d.getHours().toString().padStart(2, '0')
-  const minutes = d.getMinutes().toString().padStart(2, '0')
-
-  const absolute = `${day}.${month}.${year} - ${hours}:${minutes}`
-
+  const relative = formatDistanceToNow(d, { addSuffix: true })
+  const absolute = format(d, 'PPp')
   return `${relative} (${absolute})`
 }
+
+export function formatDate(date: Date | string | null): string {
+  if (!date) return '-'
+  const d = typeof date === 'string' ? new Date(date) : date
+  return format(d, 'PP')
+}

app/routes/sites.tsx

@@ -20,6 +20,7 @@ import {
   TableRow,
 } from '~/components/ui/table'
 import type { JobPostingSite } from '~/db/schema'
+import { formatDualTimestamp } from '~/lib/format-timestamp'
 import { jobPostingSiteSchema } from '~/schemas/job-posting-site.schema'
 import { jobPostingSiteService } from '~/services/index.server'
 import type { Route } from './+types/sites'
@@ -83,31 +84,6 @@ export async function action({ request }: Route.ActionArgs) {
   return { success: false }
 }
 
-function formatRelative(diffDays: number): string {
-  if (diffDays <= 0) return 'Today'
-  if (diffDays === 1) return 'Yesterday'
-  if (diffDays < 7) return `${diffDays} days ago`
-  if (diffDays < 30) {
-    const weeks = Math.floor(diffDays / 7)
-    return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`
-  }
-  const months = Math.floor(diffDays / 30)
-  return `${months} ${months === 1 ? 'month' : 'months'} ago`
-}
-
-function formatLastChecked(date: string | null): string {
-  if (!date) return 'Never'
-  const checked = new Date(date)
-  const diffMs = Date.now() - checked.getTime()
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
-  const relative = formatRelative(diffDays)
-  const localized = checked.toLocaleString(undefined, {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  })
-  return `${relative} (${localized})`
-}
-
 export default function Sites() {
   const { sites } = useLoaderData<typeof loader>()
   const [editSite, setEditSite] = useState<JobPostingSite | null>(null)
@@ -175,7 +151,9 @@ export default function Sites() {
                   </a>
                 </TableCell>
                 <TableCell className="text-muted-foreground">
-                  {formatLastChecked(site.lastCheckedAt as string | null)}
+                  {site.lastCheckedAt
+                    ? formatDualTimestamp(site.lastCheckedAt)
+                    : 'Never'}
                 </TableCell>
                 <TableCell>
                   <div className="flex gap-2">