feat: refactor date formatting and timezone utilities for improved consistency and functionality

src/pages/AccountPage.tsx

@@ -21,7 +21,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useAuth } from '@/contexts/AuthContext'
 import { useTheme } from '@/hooks/use-theme'
 import { useLocale } from '@/hooks/use-locale'
-import { getSupportedTimezones } from '@/lib/utils/locale'
+import { getSupportedTimezones } from '@/utils/locale'
 import {
   type ApiTokenStatusResponse,
   type UserProvider,
@@ -42,6 +42,7 @@ import {
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
+import { formatDate } from '@/utils/format-date'
 
 export function AccountPage() {
   const { user, setUser } = useAuth()
@@ -320,7 +321,7 @@ export function AccountPage() {
                   </div>
                   <div>
                     Member since:{' '}
-                    {new Date(user.created_at).toLocaleDateString()}
+                    {formatDate(user.created_at)}
                   </div>
                 </div>
               </div>
@@ -623,9 +624,7 @@ export function AccountPage() {
                         {apiTokenStatus.expires_at && (
                           <span className="text-muted-foreground">
                             (Expires:{' '}
-                            {new Date(
-                              apiTokenStatus.expires_at,
-                            ).toLocaleDateString()}
+                            {formatDate(apiTokenStatus.expires_at, false)}
                             )
                           </span>
                         )}

src/pages/ExtractionsPage.tsx

@@ -23,7 +23,7 @@ import {
   type ExtractionInfo,
   extractionsService,
 } from '@/lib/api/services/extractions'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDateDistanceToNow } from '@/utils/format-date'
 import {
   AlertCircle,
   Calendar,
@@ -284,19 +284,7 @@ export function ExtractionsPage() {
                       <TableCell>
                         <div className="flex items-center gap-1 text-sm text-muted-foreground">
                           <Calendar className="h-3 w-3" />
-                          {(() => {
-                            try {
-                              const date = new Date(extraction.created_at)
-                              if (isNaN(date.getTime())) {
-                                return 'Invalid date'
-                              }
-                              return formatDistanceToNow(date, {
-                                addSuffix: true,
-                              })
-                            } catch {
-                              return 'Invalid date'
-                            }
-                          })()}
+                          {formatDateDistanceToNow(extraction.created_at)}
                         </div>
                       </TableCell>
                       <TableCell>

src/pages/admin/UsersPage.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/table'
 import { type Plan, adminService } from '@/lib/api/services/admin'
 import type { User } from '@/types/auth'
+import { formatDate } from '@/utils/format-date'
 import { Edit, UserCheck, UserX } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
@@ -295,7 +296,7 @@ export function UsersPage() {
                         Created:
                       </span>
                       <span className="col-span-2">
-                        {new Date(editingUser.created_at).toLocaleDateString()}
+                        {formatDate(editingUser.created_at)}
                       </span>
                     </div>
                     <div className="grid grid-cols-3 gap-2 text-sm">
@@ -303,7 +304,7 @@ export function UsersPage() {
                         Last Updated:
                       </span>
                       <span className="col-span-2">
-                        {new Date(editingUser.updated_at).toLocaleDateString()}
+                        {formatDate(editingUser.updated_at)}
                       </span>
                     </div>
                   </div>