From bfba4133f465ce0de7c7b412cfcea0f9fd855e1d Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Thu, 22 May 2025 18:17:01 +0530
Subject: [PATCH] pin bucket name on card

---
 .../Directory/CardViewDirectory.jsx           | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index 2f29cc72..a18f0f18 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -1,7 +1,11 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-
-const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted }) => {
+import {getBucketNameById} from "./DirectoryUtils";
+import {useBuckets} from "../../hooks/useDirectory";
+import { getPhoneIcon } from "./DirectoryUtils";
+const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
+{
+  const {buckets} = useBuckets()
   return (
     <div className="card text-start border-1">
       <div className="card-body  px-1 py-2 pb-0">
@@ -87,7 +91,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
         {contact.contactPhones[0] && (
           <ul className="list-inline m-0">
             <li className="list-inline-item me-2">
-              <i className="bx bx-phone bx-xs"></i>
+              <i className={` ${getPhoneIcon(contact.contactPhones[0].label)} bx-xs`} ></i>
             </li>
             <li className="list-inline-item small-text">
               {contact.contactPhones[0]?.phoneNumber}
@@ -103,6 +107,20 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
             {contact.contactCategory.name}
           </li>
         </ul>
+
+        <ul className="list-inline m-0">
+          {contact.bucketIds.map( ( bucketId ) => (
+            <>
+            
+                  <li className="list-inline-item me-1">
+            <i className="bx bx-pin bx-xs"></i>
+          </li>
+          <li className="list-inline-item small-text">
+            {getBucketNameById(buckets,bucketId)}
+          </li></>
+          ))}
+      
+        </ul>
       </div>
     </div>
   );