From 5e1afc5ccc9a687197a917809c5f7f6e476f0bf4 Mon Sep 17 00:00:00 2001
From: Nagarajan <nagarajantr07@gmail.com>
Date: Thu, 30 Apr 2026 10:54:14 +0530
Subject: [PATCH] Call history, Clear chat

---
 src/components/chat/CallHistory.jsx           | 254 +++++++++++
 .../profiledetail/MatrimonyProfile.jsx        | 395 +++++++++---------
 src/pages/ChatPage.jsx                        | 176 +++++---
 src/services/chatApi.js                       |  42 ++
 4 files changed, 606 insertions(+), 261 deletions(-)
 create mode 100644 src/components/chat/CallHistory.jsx

diff --git a/src/components/chat/CallHistory.jsx b/src/components/chat/CallHistory.jsx
new file mode 100644
index 0000000..b1493bc
--- /dev/null
+++ b/src/components/chat/CallHistory.jsx
@@ -0,0 +1,254 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowLeft, MoreVertical, Loader2 } from 'lucide-react';
+import { getCallHistoryMyList, getCallHistoryOthersList, deleteCallHistory } from '../../services/chatApi';
+import toast from 'react-hot-toast';
+import { useQuery } from '@tanstack/react-query';
+import { getHeaderDetails } from '../../api/preview.api';
+
+const CallHistory = ({ onBack }) => {
+  const [activeTab, setActiveTab] = useState('me');
+  const [historyList, setHistoryList] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const { data: headerData } = useQuery({
+    queryKey: ["headerDetails"],
+    queryFn: getHeaderDetails,
+  });
+  // console.log("headerData", headerData);
+
+  const myDetails = headerData?.myDetails || {};
+
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [showMenu, setShowMenu] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true);
+    setHistoryList([]);
+    try {
+      let res;
+      if (activeTab === 'me') {
+        res = await getCallHistoryMyList();
+      } else {
+        res = await getCallHistoryOthersList();
+      }
+
+      const data = res?.call_list || res?.data || res || [];
+      setHistoryList(Array.isArray(data) ? data : []);
+    } catch (error) {
+      toast.error("Failed to load call history.");
+      setHistoryList([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    setIsEditMode(false);
+    setSelectedIds([]);
+  }, [activeTab]);
+
+  const toggleSelection = (id) => {
+    if (selectedIds.includes(id)) {
+      setSelectedIds(selectedIds.filter(item => item !== id));
+    } else {
+      setSelectedIds([...selectedIds, id]);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (selectedIds.length === 0) return;
+
+    setIsDeleting(true);
+    try {
+      const res = await deleteCallHistory(selectedIds);
+      toast.success(res?.message || "History deleted successfully.");
+      setIsEditMode(false);
+      setSelectedIds([]);
+      fetchData();
+    } catch (error) {
+      toast.error("Failed to delete history.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const getSkeletons = () => {
+    return Array(5).fill(0).map((_, idx) => (
+      <div key={`skel-${idx}`} className="flex items-center gap-3 p-4 border-b border-gray-100 animate-pulse">
+        <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
+        <div className="flex-1 space-y-2">
+          <div className="h-4 bg-gray-200 rounded w-1/3"></div>
+          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+        </div>
+      </div>
+    ));
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-white relative">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-white min-h-[64px]">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          >
+            <ArrowLeft className="w-6 h-6 text-gray-800" />
+          </button>
+          <h2 className="text-xl font-bold text-[#1a237e]">Call History</h2>
+        </div>
+
+        <div className="relative">
+          <button
+            onClick={() => setShowMenu(!showMenu)}
+            className="p-2 rounded-full border border-gray-200 hover:bg-gray-50 flex items-center justify-center transition-colors shadow-sm"
+          >
+            <MoreVertical className="w-5 h-5 text-gray-700" />
+          </button>
+
+          {showMenu && (
+            <div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-100 z-50 overflow-hidden">
+              <button
+                onClick={() => {
+                  setIsEditMode(!isEditMode);
+                  setShowMenu(false);
+                  if (isEditMode) setSelectedIds([]);
+                }}
+                className="w-full px-4 py-3 text-left hover:bg-gray-50 text-gray-700 font-medium text-sm transition-colors"
+              >
+                {isEditMode ? "Cancel Deletion" : "Delete History"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* User Info Banner */}
+      <div className="p-4 flex items-center gap-4 bg-white border-b border-gray-100">
+        <div className="w-14 h-14 rounded-full overflow-hidden border border-gray-200 shadow-sm relative">
+          <img
+            src={myDetails.profile || "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png"}
+            alt="Profile"
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <h3 className="font-bold text-[#df1d46] text-[17px]">{myDetails.name || "User"}</h3>
+            {myDetails.is_paid && (
+              <span className="bg-[#0c8626] text-white text-[10px] font-bold px-2 py-0.5 rounded uppercase tracking-wider">Free</span> // Or Paid dynamically
+            )}
+          </div>
+          <p className="text-sm font-semibold text-gray-800">
+            ID : <span className="font-bold">{myDetails.member_id || myDetails.profile_id || "N/A"}</span>
+          </p>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex p-4 gap-4 bg-white sticky top-0 z-10 border-b border-gray-100 shadow-sm">
+        <button
+          onClick={() => setActiveTab('me')}
+          className={`flex-1 py-3 text-sm font-bold rounded-lg border transition-all ${activeTab === 'me'
+            ? 'bg-[#df1d46] text-white border-[#df1d46]'
+            : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'
+            }`}
+        >
+          Viewed By Me
+        </button>
+        <button
+          onClick={() => setActiveTab('others')}
+          className={`flex-1 py-3 text-sm font-bold rounded-lg border transition-all ${activeTab === 'others'
+            ? 'bg-[#df1d46] text-white border-[#df1d46]'
+            : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'
+            }`}
+        >
+          Viewed By Others
+        </button>
+      </div>
+
+      {/* Content List */}
+      <div className="flex-1 overflow-y-auto pb-20 relative bg-[#fcfcfc]">
+        {loading ? (
+          getSkeletons()
+        ) : historyList.length === 0 ? (
+          <div className="flex flex-col items-center justify-center p-8 mt-10">
+            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+              <span className="text-gray-400">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /><line x1="22" y1="2" x2="2" y2="22" /></svg>
+              </span>
+            </div>
+            <p className="text-gray-500 font-medium">No Call History found</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100 border-t border-gray-100">
+            {historyList.map((item, idx) => (
+              <div
+                key={item.id || idx}
+                onClick={() => isEditMode && toggleSelection(item.id)}
+                className={`flex items-center gap-4 p-4 transition-colors cursor-pointer hover:bg-gray-50 ${isEditMode && selectedIds.includes(item.id) ? 'bg-red-50/50' : 'bg-white'}`}
+              >
+                {/* Checkbox for Edit Mode */}
+                {isEditMode && (
+                  <div className="flex-shrink-0">
+                    <div className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${selectedIds.includes(item.id)
+                      ? 'bg-[#df1d46] border-[#df1d46]'
+                      : 'border-gray-300 bg-white'
+                      }`}>
+                      {selectedIds.includes(item.id) && (
+                        <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" /></svg>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Avatar */}
+                <img
+                  src={item.profile || "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png"}
+                  alt={item.name}
+                  className="w-14 h-14 rounded-full object-cover border border-gray-100 shadow-sm flex-shrink-0"
+                />
+
+                {/* Details */}
+                <div className="flex-1 min-w-0 flex flex-col justify-center">
+                  <div className="flex justify-between items-start mb-1.5">
+                    <h4 className="font-semibold text-gray-900 text-[16px] truncate pr-2">{item.name}</h4>
+                    <span className="text-xs text-gray-500 whitespace-nowrap mt-1">{item.date || item.created_at || "N/A"}</span>
+                  </div>
+
+                  {item.mobile ? (
+                    <p className="text-sm font-semibold text-gray-800 truncate">
+                      Mobile No : <span className="font-bold">{item.mobile}</span>
+                    </p>
+                  ) : (
+                    <p className="text-sm font-semibold text-gray-800 truncate">
+                      ID : <span className="font-bold uppercase">{item.member_id || "N/A"}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Delete Button (Sticky Bottom) */}
+      {isEditMode && selectedIds.length > 0 && (
+        <div className="absolute bottom-4 left-4 right-4 z-20">
+          <button
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className="w-full bg-[#A80000] hover:bg-red-900 text-white font-bold py-4 rounded-xl shadow-lg shadow-red-200 transition-all flex items-center justify-center gap-2 text-lg active:scale-[0.98] disabled:opacity-70 disabled:active:scale-100"
+          >
+            {isDeleting ? <Loader2 className="w-6 h-6 animate-spin" /> : "Delete"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CallHistory;
diff --git a/src/components/profiledetail/MatrimonyProfile.jsx b/src/components/profiledetail/MatrimonyProfile.jsx
index fb4c557..89c7c68 100644
--- a/src/components/profiledetail/MatrimonyProfile.jsx
+++ b/src/components/profiledetail/MatrimonyProfile.jsx
@@ -54,8 +54,8 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
   const education = data.educationalDetails;
   const lifestyle = data.lifestyleDetails;
 
-  const profileImages = personal.images && personal.images.length > 0 
-    ? personal.images 
+  const profileImages = personal.images && personal.images.length > 0
+    ? personal.images
     : [profile.profile_picture || "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png"];
 
   const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
@@ -235,10 +235,10 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
   const handleMessage = (e) => {
     if (e) e.stopPropagation();
-    
+
     if (profile.chat_id) {
-       navigate(`/chat/${profile.chat_id}`);
-       return;
+      navigate(`/chat/${profile.chat_id}`);
+      return;
     }
 
     if (!isUserPaid) {
@@ -267,16 +267,16 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
   const _handleCreateChat = async () => {
     if (isCreatingChat) return;
-    
+
     setIsChatConfirmModalOpen(false);
     setIsCreatingChat(true);
-    
+
     try {
       const response = await axiosInstance.post(API_ENDPOINTS.CHAT_CREATE, { profile_id: profile.id });
 
       if (response.data?.status === true || response.data?.status === 'success') {
         const newChatId = response.data?.chat_id;
-        
+
         try {
           await sendMessage(newChatId, "This profile has initiated a chat with you");
         } catch (msgErr) {
@@ -358,9 +358,9 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
     if (!value) return "N/A";
     const strValue = String(value);
     const isUpgrade = strValue.toLowerCase().includes("upgrade");
-    
+
     return (
-      <span 
+      <span
         className={`ml-3 font-semibold ${isUpgrade ? "text-[#DF1D46] underline cursor-pointer" : "text-gray-900"}`}
         onClick={() => isUpgrade && setIsUpgradeModalOpen(true)}
       >
@@ -378,11 +378,11 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
   return (
     <div className="bg-gray-50 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
-      <ReportModel 
-        open={reportModalOpen} 
-        onClose={() => setReportModalOpen(false)} 
-        onSubmit={handleReportAction} 
-        actionType={reportActionType} 
+      <ReportModel
+        open={reportModalOpen}
+        onClose={() => setReportModalOpen(false)}
+        onSubmit={handleReportAction}
+        actionType={reportActionType}
       />
       <div
         className="max-w-[1200px] mx-auto 
@@ -467,20 +467,20 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                 </button>
                 {showMenu && (
                   <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border z-10">
-                    <button 
+                    <button
                       onClick={() => { setShowMenu(false); handleShortlist(); }}
                       className={`w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 ${profile.is_shortlisted === 1 ? 'text-green-700' : ''}`}
                     >
-                      <Bookmark className={`w-4 h-4 ${profile.is_shortlisted === 1 ? 'fill-current text-green-700' : ''}`} /> 
+                      <Bookmark className={`w-4 h-4 ${profile.is_shortlisted === 1 ? 'fill-current text-green-700' : ''}`} />
                       {profile.is_shortlisted === 1 ? "Shortlisted" : "Shortlist"}
                     </button>
-                    <button 
+                    <button
                       onClick={() => { setShowMenu(false); navigate("/chat"); }}
                       className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
                     >
                       <MessageCircle className="w-4 h-4" /> Send Message
                     </button>
-                    <button 
+                    <button
                       onClick={() => {
                         setShowMenu(false);
                         if (profile.is_blocked) {
@@ -493,7 +493,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                     >
                       <Ban className="w-4 h-4" /> {profile.is_blocked ? "Unblock Profile" : "Block Profile"}
                     </button>
-                    <button 
+                    <button
                       onClick={() => {
                         setShowMenu(false);
                         openReportModal('report');
@@ -526,7 +526,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                   </>
                 )}
                 {(profile.religion || profile.caste || profile.sub_caste || profile.college_name) && (
-                   <>
+                  <>
                     <span>•</span>
                     <span className="text-sm">
                       {[
@@ -536,29 +536,22 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                         profile.college_name
                       ].filter(v => v !== "N/A" && v !== undefined).join(" / ")}
                     </span>
-                   </>
+                  </>
                 )}
               </p>
             </div>
 
             {/* Action Buttons */}
             <div className="flex justify-start gap-3 mt-4">
-              {profile.is_blocked ? (
-                <button 
-                  onClick={handleUnblock}
-                  className="w-[fit-content] flex items-center justify-center gap-2 py-2 px-8 bg-gray-500 text-white rounded-full font-bold text-sm hover:bg-gray-600 transition-all active:scale-[0.98]"
-                >
-                  <Ban size={18} /> Unblock Profile
-                </button>
-              ) : profile.is_send_interest_received && profile.statusReceived?.toLowerCase() === 'pending' ? (
+              {profile.is_send_interest_received && profile.statusReceived?.toLowerCase() === 'pending' ? (
                 <>
-                  <button 
-                    onClick={handleSendInterest} 
+                  <button
+                    onClick={handleSendInterest}
                     className="w-[fit-content] flex items-center justify-center gap-2 py-2 px-8 bg-[#0C8626] text-white rounded-full font-bold text-sm hover:bg-green-700 transition-all active:scale-[0.98]"
                   >
                     <Heart size={18} fill="white" /> Accept
                   </button>
-                  <button 
+                  <button
                     onClick={handleDecline}
                     className="w-[fit-content] flex items-center justify-center gap-2 py-2 px-8 bg-white border border-red-200 text-red-600 rounded-full font-bold text-sm hover:bg-red-50 transition-all active:scale-[0.98]"
                   >
@@ -566,7 +559,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                   </button>
                 </>
               ) : (!profile.is_send_interest && !profile.is_send_interest_received) ? (
-                <button 
+                <button
                   onClick={handleSendInterest}
                   className="w-[fit-content] bg-[#034E08] text-white py-2.5 px-10 rounded-full hover:bg-green-800 transition-colors flex items-center justify-center gap-2 font-bold text-sm shadow-lg shadow-green-900/10"
                 >
@@ -574,13 +567,13 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                 </button>
               ) : (
                 <>
-                  <button 
+                  <button
                     onClick={handleCall}
                     className="w-[fit-content] flex items-center justify-center gap-2 py-2.5 px-8 bg-white border border-green-200 text-green-700 rounded-full font-bold text-sm hover:bg-green-50 transition-all active:scale-[0.98] shadow-sm"
                   >
                     <Phone size={18} /> Call
                   </button>
-                  <button 
+                  <button
                     onClick={handleMessage}
                     className="w-[fit-content] flex items-center justify-center gap-2 py-2.5 px-8 bg-white border border-red-200 text-[#DF1D46] rounded-full font-bold text-sm hover:bg-red-50 transition-all active:scale-[0.98] shadow-sm"
                   >
@@ -720,7 +713,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
         </div>
       )}
 
-  
+
       <div className="w-[100%] max-w-[1200px] mx-auto my-10 grid grid-cols-1 gap-4 md:grid-cols-2">
         {/* Personal Information Section */}
         <div className="border border-gray-200 rounded-lg bg-pink-50/30">
@@ -1056,162 +1049,160 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
         </div>
 
-          <div className="my-8">
-            <div className="flex items-center gap-2 p-3 bg-pink-100">
-              <div className="bg-white p-2 rounded-full">
-                <UserIcon className="w-5 h-5 text-[#A70710]" />
-              </div>
-              <h3 className="font-semibold text-lg">Contact Details</h3>
+        <div className="my-8">
+          <div className="flex items-center gap-2 p-3 bg-pink-100">
+            <div className="bg-white p-2 rounded-full">
+              <UserIcon className="w-5 h-5 text-[#A70710]" />
             </div>
+            <h3 className="font-semibold text-lg">Contact Details</h3>
+          </div>
 
-            <div className="p-5 space-y-3 text-sm">
-              <div className="flex">
-                <span className="text-gray-600 w-48">Phone Number</span>
-                <span className="text-gray-400">:</span>
-                <span 
-                  className={`ml-3 font-semibold cursor-pointer ${
-                    (profile.mobile || "").toLowerCase().includes("view") || (profile.mobile || "").toLowerCase().includes("upgrade") 
-                      ? "text-[#DF1D46] underline" 
-                      : "text-gray-900"
+          <div className="p-5 space-y-3 text-sm">
+            <div className="flex">
+              <span className="text-gray-600 w-48">Phone Number</span>
+              <span className="text-gray-400">:</span>
+              <span
+                className={`ml-3 font-semibold cursor-pointer ${(profile.mobile || "").toLowerCase().includes("view") || (profile.mobile || "").toLowerCase().includes("upgrade")
+                    ? "text-[#DF1D46] underline"
+                    : "text-gray-900"
                   }`}
-                  onClick={() => _handleContactInteraction('mobile')}
-                >
-                  {unlockedMobile || profile.mobile || "N/A"}
-                </span>
-              </div>
-              <div className="flex">
-                <span className="text-gray-600 w-48">Email</span>
-                <span className="text-gray-400">:</span>
-                <span 
-                  className={`ml-3 font-semibold cursor-pointer ${
-                    (profile.email || "").toLowerCase().includes("view") || (profile.email || "").toLowerCase().includes("upgrade") 
-                      ? "text-[#DF1D46] underline" 
-                      : "text-gray-900"
+                onClick={() => _handleContactInteraction('mobile')}
+              >
+                {unlockedMobile || profile.mobile || "N/A"}
+              </span>
+            </div>
+            <div className="flex">
+              <span className="text-gray-600 w-48">Email</span>
+              <span className="text-gray-400">:</span>
+              <span
+                className={`ml-3 font-semibold cursor-pointer ${(profile.email || "").toLowerCase().includes("view") || (profile.email || "").toLowerCase().includes("upgrade")
+                    ? "text-[#DF1D46] underline"
+                    : "text-gray-900"
                   }`}
-                  onClick={() => _handleContactInteraction('email')}
-                >
-                  {unlockedEmail || profile.email || "N/A"}
-                </span>
-              </div>
+                onClick={() => _handleContactInteraction('email')}
+              >
+                {unlockedEmail || profile.email || "N/A"}
+              </span>
             </div>
           </div>
+        </div>
 
-          {/* Educational & Professional Section */}
-          <div className="my-8">
-            <div className="flex items-center gap-2 p-3 bg-pink-100 rounded-t-lg">
-              <div className="bg-white p-2 rounded-full">
-                <BookOpen className="w-5 h-5 text-[#A70710]" />
-              </div>
-              <h3 className="font-semibold text-lg">Educational & Professional</h3>
-            </div>
-
-            <div className="p-5 space-y-3 text-sm bg-white border border-gray-200 border-t-0 rounded-b-lg">
-              {(education.education || safeVal(profile.education, 'education_name')) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Highest Qualification</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.education || safeVal(profile.education, 'education_name'))}
-                </div>
-              )}
-              {(education.study_field || safeVal(profile.study_field, 'study_field_name')) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Field of Study</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.study_field || safeVal(profile.study_field, 'study_field_name'))}
-                </div>
-              )}
-              {(profile.college_name || education.college_name) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">College Name</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(profile.college_name || education.college_name)}
-                </div>
-              )}
-              {(education.employee_type || safeVal(profile.employee_type, 'employee_type_name')) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Employee type</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.employee_type || safeVal(profile.employee_type, 'employee_type_name'))}
-                </div>
-              )}
-              {(education.occupation || safeVal(profile.occupation, 'occupation_name')) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Occupation</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.occupation || safeVal(profile.occupation, 'occupation_name'))}
-                </div>
-              )}
-              {profile.occupation_details && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Occupation Details</span>
-                  <span className="text-gray-400">:</span>
-                  <span className="ml-3 text-gray-900">{profile.occupation_details}</span>
-                </div>
-              )}
-              {(education.company_name || profile.company_name) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Organization Name</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.company_name || profile.company_name)}
-                </div>
-              )}
-              {(profile.income_currency || education.income_currency) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Income Currency Type</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(profile.income_currency || education.income_currency)}
-                </div>
-              )}
-              {(education.annual_income || safeVal(profile.annual_income, 'annual_income_name')) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Annual Income</span>
-                  <span className="text-gray-400">:</span>
-                  {_renderValue(education.annual_income || safeVal(profile.annual_income, 'annual_income_name'))}
-                </div>
-              )}
+        {/* Educational & Professional Section */}
+        <div className="my-8">
+          <div className="flex items-center gap-2 p-3 bg-pink-100 rounded-t-lg">
+            <div className="bg-white p-2 rounded-full">
+              <BookOpen className="w-5 h-5 text-[#A70710]" />
             </div>
+            <h3 className="font-semibold text-lg">Educational & Professional</h3>
           </div>
 
-          {/* Work Location Section */}
-          <div className="my-8">
-            <div className="flex items-center gap-2 p-3 bg-pink-100 rounded-t-lg">
-              <div className="bg-white p-2 rounded-full">
-                <MapPin className="w-5 h-5 text-[#A70710]" />
+          <div className="p-5 space-y-3 text-sm bg-white border border-gray-200 border-t-0 rounded-b-lg">
+            {(education.education || safeVal(profile.education, 'education_name')) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Highest Qualification</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.education || safeVal(profile.education, 'education_name'))}
               </div>
-              <h3 className="font-semibold text-lg">Work Location</h3>
-            </div>
-
-            <div className="p-5 space-y-3 text-sm bg-white border border-gray-200 border-t-0 rounded-b-lg">
-              {(education.work_country_name || profile.work_country_name) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Country</span>
-                  <span className="text-gray-400">:</span>
-                  <span className="ml-3 text-gray-900">{education.work_country_name || profile.work_country_name}</span>
-                </div>
-              )}
-              {(education.work_state_name || profile.work_state_name) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">State</span>
-                  <span className="text-gray-400">:</span>
-                  <span className="ml-3 text-gray-900">{education.work_state_name || profile.work_state_name}</span>
-                </div>
-              )}
-              {(education.work_city || education.work_district_name || profile.work_city || profile.work_district_name) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">City</span>
-                  <span className="text-gray-400">:</span>
-                  <span className="ml-3 text-gray-900">{education.work_city || education.work_district_name || profile.work_city || profile.work_district_name}</span>
-                </div>
-              )}
-              {(education.work_location || profile.work_location) && (
-                <div className="flex">
-                  <span className="text-gray-600 w-48">Address</span>
-                  <span className="text-gray-400">:</span>
-                  <span className="ml-3 text-gray-900">{education.work_location || profile.work_location}</span>
-                </div>
-              )}
-            </div>
+            )}
+            {(education.study_field || safeVal(profile.study_field, 'study_field_name')) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Field of Study</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.study_field || safeVal(profile.study_field, 'study_field_name'))}
+              </div>
+            )}
+            {(profile.college_name || education.college_name) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">College Name</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(profile.college_name || education.college_name)}
+              </div>
+            )}
+            {(education.employee_type || safeVal(profile.employee_type, 'employee_type_name')) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Employee type</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.employee_type || safeVal(profile.employee_type, 'employee_type_name'))}
+              </div>
+            )}
+            {(education.occupation || safeVal(profile.occupation, 'occupation_name')) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Occupation</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.occupation || safeVal(profile.occupation, 'occupation_name'))}
+              </div>
+            )}
+            {profile.occupation_details && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Occupation Details</span>
+                <span className="text-gray-400">:</span>
+                <span className="ml-3 text-gray-900">{profile.occupation_details}</span>
+              </div>
+            )}
+            {(education.company_name || profile.company_name) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Organization Name</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.company_name || profile.company_name)}
+              </div>
+            )}
+            {(profile.income_currency || education.income_currency) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Income Currency Type</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(profile.income_currency || education.income_currency)}
+              </div>
+            )}
+            {(education.annual_income || safeVal(profile.annual_income, 'annual_income_name')) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Annual Income</span>
+                <span className="text-gray-400">:</span>
+                {_renderValue(education.annual_income || safeVal(profile.annual_income, 'annual_income_name'))}
+              </div>
+            )}
           </div>
+        </div>
+
+        {/* Work Location Section */}
+        <div className="my-8">
+          <div className="flex items-center gap-2 p-3 bg-pink-100 rounded-t-lg">
+            <div className="bg-white p-2 rounded-full">
+              <MapPin className="w-5 h-5 text-[#A70710]" />
+            </div>
+            <h3 className="font-semibold text-lg">Work Location</h3>
+          </div>
+
+          <div className="p-5 space-y-3 text-sm bg-white border border-gray-200 border-t-0 rounded-b-lg">
+            {(education.work_country_name || profile.work_country_name) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Country</span>
+                <span className="text-gray-400">:</span>
+                <span className="ml-3 text-gray-900">{education.work_country_name || profile.work_country_name}</span>
+              </div>
+            )}
+            {(education.work_state_name || profile.work_state_name) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">State</span>
+                <span className="text-gray-400">:</span>
+                <span className="ml-3 text-gray-900">{education.work_state_name || profile.work_state_name}</span>
+              </div>
+            )}
+            {(education.work_city || education.work_district_name || profile.work_city || profile.work_district_name) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">City</span>
+                <span className="text-gray-400">:</span>
+                <span className="ml-3 text-gray-900">{education.work_city || education.work_district_name || profile.work_city || profile.work_district_name}</span>
+              </div>
+            )}
+            {(education.work_location || profile.work_location) && (
+              <div className="flex">
+                <span className="text-gray-600 w-48">Address</span>
+                <span className="text-gray-400">:</span>
+                <span className="ml-3 text-gray-900">{education.work_location || profile.work_location}</span>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
       {/* Modals */}
       <UpgradeModal
@@ -1258,31 +1249,31 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
         {/* View Contact Confirmation Modal */}
         {isViewContactModalOpen && (
           <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-            <motion.div 
+            <motion.div
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.9 }}
               className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center relative"
             >
-              <button 
-                onClick={() => setIsViewContactModalOpen(false)} 
+              <button
+                onClick={() => setIsViewContactModalOpen(false)}
                 className="absolute top-6 left-6 text-gray-400 hover:text-gray-600 transition-colors"
               >
-                 <ChevronLeft size={24} />
+                <ChevronLeft size={24} />
               </button>
               <h3 className="text-3xl font-bold text-gray-900 mb-8 mt-2">Note</h3>
               <p className="text-gray-600 mb-10 text-[17px] leading-relaxed px-2">
                 You need to view this profile's contact details. If you choose to <span className="text-[#DF1D46] font-bold">"Proceed"</span> one count will be deducted from your subscription.
               </p>
               <div className="flex gap-4 mt-2">
-                <button 
-                  onClick={() => setIsViewContactModalOpen(false)} 
+                <button
+                  onClick={() => setIsViewContactModalOpen(false)}
                   className="flex-1 py-4 border border-gray-100 rounded-2xl font-bold text-gray-500 hover:bg-gray-50 transition-all"
                 >
                   Cancel
                 </button>
-                <button 
-                  onClick={_handleViewContact} 
+                <button
+                  onClick={_handleViewContact}
                   className="flex-1 py-4 bg-[#DF1D46] text-white rounded-2xl font-bold hover:bg-red-700 shadow-lg shadow-red-200 transition-all"
                 >
                   Proceed
@@ -1357,7 +1348,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
               </div>
               <h3 className="text-2xl font-bold text-[#0C8626] mb-2">Success!</h3>
               <p className="text-gray-500 mb-6">The contact details have been unlocked.</p>
-              
+
               <div className="bg-gray-50 rounded-2xl p-6 mb-8 border border-gray-100 flex flex-col items-center justify-center gap-4">
                 {(() => {
                   const mobile = unlockedMobile || (profile.mobile && !profile.mobile.toLowerCase().includes("view") ? profile.mobile : null);
@@ -1369,7 +1360,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                     </div>
                   );
                 })()}
-                
+
                 {(() => {
                   const email = unlockedEmail || (profile.email && !profile.email.toLowerCase().includes("view") ? profile.email : null);
                   if (!email) return null;
@@ -1412,9 +1403,9 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
         {isChatConfirmModalOpen && (() => {
           const currentMobile = unlockedMobile || profile.mobile || "";
           const mobileLower = currentMobile.toLowerCase();
-          const isMobileVisible = currentMobile !== "" && 
-                                 !mobileLower.includes("upgrade") && 
-                                 !mobileLower.includes("view contact");
+          const isMobileVisible = currentMobile !== "" &&
+            !mobileLower.includes("upgrade") &&
+            !mobileLower.includes("view contact");
 
           return (
             <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
@@ -1424,29 +1415,29 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                 exit={{ opacity: 0, scale: 0.95 }}
                 className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center relative"
               >
-                <button 
-                  onClick={() => setIsChatConfirmModalOpen(false)} 
+                <button
+                  onClick={() => setIsChatConfirmModalOpen(false)}
                   className="absolute top-6 left-6 text-gray-400 hover:text-gray-600 transition-colors"
                 >
-                   <ChevronLeft size={24} />
+                  <ChevronLeft size={24} />
                 </button>
                 <h3 className="text-3xl font-bold text-gray-900 mb-8 mt-2">
                   {isMobileVisible ? "Ready to Chat?" : "Note"}
                 </h3>
                 <p className="text-gray-600 mb-10 text-[17px] leading-relaxed px-2">
-                  {isMobileVisible 
+                  {isMobileVisible
                     ? <>Are you ready to chat with <span className="font-bold">{currentMobile}</span>?</>
                     : <>Starting a conversation will use <span className="text-[#DF1D46] font-bold">1 chat count</span>. Are you ready to proceed?</>}
                 </p>
                 <div className="flex gap-4 mt-2">
-                  <button 
-                    onClick={() => setIsChatConfirmModalOpen(false)} 
+                  <button
+                    onClick={() => setIsChatConfirmModalOpen(false)}
                     className="flex-1 py-4 border border-gray-100 rounded-2xl font-bold text-gray-500 hover:bg-gray-50 transition-all"
                   >
                     Cancel
                   </button>
-                  <button 
-                    onClick={_handleCreateChat} 
+                  <button
+                    onClick={_handleCreateChat}
                     className={`flex-1 py-4 text-white rounded-2xl font-bold transition-all shadow-lg ${isCreatingChat ? "bg-gray-400" : "bg-[#DF1D46] hover:bg-red-700 shadow-red-200"}`}
                   >
                     {isCreatingChat ? "Starting..." : "Proceed"}
diff --git a/src/pages/ChatPage.jsx b/src/pages/ChatPage.jsx
index b72e70b..def7fa7 100644
--- a/src/pages/ChatPage.jsx
+++ b/src/pages/ChatPage.jsx
@@ -4,7 +4,8 @@ import { useParams } from 'react-router-dom';
 import { Search, MoreVertical, Send, Phone, Video, Check, CheckCheck, ArrowLeft, Star, Share2, Flag, Ban, Trash2, Loader2, MessageCircle } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
 import ReportModal from '../components/common/ReportModal';
-import { getChatList, getChatMessages, sendMessage } from '../services/chatApi';
+import { getChatList, getChatMessages, sendMessage, deleteChats } from '../services/chatApi';
+import CallHistory from '../components/chat/CallHistory';
 import toast from 'react-hot-toast';
 import { useWebSocket } from '../hooks/useWebSocket';
 
@@ -22,7 +23,7 @@ const ChatUI = () => {
   const [showMenu, setShowMenu] = useState(false);
   const [showChatMenu, setShowChatMenu] = useState(false);
   const [openReport, setOpenReport] = useState(false);
-  
+
   const [contacts, setContacts] = useState([]);
   const [chatMessages, setChatMessages] = useState([]);
   const [chatDetails, setChatDetails] = useState(null);
@@ -33,7 +34,12 @@ const ChatUI = () => {
   const [loadingMore, setLoadingMore] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
-  
+
+  // Chat Deletion state
+  const [isEditContactMode, setIsEditContactMode] = useState(false);
+  const [selectedChats, setSelectedChats] = useState([]);
+  const [isDeletingChats, setIsDeletingChats] = useState(false);
+
   const messagesEndRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const isPaginating = useRef(false);
@@ -43,28 +49,28 @@ const ChatUI = () => {
 
   // WebSocket Integration - Listening to BOTH Notifications and the Active Chat
   const profileId = localStorage.getItem("profile_id") || personalDetails?.id;
-  const userId = localStorage.getItem("user_id") || profileId; 
-  
+  const userId = localStorage.getItem("user_id") || profileId;
+
   // To show messages INSTANTLY in bubbles, we must listen to the specific chat channel
   const activeChatChannel = selectedChat ? `chat-${selectedChat}` : null;
 
   // Flutter uses both dotted and non-dotted formats for channels in some Reverb setups
   const wsChannels = React.useMemo(() => {
     const channels = [];
-    
+
     if (userId && userId !== "null") {
       channels.push(`user-chat-notification${userId}`);
       channels.push(`user-chat-notification.${userId}`); // Dotted version
       channels.push(`user-notification${userId}`);
       channels.push(`user-notification.${userId}`); // Dotted version
     }
-    
+
     if (chatDetails?.web_socket_channel) {
       channels.push(chatDetails.web_socket_channel);
     } else if (activeChatChannel) {
       channels.push(activeChatChannel);
     }
-    
+
     return [...new Set(channels.filter(Boolean))];
   }, [userId, activeChatChannel, chatDetails?.web_socket_channel]);
 
@@ -125,11 +131,11 @@ const ChatUI = () => {
 
   const loadMoreMessages = useCallback(async () => {
     if (!selectedChat || loadingMore || !hasMore) return;
-    
+
     setLoadingMore(true);
     isPaginating.current = true;
     const nextPage = currentPage + 1;
-    
+
     try {
       if (scrollContainerRef.current) {
         previousScrollHeight.current = scrollContainerRef.current.scrollHeight;
@@ -177,11 +183,11 @@ const ChatUI = () => {
   useEffect(() => {
     const currentLen = wsMessages.length;
     const lastProcessed = processedMsgCount.current;
-    
+
     if (currentLen > lastProcessed) {
       const newWsMsgs = wsMessages.slice(lastProcessed);
       console.log(`[WS-REAL-TIME] New messages: ${newWsMsgs.length} (Total: ${currentLen}, Last Processed: ${lastProcessed})`);
-      
+
       let shouldRefreshContacts = false;
       let shouldRefreshMessages = false;
 
@@ -191,16 +197,16 @@ const ChatUI = () => {
         if (lastMsg.event === 'pusher_internal:subscription_succeeded') return;
 
         console.log(`[WS-REAL-TIME] Processing: ${lastMsg.event}`);
-        
+
         try {
           const data = lastMsg.data;
           const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
           const msgObj = parsedData.message || parsedData.data || parsedData;
-          
+
           // LENIENT STRATEGY: If event name suggests a message or if we have data, refresh!
-          const isMessageEvent = lastMsg.event?.toLowerCase().includes('message') || 
-                               lastMsg.event?.toLowerCase().includes('chat');
-                               
+          const isMessageEvent = lastMsg.event?.toLowerCase().includes('message') ||
+            lastMsg.event?.toLowerCase().includes('chat');
+
           if (isMessageEvent || (msgObj && (msgObj.id || msgObj.message || msgObj.chat_id))) {
             console.log("[WS-REAL-TIME] Match found!");
             shouldRefreshContacts = true;
@@ -225,7 +231,7 @@ const ChatUI = () => {
 
             if (selectedChat) {
               shouldRefreshMessages = true;
-              
+
               // Manual injection for instant UI update
               if (msgObj && (msgObj.id || msgObj.message)) {
                 setChatMessages(prev => {
@@ -265,7 +271,7 @@ const ChatUI = () => {
 
         // Keep track of timers if needed, but for simplicity here we just use the count
       }
-      
+
       // ALWAYS update the ref if we have new messages, even if they were skipped/invalid
       processedMsgCount.current = currentLen;
     }
@@ -332,7 +338,7 @@ const ChatUI = () => {
         // Refresh messages and contacts silently in the background
         setMessage('');
         fetchMessages(selectedChat, true);
-        fetchContacts(searchTerm, true); 
+        fetchContacts(searchTerm, true);
       }
     } catch (error) {
       toast.error("Failed to send message");
@@ -359,44 +365,77 @@ const ChatUI = () => {
     setShowMenu(false);
   };
 
+  const toggleChatSelection = (id) => {
+    if (selectedChats.includes(id)) {
+      setSelectedChats(selectedChats.filter(item => item !== id));
+    } else {
+      setSelectedChats([...selectedChats, id]);
+    }
+  };
+
+  const handleDeleteChats = async () => {
+    if (selectedChats.length === 0) return;
+    setIsDeletingChats(true);
+    try {
+      const res = await deleteChats(selectedChats);
+      toast.success(res?.message || "Chats deleted successfully");
+      setIsEditContactMode(false);
+      setSelectedChats([]);
+      fetchContacts(searchTerm);
+      if (selectedChats.includes(selectedChat)) {
+        setSelectedChat(null);
+      }
+    } catch (error) {
+      toast.error("Failed to delete chats");
+    } finally {
+      setIsDeletingChats(false);
+    }
+  };
+
   return (
     <>
       <ReportModal open={openReport} onClose={() => setOpenReport(false)} />
-    
+
       <div className="w-full max-w-[1400px] mx-auto flex h-[85vh] gap-[20px] bg-gray-50 my-4">
         {/* Sidebar - Chat List */}
-        <div key="chat-sidebar" className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${
-          showChatOnMobile || showCallHistory ? 'hidden md:flex' : 'flex'
-        }`}>
+        <div key="chat-sidebar" className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${showChatOnMobile || showCallHistory ? 'hidden md:flex' : 'flex'
+          }`}>
           {/* Header */}
           <div className="p-4 border-b border-gray-200">
             <div className="flex items-center justify-between mb-4">
               <h1 className="text-xl font-semibold">Chat</h1>
               <div className="relative">
-                <button 
+                <button
                   onClick={() => setShowMenu(!showMenu)}
                   className="p-2 hover:bg-gray-100 rounded"
                 >
                   <MoreVertical className="w-5 h-5" />
                 </button>
-                
+
                 {showMenu && (
                   <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
-                    <button 
+                    <button
                       onClick={handleCallHistoryClick}
                       className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100"
                     >
                       <Phone className="w-4 h-4" />
                       <span className="text-sm">Call History</span>
                     </button>
-                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
-                      <span className="text-sm">Clear chat</span>
+                    <button
+                      onClick={() => {
+                        setIsEditContactMode(!isEditContactMode);
+                        setShowMenu(false);
+                        if (isEditContactMode) setSelectedChats([]);
+                      }}
+                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600"
+                    >
+                      <span className="text-sm">{isEditContactMode ? "Cancel Clear" : "Clear chat"}</span>
                     </button>
                   </div>
                 )}
               </div>
             </div>
-            
+
             {/* Search */}
             <div className="relative">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
@@ -425,11 +464,28 @@ const ChatUI = () => {
               contacts.map((contact, index) => (
                 <div
                   key={`contact-${contact.id}-${index}`}
-                  onClick={() => handleChatSelect(contact.id)}
-                  className={`flex items-center gap-3 p-4 cursor-pointer hover:bg-gray-50 border-b border-gray-100 ${
-                    selectedChat === contact.id ? 'bg-blue-50' : ''
-                  }`}
+                  onClick={() => {
+                    if (isEditContactMode) {
+                      toggleChatSelection(contact.id);
+                    } else {
+                      handleChatSelect(contact.id);
+                    }
+                  }}
+                  className={`flex items-center gap-3 p-4 cursor-pointer hover:bg-gray-50 border-b border-gray-100 ${selectedChat === contact.id ? 'bg-blue-50' : ''
+                    } ${isEditContactMode && selectedChats.includes(contact.id) ? 'bg-red-50/50' : ''}`}
                 >
+                  {isEditContactMode && (
+                    <div className="flex-shrink-0 mr-1">
+                      <div className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${selectedChats.includes(contact.id)
+                        ? 'bg-[#df1d46] border-[#df1d46]'
+                        : 'border-gray-300 bg-white'
+                        }`}>
+                        {selectedChats.includes(contact.id) && (
+                          <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7" /></svg>
+                        )}
+                      </div>
+                    </div>
+                  )}
                   <div className="relative">
                     <img
                       src={contact.profile || "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png"}
@@ -460,13 +516,24 @@ const ChatUI = () => {
               ))
             )}
           </div>
+          {/* Delete Button for Chats */}
+          {isEditContactMode && selectedChats.length > 0 && (
+            <div className="p-4 border-t border-gray-100 bg-white">
+              <button
+                onClick={handleDeleteChats}
+                disabled={isDeletingChats}
+                className="w-full bg-[#A80000] hover:bg-red-900 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 transition-all active:scale-[0.98]"
+              >
+                {isDeletingChats ? <Loader2 className="w-5 h-5 animate-spin" /> : "Delete Selected"}
+              </button>
+            </div>
+          )}
         </div>
 
         {/* Chat Area */}
         {selectedChat && !showCallHistory && (
-          <div key="chat-main-area" className={`border border-1 border-gray-200 rounded-[10px] flex-1 flex flex-col bg-white ${
-            showChatOnMobile ? 'flex' : 'hidden md:flex'
-          }`}>
+          <div key="chat-main-area" className={`border border-1 border-gray-200 rounded-[10px] flex-1 flex flex-col bg-white ${showChatOnMobile ? 'flex' : 'hidden md:flex'
+            }`}>
             {/* Chat Header */}
             <div className="flex items-center justify-between p-4 border-b border-gray-200">
               <div className="flex items-center gap-3">
@@ -493,13 +560,13 @@ const ChatUI = () => {
               </div>
               <div className="flex items-center gap-2">
                 <div className="relative">
-                  <button 
+                  <button
                     onClick={() => setShowChatMenu(!showChatMenu)}
                     className="p-2 hover:bg-gray-100 rounded"
                   >
                     <MoreVertical className="w-5 h-5 text-gray-600" />
                   </button>
-                  
+
                   {showChatMenu && (
                     <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                       <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
@@ -510,7 +577,7 @@ const ChatUI = () => {
                         <Share2 className="w-4 h-4" />
                         <span className="text-sm">Share</span>
                       </button>
-                      <button onClick={() => setOpenReport(true)}  className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
+                      <button onClick={() => setOpenReport(true)} className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
                         <Flag className="w-4 h-4" />
                         <span className="text-sm">Report</span>
                       </button>
@@ -525,7 +592,7 @@ const ChatUI = () => {
             </div>
 
             {/* Messages */}
-            <div 
+            <div
               ref={scrollContainerRef}
               className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50"
             >
@@ -543,7 +610,7 @@ const ChatUI = () => {
 
               {hasMore && !loadingMore && chatMessages.length > 0 && (
                 <div className="flex justify-center">
-                  <button 
+                  <button
                     onClick={loadMoreMessages}
                     className="text-xs text-blue-600 hover:underline py-1"
                   >
@@ -562,11 +629,10 @@ const ChatUI = () => {
                     className={`flex ${msg.chat_by === 'me' ? 'justify-end' : 'justify-start'}`}
                   >
                     <div
-                      className={`max-w-[75%] md:max-w-md px-4 py-2 rounded-2xl shadow-sm ${
-                        msg.chat_by === 'me'
-                          ? 'bg-[#cbf5ea] text-gray-900 rounded-br-sm'
-                          : 'bg-white text-gray-900 rounded-bl-sm'
-                      }`}
+                      className={`max-w-[75%] md:max-w-md px-4 py-2 rounded-2xl shadow-sm ${msg.chat_by === 'me'
+                        ? 'bg-[#cbf5ea] text-gray-900 rounded-br-sm'
+                        : 'bg-white text-gray-900 rounded-bl-sm'
+                        }`}
                     >
                       <p className="text-sm break-words">{msg.message}</p>
                       <div className='flex gap-1 items-center justify-end mt-1'>
@@ -629,19 +695,11 @@ const ChatUI = () => {
           </div>
         )}
 
-        {/* Call History Placeholder (Keep existing or update as needed) */}
+        {/* Call History Page */}
         {showCallHistory && (
-          <div key="chat-call-history" className="flex-1 flex items-center justify-center bg-gray-50">
-             <div className="text-center">
-                <h2 className="text-xl font-semibold mb-2">Call History</h2>
-                <p className="text-gray-500">Feature coming soon</p>
-                <button 
-                  onClick={handleBackToList}
-                  className="mt-4 px-6 py-2 bg-[#034E08] text-white rounded-lg"
-                >
-                  Back to Chat
-                </button>
-             </div>
+          <div key="chat-call-history" className={`border border-1 border-gray-200 rounded-[10px] flex-1 overflow-hidden bg-[#fcfcfc] ${!showChatOnMobile ? 'hidden md:flex flex-col' : 'flex flex-col'
+            }`}>
+            <CallHistory onBack={handleBackToList} />
           </div>
         )}
       </div>
diff --git a/src/services/chatApi.js b/src/services/chatApi.js
index 3ad5878..0693a3d 100644
--- a/src/services/chatApi.js
+++ b/src/services/chatApi.js
@@ -32,3 +32,45 @@ export const sendMessage = async (chatId, message) => {
     throw error;
   }
 };
+
+export const getCallHistoryMyList = async () => {
+  try {
+    const response = await axiosInstance.get(`call_my_list`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching my call history:", error);
+    throw error;
+  }
+};
+
+export const getCallHistoryOthersList = async () => {
+  try {
+    const response = await axiosInstance.get(`call_others_list`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching others call history:", error);
+    throw error;
+  }
+};
+
+export const deleteCallHistory = async (ids) => {
+  try {
+    const queryStr = ids.map((id, index) => `ids[${index}]=${id}`).join('&');
+    const response = await axiosInstance.get(`call_list_delete?${queryStr}`);
+    return response.data;
+  } catch (error) {
+    console.error("Error deleting call history:", error);
+    throw error;
+  }
+};
+
+export const deleteChats = async (ids) => {
+  try {
+    const queryStr = ids.map((id, index) => `ids[${index}]=${id}`).join('&');
+    const response = await axiosInstance.post(`chat/delete?${queryStr}`);
+    return response.data;
+  } catch (error) {
+    console.error("Error deleting chats:", error);
+    throw error;
+  }
+};