style(ui): replace dark hover bg from neutral-950 to neutral-900 and use RelativeDate component in UsersPage

src/features/admin/pages/UsersPage.client.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
+import { Card, Table, Badge, StatusBadge, Button, UserAvatar, RelativeDate } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 import AdminHeader from '../components/AdminHeader.js';
@@ -65,11 +65,7 @@ const UsersPageClient = () => {
             key: 'created_at',
             label: 'Créé le',
             sortable: true,
-            render: (user) => (
-                <span className="text-sm text-neutral-600 dark:text-gray-300">
-                    {formatDate(user.created_at)}
-                </span>
-            ),
+            render: (user) => <RelativeDate date={user.created_at} />,
             skeleton: { height: 'h-4', width: '70%' },
         },
         {
@@ -144,21 +140,6 @@ const UsersPageClient = () => {
         setSortOrder(newSortOrder);
     };
 
-    const formatDate = (dateString) => {
-        if (!dateString) return 'N/A';
-        try {
-            return new Date(dateString).toLocaleDateString('fr-FR', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-            });
-        } catch {
-            return 'Date invalide';
-        }
-    };
-
     return (
         <>
             <Card variant="default" padding="none">