Merge pull request #4 from Nine-Minds/flashing_contact_avatars

flashy contact avatars

server/src/app/msp/contacts/page.tsx

@@ -1,33 +1,42 @@
 // server/src/app/msp/contacts/page.tsx
 import React from 'react';
 import dynamic from 'next/dynamic';
-import Contacts from '@/components/contacts/Contacts';
 import ContactModel from '@/lib/models/contact';
 import UserModel from '@/lib/models/user';
 import { User } from 'next-auth';
 
+// Import Contacts component with ssr disabled
+const Contacts = dynamic(() => import('@/components/contacts/Contacts'), { ssr: false });
+const OverallInteractionsFeed = dynamic(
+  () => import('@/components/interactions/OverallInteractionsFeed'),
+  { ssr: false }
+);
+
 type IdName = { id: string; name: string };
 
 export default async function ContactsPage() {
   const contacts = await ContactModel.getAll(true);
   const users = await UserModel.getAll(); 
 
-  const OverallInteractionsFeed = dynamic(
-    () => import('@/components/interactions/OverallInteractionsFeed'),
-    { ssr: false }
+  // Filter out any duplicate contacts based on contact_name_id
+  const uniqueContacts = Array.from(
+    new Map(contacts.map(contact => [contact.contact_name_id, contact])).values()
   );
 
   return (
     <div className="flex flex-col md:flex-row md:space-x-6">
       <div className="w-full md:w-2/3 mb-6 md:mb-0">
-        <Contacts initialContacts={contacts} />
+        <Contacts initialContacts={uniqueContacts} />
       </div>
       <div className="w-full md:w-1/3">
         <OverallInteractionsFeed 
           users={users.map((user):IdName => ({ id: user.user_id, name: user.username }))}
-          contacts={contacts.map((contact):IdName => ({ id: contact.contact_name_id, name: contact.full_name }))}
+          contacts={uniqueContacts.map((contact):IdName => ({ 
+            id: contact.contact_name_id,
+            name: contact.full_name 
+          }))}
         />
       </div>
     </div>
   );
-}
+}

server/src/components/contacts/Contacts.tsx

@@ -83,6 +83,13 @@ const Contacts: React.FC<ContactsProps> = ({ initialContacts, companyId, preSele
     setAllUniqueTags(getUniqueTagTexts(Object.values(contactTagsRef.current).flat()));
   };
 
+  const getAvatarUrl = (contact: IContact) => {
+      // Using contact_name_id to generate a consistent background color
+      const backgroundColors = ['0D8ABC', '7C3AED', '059669', 'DC2626', 'D97706'];
+      const index = Math.abs(contact.contact_name_id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % backgroundColors.length;
+      return `https://ui-avatars.com/api/?name=${encodeURIComponent(contact.full_name)}&background=${backgroundColors[index]}&color=ffffff`;
+      };
+
   const getCompanyName = (companyId: string) => {
     const company = companies.find(c => c.company_id === companyId);
     return company ? company.company_name : 'Unknown Company';
@@ -219,8 +226,8 @@ const Contacts: React.FC<ContactsProps> = ({ initialContacts, companyId, preSele
         <div className="flex items-center">
           <img 
             className="h-8 w-8 rounded-full mr-2" 
-            src={`https://ui-avatars.com/api/?name=${encodeURIComponent(record.full_name)}&background=random`} 
-            alt="" 
+            src={getAvatarUrl(record)} 
+            alt={`${value} avatar`}
           />
           <button
             onClick={() => handleViewDetails(record)}