Call history, Clear chat

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;

src/components/profiledetail/MatrimonyProfile.jsx

@@ -543,14 +543,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
             {/* 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}
@@ -1069,8 +1062,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
               <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") 
+                className={`ml-3 font-semibold cursor-pointer ${(profile.mobile || "").toLowerCase().includes("view") || (profile.mobile || "").toLowerCase().includes("upgrade")
                     ? "text-[#DF1D46] underline"
                     : "text-gray-900"
                   }`}
@@ -1083,8 +1075,7 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
               <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") 
+                className={`ml-3 font-semibold cursor-pointer ${(profile.email || "").toLowerCase().includes("view") || (profile.email || "").toLowerCase().includes("upgrade")
                     ? "text-[#DF1D46] underline"
                     : "text-gray-900"
                   }`}

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';
 
@@ -34,6 +35,11 @@ const ChatUI = () => {
   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);
@@ -359,14 +365,40 @@ 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">
@@ -389,8 +421,15 @@ const ChatUI = () => {
                       <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>
                 )}
@@ -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,12 +516,23 @@ 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">
@@ -562,8 +629,7 @@ 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'
+                      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'
                         }`}
@@ -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>

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;
+  }
+};