.....

src/app/(dashboard)/chats/page.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
-  Search, Send, Phone, Video, MoreHorizontal, Paperclip,
+  Search, Send, Phone, MoreHorizontal, Paperclip,
   Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
   CornerDownRight, Forward, Pencil, Download,
 } from "lucide-react"
@@ -28,6 +28,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useTheme } from "next-themes"
 import { useUser } from "@/providers/user-provider"
 import { toast } from "sonner"
+import VoiceCallModal from "@/components/chats/voice-call-modal"
 import data from "@emoji-mart/data"
 import Picker from "@emoji-mart/react"
 
@@ -124,6 +125,7 @@ export default function ChatsPage() {
   const [searchResults, setSearchResults] = useState<any[]>([])
   const [searchingUsers, setSearchingUsers] = useState(false)
   const [unreadMap, setUnreadMap] = useState<Map<string, number>>(new Map())
+  const [isCallModalOpen, setIsCallModalOpen] = useState(false)
   const [previewAvatarUrl, setPreviewAvatarUrl] = useState<string | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -642,12 +644,9 @@ export default function ChatsPage() {
               </div>
             </div>
             <div className="flex items-center gap-1 shrink-0">
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Voice calling coming soon")}>
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setIsCallModalOpen(true)}>
                 <Phone className="h-4 w-4" />
               </Button>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Video calling coming soon")}>
-                <Video className="h-4 w-4" />
-              </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="ghost" size="icon" className="h-8 w-8">
@@ -995,6 +994,8 @@ export default function ChatsPage() {
           </ScrollArea>
         </DialogContent>
       </Dialog>
+
+      <VoiceCallModal open={isCallModalOpen} onClose={() => setIsCallModalOpen(false)} />
     </div>
   )
 }