create-crm-tmp 1.0.2 → 1.1.0

package/template/src/app/(dashboard)/contacts/page.tsx

@@ -3,7 +3,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { useUserRole } from '@/hooks/use-user-role';
-import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 import {
   Search,
   Plus,
@@ -97,7 +96,6 @@ const DEFAULT_COLUMNS: TableColumn[] = [
 export default function ContactsPage() {
   const router = useRouter();
   const { isAdmin } = useUserRole();
-  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
 
   // Fonction pour formater les dates en français
   const formatDate = (dateString: string) => {
@@ -1400,42 +1398,17 @@ export default function ContactsPage() {
   return (
     <div className="bg-crms-bg flex h-full flex-col">
       {/* Header avec titre, badge et breadcrumbs */}
-      <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8">
-        <div className="mb-3 flex items-start justify-between gap-3">
-          {/* Mobile menu button */}
-          <button
-            onClick={toggleMobileMenu}
-            className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
-            aria-label="Toggle menu"
-          >
-            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              {isMobileMenuOpen ? (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              ) : (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              )}
-            </svg>
-          </button>
-
+      <div className="border-b border-gray-200 bg-white px-4 py-3 sm:px-6 sm:py-4 lg:px-8">
+        <div className="mb-3 flex items-center justify-between gap-2 sm:gap-3">
           {/* Titre et breadcrumbs */}
-          <div className="flex-1">
-            <div className="mb-1 flex items-center gap-2">
-              <h1 className="text-2xl font-bold text-gray-900">Contacts</h1>
-              <span className="rounded-full bg-indigo-100 px-2.5 py-0.5 text-sm font-semibold text-indigo-600">
+          <div className="min-w-0 flex-1">
+            <div className="mb-0.5 flex items-center gap-2 sm:mb-1">
+              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Contacts</h1>
+              <span className="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-600 sm:px-2.5 sm:text-sm">
                 {totalContacts}
               </span>
             </div>
-            <p className="text-base text-gray-500">Home &gt; Contacts</p>
+            <p className="text-sm text-gray-500 sm:text-base">Home &gt; Contacts</p>
           </div>
 
           <button
@@ -1666,30 +1639,30 @@ export default function ContactsPage() {
           </div>
 
           {/* Actions à droite */}
-          <div className="flex items-center gap-2">
-            {/* Gérer les colonnes */}
+          <div className="flex items-center gap-1.5 sm:gap-2">
+            {/* Gérer les colonnes - masqué sur mobile */}
             {viewMode === 'table' && (
               <button
                 onClick={() => setShowColumnPanel(true)}
-                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                className="hidden cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:inline-flex"
                 title="Gérer les colonnes"
               >
-                Gérer les colonnes
+                Colonnes
               </button>
             )}
             {/* Bouton Réinitialiser les filtres */}
             {hasActiveFilters() && (
               <button
                 onClick={handleResetAllFilters}
-                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:px-3"
                 title="Réinitialiser tous les filtres"
               >
                 <X className="h-3.5 w-3.5" />
-                Réinitialiser
+                <span className="hidden sm:inline">Réinitialiser</span>
               </button>
             )}
-            {/* Groupe vue (liste / grille) */}
-            <div className="flex items-center rounded-lg border border-gray-200 bg-white p-1">
+            {/* Groupe vue (liste / grille) - masqué sur mobile (cartes forcées) */}
+            <div className="hidden items-center rounded-lg border border-gray-200 bg-white p-1 sm:flex">
               <button
                 onClick={() => setViewMode('table')}
                 className={cn(
@@ -1716,10 +1689,11 @@ export default function ContactsPage() {
             <button
               type="button"
               onClick={() => setShowImportModal(true)}
-              className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-3 sm:text-sm"
+              title="Importer"
             >
               <Upload className="h-4 w-4" />
-              Importer
+              <span className="hidden sm:inline">Importer</span>
             </button>
 
             {/* Exporter tous les contacts (admin uniquement) */}
@@ -1730,20 +1704,22 @@ export default function ContactsPage() {
                   setShowExportModal(true);
                 }}
                 disabled={exporting}
-                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-indigo-600 bg-white px-4 py-2 text-xs font-semibold text-indigo-600 shadow-sm transition-colors hover:bg-indigo-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm"
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-indigo-600 bg-white px-2.5 py-2 text-xs font-semibold text-indigo-600 shadow-sm transition-colors hover:bg-indigo-50 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:text-sm"
+                title="Exporter tous"
               >
                 <Download className="h-4 w-4" />
-                Exporter tous
+                <span className="hidden sm:inline">Exporter</span>
               </button>
             )}
 
             {/* Ajouter un contact */}
             <button
               onClick={handleNewContact}
-              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+              className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-2.5 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-4 sm:text-sm"
+              title="Ajouter un contact"
             >
               <Plus className="h-4 w-4" />
-              Ajouter un contact
+              <span className="hidden sm:inline">Ajouter</span>
             </button>
           </div>
         </div>
@@ -1758,56 +1734,58 @@ export default function ContactsPage() {
 
         {/* Barre d'actions groupées */}
         {selectedContactIds.size > 0 && (
-          <div className="mb-4 flex items-center justify-between rounded-lg border border-indigo-200 bg-indigo-50 p-4 shadow-sm">
-            <div className="flex items-center gap-4">
-              <span className="text-sm font-medium text-indigo-900">
-                {selectedContactIds.size} contact(s) sélectionné(s)
-              </span>
-              <button
-                onClick={handleDeselectAll}
-                className="cursor-pointer text-sm text-indigo-600 hover:text-indigo-700 hover:underline"
-              >
-                Désélectionner tout
-              </button>
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setShowBulkCommercialModal(true)}
-                className="flex cursor-pointer items-center gap-2 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-700"
-              >
-                <Users className="h-4 w-4" />
-                Changer commercial
-              </button>
-              <button
-                onClick={() => setShowBulkStatusModal(true)}
-                className="flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
-              >
-                <Tag className="h-4 w-4" />
-                Changer statut
-              </button>
-              {isAdmin && (
-                <>
-                  <button
-                    onClick={() => {
-                      setExportAll(false);
-                      setShowExportModal(true);
-                    }}
-                    disabled={bulkActionLoading || exporting}
-                    className="flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    <Download className="h-4 w-4" />
-                    Exporter
-                  </button>
-                  <button
-                    onClick={handleBulkDelete}
-                    disabled={bulkActionLoading}
-                    className="flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                    Supprimer
-                  </button>
-                </>
-              )}
+          <div className="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 p-3 shadow-sm sm:p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-3 sm:gap-4">
+                <span className="text-sm font-medium whitespace-nowrap text-indigo-900">
+                  {selectedContactIds.size} sélectionné(s)
+                </span>
+                <button
+                  onClick={handleDeselectAll}
+                  className="cursor-pointer text-sm text-indigo-600 hover:text-indigo-700 hover:underline"
+                >
+                  Désélectionner
+                </button>
+              </div>
+              <div className="flex items-center gap-2 overflow-x-auto pb-1 sm:pb-0">
+                <button
+                  onClick={() => setShowBulkCommercialModal(true)}
+                  className="flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-orange-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-orange-700 sm:px-4 sm:text-sm"
+                >
+                  <Users className="h-4 w-4" />
+                  <span className="hidden sm:inline">Changer</span> commercial
+                </button>
+                <button
+                  onClick={() => setShowBulkStatusModal(true)}
+                  className="flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 sm:px-4 sm:text-sm"
+                >
+                  <Tag className="h-4 w-4" />
+                  <span className="hidden sm:inline">Changer</span> statut
+                </button>
+                {isAdmin && (
+                  <>
+                    <button
+                      onClick={() => {
+                        setExportAll(false);
+                        setShowExportModal(true);
+                      }}
+                      disabled={bulkActionLoading || exporting}
+                      className="flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:text-sm"
+                    >
+                      <Download className="h-4 w-4" />
+                      Exporter
+                    </button>
+                    <button
+                      onClick={handleBulkDelete}
+                      disabled={bulkActionLoading}
+                      className="flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:text-sm"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      Supprimer
+                    </button>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         )}
@@ -1841,9 +1819,9 @@ export default function ContactsPage() {
           </div>
         ) : (
           <>
-            {/* Vue Tableau */}
+            {/* Vue Tableau — masquée sur mobile, cartes affichées à la place */}
             {viewMode === 'table' && (
-              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+              <div className="hidden overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm sm:block">
                 <div className="overflow-x-auto">
                   <table className="min-w-full divide-y divide-gray-100 text-sm">
                     <thead className="bg-gray-50/60">
@@ -1965,7 +1943,7 @@ export default function ContactsPage() {
               </div>
             )}
 
-            {/* Vue Cartes */}
+            {/* Vue Cartes — toujours visible sur mobile, ou quand viewMode === 'cards' sur desktop */}
             {viewMode === 'cards' ? (
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                 {sortedContacts.map((contact) => {
@@ -1973,12 +1951,12 @@ export default function ContactsPage() {
                     <div
                       key={contact.id}
                       onClick={() => router.push(`/contacts/${contact.id}`)}
-                      className="relative cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+                      className="relative cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md sm:p-6"
                     >
-                      {/* En-tête avec trois points */}
-                      <div className="mb-4 flex items-start justify-between">
+                      {/* En-tête */}
+                      <div className="mb-3 flex items-start justify-between sm:mb-4">
                         <div className="flex items-center gap-3">
-                          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-lg font-semibold text-indigo-600">
+                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-base font-semibold text-indigo-600 sm:h-12 sm:w-12 sm:text-lg">
                             {contact.isCompany ? (
                               <span>🏢</span>
                             ) : (
@@ -1986,12 +1964,11 @@ export default function ContactsPage() {
                             )}
                           </div>
                           <div className="min-w-0">
-                            <h3 className="text-lg font-semibold text-gray-900">
+                            <h3 className="truncate text-base font-semibold text-gray-900 sm:text-lg">
                               {contact.civility && `${contact.civility}. `}
                               {contact.firstName} {contact.lastName}
                             </h3>
-                            <p className="text-sm text-gray-500">
-                              CRÉÉ LE :{' '}
+                            <p className="text-xs text-gray-500 sm:text-sm">
                               {new Date(contact.createdAt).toLocaleDateString('fr-FR', {
                                 day: 'numeric',
                                 month: 'short',
@@ -2003,58 +1980,32 @@ export default function ContactsPage() {
                       </div>
 
                       {/* Informations de contact */}
-                      <div className="mb-4 space-y-2">
-                        <div className="flex items-center text-base text-gray-900">
-                          <Phone className="mr-2 h-4 w-4 text-gray-400" />
-                          <span className="font-medium">Tél. :</span>
-                          <span className="ml-1">{contact.phone}</span>
-                        </div>
-                        {contact.secondaryPhone && (
-                          <div className="text-sm text-gray-500">
-                            Tél. secondaire : {contact.secondaryPhone}
-                          </div>
-                        )}
-                        <div className="flex items-center text-base text-gray-900">
-                          <Mail className="mr-2 h-4 w-4 text-gray-400" />
-                          <span className="font-medium">Email :</span>
-                          <span className="ml-1">{contact.email || '-'}</span>
-                        </div>
-                        {(contact.companyName || contact.companyRelation) && (
-                          <div className="flex items-center text-base text-gray-900">
-                            <Building2 className="mr-2 h-4 w-4 text-gray-400" />
-                            <span>
-                              {contact.companyName ||
-                                (contact.companyRelation &&
-                                  (contact.companyRelation.firstName ||
-                                    contact.companyRelation.lastName ||
-                                    'Sans nom'))}
-                            </span>
+                      <div className="mb-3 space-y-1.5 sm:mb-4 sm:space-y-2">
+                        {contact.phone && (
+                          <div className="flex items-center text-sm text-gray-900 sm:text-base">
+                            <Phone className="mr-2 h-3.5 w-3.5 shrink-0 text-gray-400 sm:h-4 sm:w-4" />
+                            <span className="truncate">{contact.phone}</span>
                           </div>
                         )}
-                        {contact.city && (
-                          <div className="flex items-center text-base text-gray-500">
-                            <MapPin className="mr-2 h-4 w-4 text-gray-400" />
-                            <span className="font-medium">Localisation :</span>
-                            <span className="ml-1">
-                              {contact.city}
-                              {contact.postalCode && `, ${contact.postalCode}`}
-                            </span>
+                        {contact.email && (
+                          <div className="flex items-center text-sm text-gray-900 sm:text-base">
+                            <Mail className="mr-2 h-3.5 w-3.5 shrink-0 text-gray-400 sm:h-4 sm:w-4" />
+                            <span className="truncate">{contact.email}</span>
                           </div>
                         )}
                         {contact.origin && (
-                          <div className="flex items-center text-base text-gray-500">
-                            <span className="mr-2 text-sm">🎯</span>
-                            <span className="font-medium">Origine :</span>
-                            <span className="ml-1">{contact.origin}</span>
+                          <div className="flex items-center text-xs text-gray-500 sm:text-sm">
+                            <span className="mr-2 text-xs sm:text-sm">🎯</span>
+                            <span className="truncate">{contact.origin}</span>
                           </div>
                         )}
                       </div>
 
                       {/* Badges et statut */}
-                      <div className="mb-4 flex flex-wrap items-center gap-2">
+                      <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
                         {contact.status && (
                           <span
-                            className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
+                            className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold"
                             style={{
                               backgroundColor: `${contact.status.color}20`,
                               color: contact.status.color,
@@ -2063,80 +2014,75 @@ export default function ContactsPage() {
                             {contact.status.name}
                           </span>
                         )}
-                        {contact.isCompany && (
-                          <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
-                            Entreprise
-                          </span>
-                        )}
                         {!contact.assignedCommercial && (
-                          <span className="inline-flex items-center rounded-full border border-orange-300 bg-orange-50 px-2.5 py-0.5 text-xs font-semibold text-orange-800">
+                          <span className="inline-flex items-center rounded-full border border-orange-300 bg-orange-50 px-2 py-0.5 text-xs font-semibold text-orange-800">
                             Non Attribué
                           </span>
                         )}
                       </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : null}
 
-                      {/* Pied de carte avec utilisateurs assignés */}
-                      <div className="flex items-start justify-between border-t border-gray-100 pt-4">
-                        <div className="space-y-2">
-                          {/* Commercial */}
-                          {contact.assignedCommercial && (
-                            <div className="flex items-center gap-2">
-                              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600">
-                                {contact.assignedCommercial.name
-                                  .split(' ')
-                                  .map((n) => n[0])
-                                  .join('')
-                                  .slice(0, 2)
-                                  .toUpperCase()}
-                              </div>
-                              <div className="min-w-0 flex-1">
-                                <div className="flex items-center gap-1.5">
-                                  <span className="text-xs font-medium text-gray-900">
-                                    {contact.assignedCommercial.name}
-                                  </span>
-                                  <span className="inline-flex items-center rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700">
-                                    Commercial
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Télépro */}
-                          {contact.assignedTelepro && (
-                            <div className="flex items-center gap-2">
-                              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-purple-100 text-xs font-semibold text-purple-600">
-                                {contact.assignedTelepro.name
-                                  .split(' ')
-                                  .map((n) => n[0])
-                                  .join('')
-                                  .slice(0, 2)
-                                  .toUpperCase()}
-                              </div>
-                              <div className="min-w-0 flex-1">
-                                <div className="flex items-center gap-1.5">
-                                  <span className="text-xs font-medium text-gray-900">
-                                    {contact.assignedTelepro.name}
-                                  </span>
-                                  <span className="inline-flex items-center rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700">
-                                    Télépro
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
+            {/* Fallback mobile : vue cartes compactes quand viewMode est table mais écran < sm */}
+            {viewMode === 'table' && (
+              <div className="grid grid-cols-1 gap-3 sm:hidden">
+                {sortedContacts.map((contact) => (
+                  <div
+                    key={contact.id}
+                    onClick={() => router.push(`/contacts/${contact.id}`)}
+                    className="relative cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-base font-semibold text-indigo-600">
+                        {contact.isCompany ? (
+                          <span>🏢</span>
+                        ) : (
+                          (contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()
+                        )}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <h3 className="truncate text-sm font-semibold text-gray-900">
+                          {contact.firstName} {contact.lastName}
+                        </h3>
+                        <div className="mt-0.5 flex items-center gap-2">
+                          {contact.status && (
+                            <span
+                              className="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold"
+                              style={{
+                                backgroundColor: `${contact.status.color}20`,
+                                color: contact.status.color,
+                              }}
+                            >
+                              {contact.status.name}
+                            </span>
                           )}
-
-                          {/* Aucun utilisateur assigné */}
-                          {!contact.assignedCommercial && !contact.assignedTelepro && (
-                            <div className="text-xs text-gray-400">Aucun utilisateur assigné</div>
+                          {contact.origin && (
+                            <span className="truncate text-xs text-gray-400">{contact.origin}</span>
                           )}
                         </div>
                       </div>
                     </div>
-                  );
-                })}
+                    <div className="mt-2 space-y-1 pl-[52px]">
+                      {contact.email && (
+                        <p className="truncate text-xs text-gray-500">
+                          <Mail className="mr-1 inline h-3 w-3" />
+                          {contact.email}
+                        </p>
+                      )}
+                      {contact.phone && (
+                        <p className="text-xs text-gray-500">
+                          <Phone className="mr-1 inline h-3 w-3" />
+                          {contact.phone}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                ))}
               </div>
-            ) : null}
+            )}
 
             {/* Pagination */}
             {totalPages > 1 && (