Improve application stability and fix issues reported by professionals

Fixes broken features and addresses UI issues in task, chat, and directory pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/3e403441-7d1f-407e-bcff-3c622056e643.jpg

client/src/pages/ChatPage.tsx

@@ -1,449 +1,531 @@
 import { useState, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/hooks/useAuth';
-import { Card } from '@/components/ui/card';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import { PageHeader } from '@/components/ui/page-header';
+import { useToast } from '@/hooks/use-toast';
+import Sidebar from '@/components/layout/Sidebar';
 import { 
   MessageCircle, 
   Search, 
-  Phone, 
-  Video, 
-  MoreVertical, 
   Send, 
-  Paperclip, 
-  Mic,
-  Users,
-  Settings,
   UserPlus,
-  Briefcase
+  Settings,
+  Plus,
+  Users,
+  Clock
 } from 'lucide-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { apiRequest } from '@/lib/queryClient';
-
-interface Contact {
-  id: number;
-  name: string;
-  avatar?: string;
-  lastMessage?: string;
-  lastMessageTime?: string;
-  unreadCount?: number;
-  isOnline?: boolean;
-  isProfessional?: boolean;
-  professionalType?: string;
-}
-
-interface Message {
-  id: number;
-  content: string;
-  senderId: number;
-  timestamp: string;
-  type: 'text' | 'image' | 'document' | 'voice';
-  isEdited?: boolean;
-  status: 'sent' | 'delivered' | 'read';
-}
-
-interface Chat {
-  id: number;
-  name?: string;
-  type: 'direct' | 'group' | 'professional_service';
-  participants: any[];
-  messages: Message[];
-}
 
 export default function ChatPage() {
-  const { t } = useTranslation();
   const { user } = useAuth();
+  const { toast } = useToast();
   const queryClient = useQueryClient();
   const [selectedChat, setSelectedChat] = useState<number | null>(null);
   const [newMessage, setNewMessage] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
+  const [contactOpen, setContactOpen] = useState(false);
+  const [chatOpen, setChatOpen] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const [ws, setWs] = useState<WebSocket | null>(null);
 
-  // Fetch contacts/chats
+  const [newContact, setNewContact] = useState({
-  const { data: chats = [], isLoading } = useQuery({
+    name: '',
+    email: '',
+    phone: '',
+    notes: ''
+  });
+
+  const [newChat, setNewChat] = useState({
+    name: '',
+    type: 'group' as 'direct' | 'group',
+    description: ''
+  });
+
+  // Fetch chats
+  const { data: chats, isLoading } = useQuery({
     queryKey: ['/api/chats'],
-    enabled: !!user,
+    queryFn: async () => {
+      const response = await fetch('/api/chats');
+      if (!response.ok) throw new Error('Failed to fetch chats');
+      return response.json();
+    },
+    enabled: !!user
+  });
+
+  // Fetch contacts
+  const { data: contacts } = useQuery({
+    queryKey: ['/api/contacts'],
+    queryFn: async () => {
+      const response = await fetch('/api/contacts');
+      if (!response.ok) throw new Error('Failed to fetch contacts');
+      return response.json();
+    },
+    enabled: !!user
   });
 
   // Fetch messages for selected chat
-  const { data: messages = [] } = useQuery({
+  const { data: messages } = useQuery({
     queryKey: ['/api/chats', selectedChat, 'messages'],
-    enabled: !!selectedChat,
+    queryFn: async () => {
+      const response = await fetch(`/api/chats/${selectedChat}/messages`);
+      if (!response.ok) throw new Error('Failed to fetch messages');
+      return response.json();
+    },
+    enabled: !!selectedChat
   });
 
-  // Fetch professional services
+  // Create contact mutation
-  const { data: professionalServices = [] } = useQuery({
+  const createContactMutation = useMutation({
-    queryKey: ['/api/professional-services'],
+    mutationFn: async (contactData: typeof newContact) => {
+      const response = await fetch('/api/contacts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(contactData)
+      });
+      if (!response.ok) throw new Error('Failed to create contact');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/contacts'] });
+      setContactOpen(false);
+      setNewContact({ name: '', email: '', phone: '', notes: '' });
+      toast({ title: "Contact added successfully!" });
+    },
+    onError: () => {
+      toast({ title: "Failed to add contact", variant: "destructive" });
+    }
+  });
+
+  // Create chat mutation
+  const createChatMutation = useMutation({
+    mutationFn: async (chatData: typeof newChat) => {
+      const response = await fetch('/api/chats', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(chatData)
+      });
+      if (!response.ok) throw new Error('Failed to create chat');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/chats'] });
+      setChatOpen(false);
+      setNewChat({ name: '', type: 'group', description: '' });
+      toast({ title: "Chat created successfully!" });
+    },
+    onError: () => {
+      toast({ title: "Failed to create chat", variant: "destructive" });
+    }
   });
 
   // Send message mutation
   const sendMessageMutation = useMutation({
-    mutationFn: async (messageData: { chatId: number; content: string; type: string }) => {
+    mutationFn: async (messageData: { content: string; type: string }) => {
-      return apiRequest(`/api/chats/${messageData.chatId}/messages`, {
+      const response = await fetch(`/api/chats/${selectedChat}/messages`, {
         method: 'POST',
-        body: JSON.stringify(messageData),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(messageData)
       });
+      if (!response.ok) throw new Error('Failed to send message');
+      return response.json();
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['/api/chats', selectedChat, 'messages'] });
       setNewMessage('');
     },
+    onError: () => {
+      toast({ title: "Failed to send message", variant: "destructive" });
+    }
   });
 
+  const handleCreateContact = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newContact.name) {
+      toast({ title: "Please enter a contact name", variant: "destructive" });
+      return;
+    }
+    createContactMutation.mutate(newContact);
+  };
+
+  const handleCreateChat = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newChat.name) {
+      toast({ title: "Please enter a chat name", variant: "destructive" });
+      return;
+    }
+    createChatMutation.mutate(newChat);
+  };
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim() || !selectedChat) return;
+    
+    sendMessageMutation.mutate({
+      content: newMessage,
+      type: 'text'
+    });
+  };
+
   // WebSocket connection for real-time messaging
   useEffect(() => {
     if (!user) return;
 
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws`;
+    const ws = new WebSocket(`${wsUrl}//${window.location.host}/ws`);
-    const websocket = new WebSocket(wsUrl);
 
-    websocket.onopen = () => {
+    ws.onopen = () => {
       console.log('Connected to chat WebSocket');
-      websocket.send(JSON.stringify({ type: 'join', userId: user.id }));
     };
 
-    websocket.onmessage = (event) => {
+    ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.type === 'new_message') {
+        queryClient.invalidateQueries({ queryKey: ['/api/chats', data.chatId, 'messages'] });
         queryClient.invalidateQueries({ queryKey: ['/api/chats'] });
-        if (data.chatId === selectedChat) {
-          queryClient.invalidateQueries({ queryKey: ['/api/chats', selectedChat, 'messages'] });
-        }
       }
     };
 
-    websocket.onclose = () => {
+    ws.onclose = () => {
       console.log('Chat WebSocket disconnected');
     };
 
-    setWs(websocket);
-
     return () => {
-      websocket.close();
+      ws.close();
     };
-  }, [user, selectedChat, queryClient]);
+  }, [user, queryClient]);
 
-  // Auto-scroll to bottom when new messages arrive
+  // Auto-scroll to bottom of messages
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
-  const handleSendMessage = () => {
+  const filteredChats = chats?.filter((chat: any) => 
-    if (!newMessage.trim() || !selectedChat) return;
+    chat.name?.toLowerCase().includes(searchQuery.toLowerCase())
-    
+  ) || [];
-    sendMessageMutation.mutate({
-      chatId: selectedChat,
-      content: newMessage.trim(),
-      type: 'text'
-    });
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  const filteredChats = chats.filter((chat: any) =>
-    chat.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    chat.participants?.some((p: any) => 
-      p.name?.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-  );
-
-  const formatTime = (timestamp: string) => {
-    return new Date(timestamp).toLocaleTimeString([], { 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  };
-
-  const formatDate = (timestamp: string) => {
-    const date = new Date(timestamp);
-    const today = new Date();
-    const yesterday = new Date(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-
-    if (date.toDateString() === today.toDateString()) {
-      return 'Today';
-    } else if (date.toDateString() === yesterday.toDateString()) {
-      return 'Yesterday';
-    } else {
-      return date.toLocaleDateString();
-    }
-  };
 
   if (isLoading) {
     return (
-      <div className="flex h-screen bg-background">
+      <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-        <div className="flex-1 flex items-center justify-center">
+        <Sidebar className="w-64 border-r" />
-          <div className="text-muted-foreground">{t('common.loading')}</div>
+        <div className="flex-1 overflow-auto p-6">
+          <div className="animate-pulse space-y-4">
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+            <div className="grid grid-cols-3 gap-4 h-96">
+              <div className="bg-gray-200 dark:bg-gray-700 rounded"></div>
+              <div className="col-span-2 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex h-screen bg-background" dir={t('common.direction')}>
+    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Sidebar - Chat List */}
+      <Sidebar className="w-64 border-r" />
-      <div className="w-80 border-r border-border flex flex-col">
+      <div className="flex-1 overflow-auto">
-        {/* Header */}
+        <div className="p-6">
-        <div className="p-4 border-b border-border">
+          <PageHeader
-          <div className="flex items-center justify-between mb-4">
+            title="Messages"
-            <h1 className="text-xl font-semibold flex items-center gap-2">
+            description="Chat with contacts and professionals"
-              <MessageCircle className="h-5 w-5" />
+          >
-              {t('chat.title')}
-            </h1>
             <div className="flex gap-2">
-              <Button variant="ghost" size="sm">
+              <Dialog open={contactOpen} onOpenChange={setContactOpen}>
-                <UserPlus className="h-4 w-4" />
+                <DialogTrigger asChild>
-              </Button>
+                  <Button variant="outline">
-              <Button variant="ghost" size="sm">
+                    <UserPlus className="w-4 h-4 mr-2" />
-                <Settings className="h-4 w-4" />
+                    New Contact
-              </Button>
+                  </Button>
-            </div>
+                </DialogTrigger>
-          </div>
+                <DialogContent>
-          
+                  <DialogHeader>
-          {/* Search */}
+                    <DialogTitle>Add New Contact</DialogTitle>
-          <div className="relative">
+                    <DialogDescription>
-            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                      Add a new contact to your network.
-            <Input
+                    </DialogDescription>
-              placeholder={t('chat.searchPlaceholder')}
+                  </DialogHeader>
-              value={searchQuery}
+                  <form onSubmit={handleCreateContact} className="space-y-4">
-              onChange={(e) => setSearchQuery(e.target.value)}
+                    <div className="space-y-2">
-              className="pl-10"
+                      <Label htmlFor="name">Name</Label>
-            />
+                      <Input
-          </div>
+                        id="name"
-        </div>
+                        placeholder="Contact name"
-
+                        value={newContact.name}
-        {/* Professional Services Section */}
+                        onChange={(e) => setNewContact({ ...newContact, name: e.target.value })}
-        <div className="p-4 border-b border-border">
+                        required
-          <div className="flex items-center gap-2 mb-3">
+                      />
-            <Briefcase className="h-4 w-4 text-primary" />
-            <span className="text-sm font-medium">{t('chat.professionalServices')}</span>
-          </div>
-          <ScrollArea className="h-24">
-            <div className="flex gap-2">
-              {professionalServices.slice(0, 4).map((service: any) => (
-                <Card key={service.id} className="p-2 min-w-[100px] cursor-pointer hover:bg-accent">
-                  <div className="text-center">
-                    <Avatar className="h-8 w-8 mx-auto mb-1">
-                      <AvatarImage src={service.avatar} />
-                      <AvatarFallback>{service.name?.[0]}</AvatarFallback>
-                    </Avatar>
-                    <div className="text-xs font-medium truncate">{service.name}</div>
-                    <Badge variant="secondary" className="text-xs">
-                      {service.type}
-                    </Badge>
-                  </div>
-                </Card>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-
-        {/* Chat List */}
-        <ScrollArea className="flex-1">
-          <div className="p-2">
-            {filteredChats.map((chat: any) => (
-              <div
-                key={chat.id}
-                onClick={() => setSelectedChat(chat.id)}
-                className={`p-3 rounded-lg cursor-pointer mb-1 transition-colors ${
-                  selectedChat === chat.id 
-                    ? 'bg-primary/10 border border-primary/20' 
-                    : 'hover:bg-accent'
-                }`}
-              >
-                <div className="flex items-center gap-3">
-                  <div className="relative">
-                    <Avatar className="h-12 w-12">
-                      <AvatarImage src={chat.avatar} />
-                      <AvatarFallback>
-                        {chat.name?.[0] || chat.participants?.[0]?.name?.[0]}
-                      </AvatarFallback>
-                    </Avatar>
-                    {chat.isOnline && (
-                      <div className="absolute bottom-0 right-0 h-3 w-3 bg-green-500 border-2 border-background rounded-full" />
-                    )}
-                  </div>
-                  
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between">
-                      <h3 className="font-medium truncate">
-                        {chat.name || chat.participants?.[0]?.name}
-                        {chat.isProfessional && (
-                          <Badge variant="outline" className="ml-2 text-xs">
-                            {chat.professionalType}
-                          </Badge>
-                        )}
-                      </h3>
-                      <span className="text-xs text-muted-foreground">
-                        {formatTime(chat.lastMessageAt)}
-                      </span>
                     </div>
-                    
+                    <div className="space-y-2">
-                    <div className="flex items-center justify-between">
+                      <Label htmlFor="email">Email</Label>
-                      <p className="text-sm text-muted-foreground truncate">
+                      <Input
-                        {chat.lastMessage || t('chat.noMessages')}
+                        id="email"
-                      </p>
+                        type="email"
-                      {chat.unreadCount > 0 && (
+                        placeholder="contact@example.com"
-                        <Badge variant="default" className="text-xs h-5 w-5 p-0 flex items-center justify-center">
+                        value={newContact.email}
-                          {chat.unreadCount}
+                        onChange={(e) => setNewContact({ ...newContact, email: e.target.value })}
-                        </Badge>
+                      />
-                      )}
                     </div>
-                  </div>
+                    <div className="space-y-2">
-                </div>
+                      <Label htmlFor="phone">Phone</Label>
-              </div>
+                      <Input
-            ))}
+                        id="phone"
-          </div>
+                        placeholder="+1 (555) 123-4567"
-        </ScrollArea>
+                        value={newContact.phone}
-      </div>
+                        onChange={(e) => setNewContact({ ...newContact, phone: e.target.value })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="notes">Notes</Label>
+                      <Textarea
+                        id="notes"
+                        placeholder="Optional notes about this contact..."
+                        value={newContact.notes}
+                        onChange={(e) => setNewContact({ ...newContact, notes: e.target.value })}
+                      />
+                    </div>
+                    <Button type="submit" disabled={createContactMutation.isPending}>
+                      {createContactMutation.isPending ? "Adding..." : "Add Contact"}
+                    </Button>
+                  </form>
+                </DialogContent>
+              </Dialog>
 
-      {/* Main Chat Area */}
+              <Dialog open={chatOpen} onOpenChange={setChatOpen}>
-      <div className="flex-1 flex flex-col">
+                <DialogTrigger asChild>
-        {selectedChat ? (
+                  <Button>
-          <>
+                    <Plus className="w-4 h-4 mr-2" />
-            {/* Chat Header */}
+                    New Chat
-            <div className="p-4 border-b border-border">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <Avatar className="h-10 w-10">
-                    <AvatarImage src="" />
-                    <AvatarFallback>US</AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <h2 className="font-semibold">{t('chat.selectedChat')}</h2>
-                    <p className="text-sm text-muted-foreground">
-                      {t('chat.lastSeen')} 2 {t('chat.minutesAgo')}
-                    </p>
-                  </div>
-                </div>
-                
-                <div className="flex gap-2">
-                  <Button variant="ghost" size="sm">
-                    <Phone className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="sm">
+                </DialogTrigger>
-                    <Video className="h-4 w-4" />
+                <DialogContent>
-                  </Button>
+                  <DialogHeader>
-                  <Button variant="ghost" size="sm">
+                    <DialogTitle>Create New Chat</DialogTitle>
-                    <MoreVertical className="h-4 w-4" />
+                    <DialogDescription>
-                  </Button>
+                      Start a new conversation or group chat.
-                </div>
+                    </DialogDescription>
-              </div>
+                  </DialogHeader>
+                  <form onSubmit={handleCreateChat} className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="chatName">Chat Name</Label>
+                      <Input
+                        id="chatName"
+                        placeholder="Enter chat name"
+                        value={newChat.name}
+                        onChange={(e) => setNewChat({ ...newChat, name: e.target.value })}
+                        required
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="chatType">Chat Type</Label>
+                      <select
+                        id="chatType"
+                        value={newChat.type}
+                        onChange={(e) => setNewChat({ ...newChat, type: e.target.value as any })}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      >
+                        <option value="direct">Direct Message</option>
+                        <option value="group">Group Chat</option>
+                      </select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="description">Description</Label>
+                      <Textarea
+                        id="description"
+                        placeholder="Optional chat description..."
+                        value={newChat.description}
+                        onChange={(e) => setNewChat({ ...newChat, description: e.target.value })}
+                      />
+                    </div>
+                    <Button type="submit" disabled={createChatMutation.isPending}>
+                      {createChatMutation.isPending ? "Creating..." : "Create Chat"}
+                    </Button>
+                  </form>
+                </DialogContent>
+              </Dialog>
             </div>
+          </PageHeader>
 
-            {/* Messages Area */}
+          <div className="grid grid-cols-12 gap-6 h-[600px]">
-            <ScrollArea className="flex-1 p-4">
+            {/* Chat List */}
-              <div className="space-y-4">
+            <Card className="col-span-4">
-                {messages.map((message: Message, index: number) => {
+              <CardHeader className="pb-3">
-                  const isFromUser = message.senderId === user?.id;
+                <div className="flex items-center justify-between">
-                  const showDate = index === 0 || 
+                  <h3 className="font-semibold">Conversations</h3>
-                    formatDate(message.timestamp) !== formatDate(messages[index - 1]?.timestamp);
+                  <Settings className="w-4 h-4 text-gray-400" />
-
+                </div>
-                  return (
+                <div className="relative">
-                    <div key={message.id}>
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                      {showDate && (
+                  <Input
-                        <div className="flex justify-center my-4">
+                    placeholder="Search conversations..."
-                          <Badge variant="secondary" className="text-xs">
+                    value={searchQuery}
-                            {formatDate(message.timestamp)}
+                    onChange={(e) => setSearchQuery(e.target.value)}
-                          </Badge>
+                    className="pl-10"
-                        </div>
+                  />
-                      )}
+                </div>
-                      
+              </CardHeader>
-                      <div className={`flex ${isFromUser ? 'justify-end' : 'justify-start'}`}>
+              <CardContent className="p-0">
-                        <div className="flex gap-2 max-w-[70%]">
+                <ScrollArea className="h-[500px]">
-                          {!isFromUser && (
+                  {filteredChats.length === 0 ? (
-                            <Avatar className="h-8 w-8">
+                    <div className="p-4 text-center text-gray-500">
-                              <AvatarFallback>U</AvatarFallback>
+                      <MessageCircle className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                            </Avatar>
+                      <p className="text-sm">No conversations yet</p>
-                          )}
+                      <p className="text-xs text-gray-400">Start a new chat to begin</p>
-                          
+                    </div>
-                          <div
+                  ) : (
-                            className={`rounded-lg p-3 ${
+                    filteredChats.map((chat: any) => (
-                              isFromUser
+                      <div
-                                ? 'bg-primary text-primary-foreground'
+                        key={chat.id}
-                                : 'bg-muted'
+                        onClick={() => setSelectedChat(chat.id)}
-                            }`}
+                        className={`p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b ${
-                          >
+                          selectedChat === chat.id ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-                            <p className="text-sm">{message.content}</p>
+                        }`}
-                            <div className="flex items-center gap-1 mt-1">
+                      >
-                              <span className="text-xs opacity-70">
+                        <div className="flex items-center gap-3">
-                                {formatTime(message.timestamp)}
+                          <Avatar>
+                            <AvatarFallback>
+                              {chat.name?.charAt(0) || <Users className="w-4 h-4" />}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center justify-between">
+                              <p className="font-medium truncate">{chat.name || 'Unnamed Chat'}</p>
+                              <span className="text-xs text-gray-400">
+                                {chat.updatedAt && new Date(chat.updatedAt).toLocaleDateString()}
                               </span>
-                              {message.isEdited && (
-                                <span className="text-xs opacity-70">{t('chat.edited')}</span>
-                              )}
-                              {isFromUser && (
-                                <div className="text-xs opacity-70">
-                                  {message.status === 'read' ? '✓✓' : '✓'}
-                                </div>
-                              )}
                             </div>
+                            <p className="text-sm text-gray-500 truncate">
+                              {chat.type === 'group' ? 'Group chat' : 'Direct message'}
+                            </p>
                           </div>
                         </div>
                       </div>
+                    ))
+                  )}
+                </ScrollArea>
+              </CardContent>
+            </Card>
+
+            {/* Chat Messages */}
+            <Card className="col-span-8">
+              {selectedChat ? (
+                <>
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <Avatar>
+                          <AvatarFallback>
+                            {filteredChats.find((c: any) => c.id === selectedChat)?.name?.charAt(0) || <Users className="w-4 h-4" />}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <h3 className="font-semibold">
+                            {filteredChats.find((c: any) => c.id === selectedChat)?.name || 'Chat'}
+                          </h3>
+                          <p className="text-sm text-gray-500">Active now</p>
+                        </div>
+                      </div>
                     </div>
-                  );
+                  </CardHeader>
-                })}
+                  <CardContent className="p-0 flex flex-col h-[500px]">
-                <div ref={messagesEndRef} />
+                    <ScrollArea className="flex-1 p-4">
-              </div>
+                      {messages && messages.length > 0 ? (
-            </ScrollArea>
+                        <div className="space-y-4">
-
+                          {messages.map((message: any) => (
-            {/* Message Input */}
+                            <div
-            <div className="p-4 border-t border-border">
+                              key={message.id}
-              <div className="flex items-center gap-2">
+                              className={`flex ${message.senderId === user?.id ? 'justify-end' : 'justify-start'}`}
-                <Button variant="ghost" size="sm">
+                            >
-                  <Paperclip className="h-4 w-4" />
+                              <div
-                </Button>
+                                className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
-                
+                                  message.senderId === user?.id
-                <div className="flex-1 relative">
+                                    ? 'bg-blue-500 text-white'
-                  <Input
+                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'
-                    placeholder={t('chat.typeMessage')}
+                                }`}
-                    value={newMessage}
+                              >
-                    onChange={(e) => setNewMessage(e.target.value)}
+                                <p className="text-sm">{message.content}</p>
-                    onKeyPress={handleKeyPress}
+                                <div className="flex items-center gap-1 mt-1">
-                    className="pr-12"
+                                  <Clock className="w-3 h-3 opacity-60" />
-                  />
+                                  <span className="text-xs opacity-60">
-                  <Button
+                                    {new Date(message.createdAt).toLocaleTimeString()}
-                    onClick={handleSendMessage}
+                                  </span>
-                    disabled={!newMessage.trim() || sendMessageMutation.isPending}
+                                </div>
-                    size="sm"
+                              </div>
-                    className="absolute right-1 top-1 h-8 w-8 p-0"
+                            </div>
-                  >
+                          ))}
-                    <Send className="h-4 w-4" />
+                          <div ref={messagesEndRef} />
-                  </Button>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-center h-full text-gray-500">
+                          <div className="text-center">
+                            <MessageCircle className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                            <p>No messages yet</p>
+                            <p className="text-sm text-gray-400">Start the conversation!</p>
+                          </div>
+                        </div>
+                      )}
+                    </ScrollArea>
+                    <div className="p-4 border-t">
+                      <form onSubmit={handleSendMessage} className="flex gap-2">
+                        <Input
+                          placeholder="Type a message..."
+                          value={newMessage}
+                          onChange={(e) => setNewMessage(e.target.value)}
+                          className="flex-1"
+                        />
+                        <Button type="submit" size="sm" disabled={sendMessageMutation.isPending}>
+                          <Send className="w-4 h-4" />
+                        </Button>
+                      </form>
+                    </div>
+                  </CardContent>
+                </>
+              ) : (
+                <div className="flex items-center justify-center h-full text-gray-500">
+                  <div className="text-center">
+                    <MessageCircle className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+                    <h3 className="text-lg font-medium mb-2">Select a conversation</h3>
+                    <p className="text-gray-400">Choose a chat from the sidebar to start messaging</p>
+                  </div>
                 </div>
-                
+              )}
-                <Button variant="ghost" size="sm">
+            </Card>
-                  <Mic className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </>
-        ) : (
-          /* Welcome Screen */
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center">
-              <MessageCircle className="h-24 w-24 text-muted-foreground mx-auto mb-4" />
-              <h2 className="text-xl font-semibold mb-2">{t('chat.welcome')}</h2>
-              <p className="text-muted-foreground max-w-md">
-                {t('chat.welcomeDescription')}
-              </p>
-            </div>
           </div>
-        )}
+
+          {/* Contacts Section */}
+          {contacts && contacts.length > 0 && (
+            <Card className="mt-6">
+              <CardHeader>
+                <h3 className="font-semibold">Your Contacts</h3>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {contacts.map((contact: any) => (
+                    <div key={contact.id} className="flex items-center gap-3 p-3 border rounded-lg">
+                      <Avatar>
+                        <AvatarFallback>{contact.name?.charAt(0) || 'C'}</AvatarFallback>
+                      </Avatar>
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium truncate">{contact.name}</p>
+                        <p className="text-sm text-gray-500 truncate">{contact.email}</p>
+                        {contact.phone && (
+                          <p className="text-xs text-gray-400">{contact.phone}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
       </div>
     </div>
   );

client/src/pages/ProfessionalDirectory.tsx

@@ -1,14 +1,17 @@
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { PageHeader } from '@/components/ui/page-header';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/hooks/use-toast';
+import Sidebar from '@/components/layout/Sidebar';
 import { 
   Search, 
   MapPin, 
@@ -18,393 +21,447 @@ import {
   Clock, 
   Calendar,
   User,
-  GraduationCap,
+  Plus,
-  Award,
-  Languages as LanguagesIcon,
   MessageCircle
 } from 'lucide-react';
 
-interface Professional {
-  id: number;
-  name: string;
-  type: string;
-  location: string;
-  rating: number;
-  reviews: number;
-  experience: number;
-  languages: string[];
-  specialization: string;
-  phone: string;
-  email: string;
-  workingHours: string;
-  education: string;
-  certifications: string[];
-  consultationFee: number;
-  avatar?: string;
-  services: string[];
-  onlineConsultation: boolean;
-  inPersonConsultation: boolean;
-}
-
-const mockProfessionals: Professional[] = [
-  {
-    id: 1,
-    name: "د. أحمد المحرزي",
-    type: "doctor",
-    location: "muscat",
-    rating: 4.8,
-    reviews: 127,
-    experience: 15,
-    languages: ["Arabic", "English"],
-    specialization: "طب القلب",
-    phone: "+968 9123 4567",
-    email: "ahmed.almahrezi@example.om",
-    workingHours: "الأحد - الخميس: 8:00 ص - 6:00 م",
-    education: "جامعة السلطان قابوس - كلية الطب",
-    certifications: ["البورد العماني في طب القلب", "زمالة الكلية الأمريكية لأطباء القلب"],
-    consultationFee: 25,
-    services: ["فحص القلب", "تخطيط القلب", "قسطرة القلب"],
-    onlineConsultation: true,
-    inPersonConsultation: true
-  },
-  {
-    id: 2,
-    name: "أ. فاطمة الزدجالية",
-    type: "lawyer",
-    location: "muscat",
-    rating: 4.9,
-    reviews: 89,
-    experience: 12,
-    languages: ["Arabic", "English"],
-    specialization: "القانون التجاري",
-    phone: "+968 9234 5678",
-    email: "fatima.alzadjali@example.om",
-    workingHours: "الأحد - الخميس: 9:00 ص - 5:00 م",
-    education: "جامعة السلطان قابوس - كلية الحقوق",
-    certifications: ["عضو نقابة المحامين العمانيين", "دبلوم التحكيم التجاري"],
-    consultationFee: 30,
-    services: ["استشارات قانونية", "صياغة العقود", "التقاضي"],
-    onlineConsultation: true,
-    inPersonConsultation: true
-  },
-  {
-    id: 3,
-    name: "م. سالم البلوشي",
-    type: "engineer",
-    location: "sohar",
-    rating: 4.7,
-    reviews: 64,
-    experience: 10,
-    languages: ["Arabic", "English"],
-    specialization: "الهندسة المدنية",
-    phone: "+968 9345 6789",
-    email: "salem.albalushi@example.om",
-    workingHours: "الأحد - الخميس: 7:00 ص - 4:00 م",
-    education: "الجامعة الألمانية للتكنولوجيا في عمان",
-    certifications: ["مهندس مدني معتمد", "إدارة المشاريع PMP"],
-    consultationFee: 20,
-    services: ["تصميم المباني", "إشراف التنفيذ", "استشارات هندسية"],
-    onlineConsultation: false,
-    inPersonConsultation: true
-  },
-  {
-    id: 4,
-    name: "د. مريم الهنائية",
-    type: "dentist",
-    location: "nizwa",
-    rating: 4.6,
-    reviews: 92,
-    experience: 8,
-    languages: ["Arabic", "English"],
-    specialization: "طب الأسنان التجميلي",
-    phone: "+968 9456 7890",
-    email: "mariam.alhinai@example.om",
-    workingHours: "السبت - الأربعاء: 10:00 ص - 7:00 م",
-    education: "كلية طب الأسنان - جامعة السلطان قابوس",
-    certifications: ["دبلوم طب الأسنان التجميلي", "شهادة زراعة الأسنان"],
-    consultationFee: 15,
-    services: ["تنظيف الأسنان", "تجميل الأسنان", "زراعة الأسنان"],
-    onlineConsultation: true,
-    inPersonConsultation: true
-  }
-];
-
 export default function ProfessionalDirectory() {
-  const { t } = useTranslation();
+  const { toast } = useToast();
-  const [searchTerm, setSearchTerm] = useState('');
+  const queryClient = useQueryClient();
-  const [selectedType, setSelectedType] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedLocation, setSelectedLocation] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
-  const [selectedProfessional, setSelectedProfessional] = useState<Professional | null>(null);
+  const [locationFilter, setLocationFilter] = useState('');
+  const [open, setOpen] = useState(false);
+  const [requestOpen, setRequestOpen] = useState(false);
   
-  const professionalTypes = [
+  const [newService, setNewService] = useState({
-    'doctor', 'lawyer', 'engineer', 'accountant', 'consultant', 
+    type: '',
-    'teacher', 'dentist', 'veterinarian', 'architect', 'therapist'
+    title: '',
-  ];
+    description: '',
-
+    location: '',
-  const locations = [
+    contactInfo: '',
-    'muscat', 'salalah', 'nizwa', 'sur', 'sohar', 'rustaq', 
+    hourlyRate: '',
-    'ibri', 'khasab', 'bahla', 'buraimi', 'adam', 'bidiyah'
+    availability: ''
-  ];
-
-  const filteredProfessionals = mockProfessionals.filter(professional => {
-    const matchesSearch = professional.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         professional.specialization.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesType = !selectedType || selectedType === 'all' || professional.type === selectedType;
-    const matchesLocation = !selectedLocation || selectedLocation === 'all' || professional.location === selectedLocation;
-    return matchesSearch && matchesType && matchesLocation;
   });
 
-  const ProfessionalCard = ({ professional }: { professional: Professional }) => (
+  const [newRequest, setNewRequest] = useState({
-    <Card className="hover:shadow-lg transition-shadow cursor-pointer">
+    serviceId: 0,
-      <CardHeader>
+    requestType: 'consultation',
-        <div className="flex items-start gap-4">
+    description: '',
-          <Avatar className="h-16 w-16">
+    preferredDate: '',
-            <AvatarImage src={professional.avatar} alt={professional.name} />
+    budget: ''
-            <AvatarFallback className="text-lg">
+  });
-              {professional.name.split(' ').map(n => n[0]).join('')}
+
-            </AvatarFallback>
+  // Fetch professional services
-          </Avatar>
+  const { data: services, isLoading } = useQuery({
-          <div className="flex-1">
+    queryKey: ['/api/professional-services'],
-            <CardTitle className="text-lg mb-1">{professional.name}</CardTitle>
+    queryFn: async () => {
-            <CardDescription className="mb-2">
+      const response = await fetch('/api/professional-services');
-              {t(`professionals.types.${professional.type}`)} • {professional.specialization}
+      if (!response.ok) throw new Error('Failed to fetch services');
-            </CardDescription>
+      return response.json();
-            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+    }
-              <div className="flex items-center gap-1">
+  });
-                <MapPin className="h-4 w-4" />
+
-                {t(`professionals.locations.${professional.location}`)}
+  // Create service mutation
-              </div>
+  const createServiceMutation = useMutation({
-              <div className="flex items-center gap-1">
+    mutationFn: async (serviceData: typeof newService) => {
-                <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+      const response = await fetch('/api/professional-services', {
-                {professional.rating} ({professional.reviews})
+        method: 'POST',
-              </div>
+        headers: { 'Content-Type': 'application/json' },
-              <div className="flex items-center gap-1">
+        body: JSON.stringify({
-                <User className="h-4 w-4" />
+          ...serviceData,
-                {professional.experience} {t('professionals.experience')}
+          hourlyRate: parseFloat(serviceData.hourlyRate) || 0
-              </div>
+        })
+      });
+      if (!response.ok) throw new Error('Failed to create service');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/professional-services'] });
+      setOpen(false);
+      setNewService({ type: '', title: '', description: '', location: '', contactInfo: '', hourlyRate: '', availability: '' });
+      toast({ title: "Service created successfully!" });
+    },
+    onError: () => {
+      toast({ title: "Failed to create service", variant: "destructive" });
+    }
+  });
+
+  // Create service request mutation
+  const createRequestMutation = useMutation({
+    mutationFn: async (requestData: typeof newRequest) => {
+      const response = await fetch('/api/service-requests', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...requestData,
+          budget: parseFloat(requestData.budget) || 0
+        })
+      });
+      if (!response.ok) throw new Error('Failed to create request');
+      return response.json();
+    },
+    onSuccess: () => {
+      setRequestOpen(false);
+      setNewRequest({ serviceId: 0, requestType: 'consultation', description: '', preferredDate: '', budget: '' });
+      toast({ title: "Service request submitted successfully!" });
+    },
+    onError: () => {
+      toast({ title: "Failed to submit request", variant: "destructive" });
+    }
+  });
+
+  const handleCreateService = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newService.type || !newService.title || !newService.description) {
+      toast({ title: "Please fill in all required fields", variant: "destructive" });
+      return;
+    }
+    createServiceMutation.mutate(newService);
+  };
+
+  const handleCreateRequest = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newRequest.description) {
+      toast({ title: "Please provide a description", variant: "destructive" });
+      return;
+    }
+    createRequestMutation.mutate(newRequest);
+  };
+
+  // Filter services
+  const filteredServices = services?.filter((service: any) => {
+    const matchesSearch = service.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         service.description?.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesType = typeFilter === 'all' || service.type === typeFilter;
+    const matchesLocation = !locationFilter || service.location?.toLowerCase().includes(locationFilter.toLowerCase());
+    
+    return matchesSearch && matchesType && matchesLocation;
+  }) || [];
+
+  const serviceTypes = [
+    'therapy', 'legal', 'financial', 'medical', 'education', 'consulting', 'technical'
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+        <Sidebar className="w-64 border-r" />
+        <div className="flex-1 overflow-auto p-6">
+          <div className="animate-pulse space-y-4">
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="h-48 bg-gray-200 dark:bg-gray-700 rounded"></div>
+              ))}
             </div>
           </div>
         </div>
-      </CardHeader>
+      </div>
-      <CardContent>
+    );
-        <div className="flex flex-wrap gap-2 mb-4">
+  }
-          {professional.languages.map((lang, index) => (
-            <Badge key={index} variant="secondary" className="text-xs">
-              {lang}
-            </Badge>
-          ))}
-        </div>
-        <div className="flex justify-between items-center">
-          <div className="text-sm">
-            <span className="font-medium">{professional.consultationFee} ر.ع</span>
-            <span className="text-muted-foreground ml-1">/استشارة</span>
-          </div>
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button size="sm" onClick={() => setSelectedProfessional(professional)}>
-                {t('professionals.viewProfile')}
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle className="flex items-center gap-3">
-                  <Avatar className="h-12 w-12">
-                    <AvatarImage src={professional.avatar} alt={professional.name} />
-                    <AvatarFallback>
-                      {professional.name.split(' ').map(n => n[0]).join('')}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <div className="text-xl">{professional.name}</div>
-                    <div className="text-sm text-muted-foreground font-normal">
-                      {t(`professionals.types.${professional.type}`)} • {professional.specialization}
-                    </div>
-                  </div>
-                </DialogTitle>
-              </DialogHeader>
-              
-              <Tabs defaultValue="info" className="w-full">
-                <TabsList className="grid w-full grid-cols-3">
-                  <TabsTrigger value="info">{t('professionals.contactInfo')}</TabsTrigger>
-                  <TabsTrigger value="services">{t('professionals.services')}</TabsTrigger>
-                  <TabsTrigger value="booking">{t('professionals.bookAppointment')}</TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="info" className="space-y-4">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div className="space-y-3">
-                      <div className="flex items-center gap-2">
-                        <Phone className="h-4 w-4" />
-                        <span>{professional.phone}</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Mail className="h-4 w-4" />
-                        <span>{professional.email}</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <MapPin className="h-4 w-4" />
-                        <span>{t(`professionals.locations.${professional.location}`)}</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Clock className="h-4 w-4" />
-                        <span>{professional.workingHours}</span>
-                      </div>
-                    </div>
-                    
-                    <div className="space-y-3">
-                      <div className="flex items-center gap-2">
-                        <GraduationCap className="h-4 w-4" />
-                        <span>{professional.education}</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <LanguagesIcon className="h-4 w-4" />
-                        <span>{professional.languages.join(', ')}</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Star className="h-4 w-4" />
-                        <span>{professional.rating}/5 ({professional.reviews} مراجعة)</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="font-medium mb-2 flex items-center gap-2">
-                      <Award className="h-4 w-4" />
-                      {t('professionals.certifications')}
-                    </h4>
-                    <div className="flex flex-wrap gap-2">
-                      {professional.certifications.map((cert, index) => (
-                        <Badge key={index} variant="outline">
-                          {cert}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="services" className="space-y-4">
-                  <div>
-                    <h4 className="font-medium mb-3">{t('professionals.services')}</h4>
-                    <div className="grid gap-2">
-                      {professional.services.map((service, index) => (
-                        <div key={index} className="flex items-center gap-2 p-2 border rounded">
-                          <MessageCircle className="h-4 w-4" />
-                          <span>{service}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="flex items-center gap-2">
-                      <input 
-                        type="checkbox" 
-                        checked={professional.onlineConsultation} 
-                        readOnly 
-                        className="rounded"
-                      />
-                      <span>{t('professionals.onlineConsultation')}</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <input 
-                        type="checkbox" 
-                        checked={professional.inPersonConsultation} 
-                        readOnly 
-                        className="rounded"
-                      />
-                      <span>{t('professionals.inPersonConsultation')}</span>
-                    </div>
-                  </div>
-                  
-                  <div className="bg-muted p-4 rounded">
-                    <div className="font-medium">{t('professionals.consultationFee')}</div>
-                    <div className="text-2xl font-bold text-primary">
-                      {professional.consultationFee} ر.ع
-                    </div>
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="booking" className="space-y-4">
-                  <div className="text-center p-8 border-2 border-dashed rounded-lg">
-                    <Calendar className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-                    <h3 className="text-lg font-medium mb-2">
-                      {t('professionals.bookAppointment')}
-                    </h3>
-                    <p className="text-muted-foreground mb-4">
-                      اختر الوقت المناسب لك من المواعيد المتاحة
-                    </p>
-                    <Button className="w-full">
-                      {t('professionals.selectTimeSlot')}
-                    </Button>
-                  </div>
-                </TabsContent>
-              </Tabs>
-            </DialogContent>
-          </Dialog>
-        </div>
-      </CardContent>
-    </Card>
-  );
 
   return (
-    <div className="space-y-6">
+    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="text-center">
+      <Sidebar className="w-64 border-r" />
-        <h1 className="text-3xl font-bold mb-2">{t('professionals.title')}</h1>
+      <div className="flex-1 overflow-auto">
-        <p className="text-muted-foreground">{t('professionals.subtitle')}</p>
+        <div className="p-6">
-      </div>
+          <PageHeader
+            title="Professional Directory"
+            description="Find and connect with professional service providers"
+          >
+            <div className="flex gap-2">
+              <Dialog open={requestOpen} onOpenChange={setRequestOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline">
+                    <MessageCircle className="w-4 h-4 mr-2" />
+                    Request Service
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Request a Service</DialogTitle>
+                    <DialogDescription>
+                      Submit a request for professional services.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <form onSubmit={handleCreateRequest} className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="requestType">Service Type</Label>
+                      <Select value={newRequest.requestType} onValueChange={(value) => setNewRequest({ ...newRequest, requestType: value })}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="consultation">Consultation</SelectItem>
+                          <SelectItem value="project">Project Work</SelectItem>
+                          <SelectItem value="ongoing">Ongoing Support</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="description">Description</Label>
+                      <Textarea
+                        id="description"
+                        placeholder="Describe what you need..."
+                        value={newRequest.description}
+                        onChange={(e) => setNewRequest({ ...newRequest, description: e.target.value })}
+                        required
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="preferredDate">Preferred Date</Label>
+                        <Input
+                          id="preferredDate"
+                          type="date"
+                          value={newRequest.preferredDate}
+                          onChange={(e) => setNewRequest({ ...newRequest, preferredDate: e.target.value })}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="budget">Budget</Label>
+                        <Input
+                          id="budget"
+                          type="number"
+                          placeholder="0.00"
+                          value={newRequest.budget}
+                          onChange={(e) => setNewRequest({ ...newRequest, budget: e.target.value })}
+                        />
+                      </div>
+                    </div>
+                    <Button type="submit" disabled={createRequestMutation.isPending}>
+                      {createRequestMutation.isPending ? "Submitting..." : "Submit Request"}
+                    </Button>
+                  </form>
+                </DialogContent>
+              </Dialog>
 
-      <div className="flex flex-col md:flex-row gap-4">
+              <Dialog open={open} onOpenChange={setOpen}>
-        <div className="relative flex-1">
+                <DialogTrigger asChild>
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Button>
-          <Input
+                    <Plus className="w-4 h-4 mr-2" />
-            placeholder={t('professionals.searchProfessionals')}
+                    Add Service
-            value={searchTerm}
+                  </Button>
-            onChange={(e) => setSearchTerm(e.target.value)}
+                </DialogTrigger>
-            className="pl-10"
+                <DialogContent>
-          />
+                  <DialogHeader>
-        </div>
+                    <DialogTitle>Add Professional Service</DialogTitle>
+                    <DialogDescription>
+                      List your professional service for others to find.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <form onSubmit={handleCreateService} className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="type">Service Type</Label>
+                      <Select value={newService.type} onValueChange={(value) => setNewService({ ...newService, type: value })}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select service type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {serviceTypes.map((type) => (
+                            <SelectItem key={type} value={type}>
+                              {type.charAt(0).toUpperCase() + type.slice(1)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="title">Service Title</Label>
+                      <Input
+                        id="title"
+                        placeholder="e.g., Licensed Therapist, Financial Advisor"
+                        value={newService.title}
+                        onChange={(e) => setNewService({ ...newService, title: e.target.value })}
+                        required
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="description">Description</Label>
+                      <Textarea
+                        id="description"
+                        placeholder="Describe your services and expertise..."
+                        value={newService.description}
+                        onChange={(e) => setNewService({ ...newService, description: e.target.value })}
+                        required
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="location">Location</Label>
+                        <Input
+                          id="location"
+                          placeholder="City, State"
+                          value={newService.location}
+                          onChange={(e) => setNewService({ ...newService, location: e.target.value })}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="hourlyRate">Hourly Rate ($)</Label>
+                        <Input
+                          id="hourlyRate"
+                          type="number"
+                          placeholder="0.00"
+                          value={newService.hourlyRate}
+                          onChange={(e) => setNewService({ ...newService, hourlyRate: e.target.value })}
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="contactInfo">Contact Information</Label>
+                      <Input
+                        id="contactInfo"
+                        placeholder="Email or phone number"
+                        value={newService.contactInfo}
+                        onChange={(e) => setNewService({ ...newService, contactInfo: e.target.value })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="availability">Availability</Label>
+                      <Textarea
+                        id="availability"
+                        placeholder="e.g., Mon-Fri 9AM-5PM, Weekends by appointment"
+                        value={newService.availability}
+                        onChange={(e) => setNewService({ ...newService, availability: e.target.value })}
+                      />
+                    </div>
+                    <Button type="submit" disabled={createServiceMutation.isPending}>
+                      {createServiceMutation.isPending ? "Creating..." : "Create Service"}
+                    </Button>
+                  </form>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </PageHeader>
 
-        <Select value={selectedType} onValueChange={setSelectedType}>
+          <div className="space-y-6">
-          <SelectTrigger className="w-full md:w-48">
+            {/* Search and Filters */}
-            <SelectValue placeholder={t('professionals.filterByType')} />
+            <div className="flex flex-col sm:flex-row gap-4">
-          </SelectTrigger>
+              <div className="relative flex-1">
-          <SelectContent>
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-            <SelectItem value="all">{t('common.all')}</SelectItem>
+                <Input
-            {professionalTypes.map(type => (
+                  placeholder="Search services..."
-              <SelectItem key={type} value={type}>
+                  value={searchQuery}
-                {t(`professionals.types.${type}`)}
+                  onChange={(e) => setSearchQuery(e.target.value)}
-              </SelectItem>
+                  className="pl-10"
-            ))}
+                />
-          </SelectContent>
+              </div>
-        </Select>
+              <Select value={typeFilter} onValueChange={setTypeFilter}>
+                <SelectTrigger className="w-full sm:w-[180px]">
+                  <SelectValue placeholder="Service type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  {serviceTypes.map((type) => (
+                    <SelectItem key={type} value={type}>
+                      {type.charAt(0).toUpperCase() + type.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Input
+                placeholder="Filter by location..."
+                value={locationFilter}
+                onChange={(e) => setLocationFilter(e.target.value)}
+                className="w-full sm:w-[200px]"
+              />
+            </div>
 
-        <Select value={selectedLocation} onValueChange={setSelectedLocation}>
+            {/* Services Grid */}
-          <SelectTrigger className="w-full md:w-48">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <SelectValue placeholder={t('professionals.filterByLocation')} />
+              {filteredServices.length === 0 ? (
-          </SelectTrigger>
+                <div className="col-span-full text-center py-12">
-          <SelectContent>
+                  <User className="w-12 h-12 mx-auto text-gray-400 mb-4" />
-            <SelectItem value="all">{t('common.all')}</SelectItem>
+                  <h3 className="text-lg font-medium mb-2">No services found</h3>
-            {locations.map(location => (
+                  <p className="text-muted-foreground mb-4">
-              <SelectItem key={location} value={location}>
+                    {searchQuery || typeFilter !== 'all' || locationFilter
-                {t(`professionals.locations.${location}`)}
+                      ? 'Try adjusting your search filters.'
-              </SelectItem>
+                      : 'Be the first to add a professional service.'}
-            ))}
+                  </p>
-          </SelectContent>
+                  <Button onClick={() => setOpen(true)}>
-        </Select>
+                    <Plus className="w-4 h-4 mr-2" />
-      </div>
+                    Add Service
+                  </Button>
+                </div>
+              ) : (
+                filteredServices.map((service: any) => (
+                  <Card key={service.id} className="hover:shadow-lg transition-shadow">
+                    <CardHeader>
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center gap-3">
+                          <Avatar>
+                            <AvatarFallback>
+                              {service.title?.charAt(0) || 'P'}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <CardTitle className="text-lg">{service.title}</CardTitle>
+                            <Badge variant="secondary" className="mt-1">
+                              {service.type}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <p className="text-sm text-muted-foreground line-clamp-3">
+                        {service.description}
+                      </p>
                       
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                      <div className="space-y-2">
-        {filteredProfessionals.length > 0 ? (
+                        {service.location && (
-          filteredProfessionals.map(professional => (
+                          <div className="flex items-center gap-2 text-sm">
-            <ProfessionalCard key={professional.id} professional={professional} />
+                            <MapPin className="w-4 h-4 text-gray-400" />
-          ))
+                            <span>{service.location}</span>
-        ) : (
+                          </div>
-          <div className="col-span-full text-center py-12">
+                        )}
-            <User className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
+                        
-            <h3 className="text-lg font-medium mb-2">{t('professionals.noResults')}</h3>
+                        {service.hourlyRate > 0 && (
-            <p className="text-muted-foreground">{t('professionals.noProfessionals')}</p>
+                          <div className="flex items-center gap-2 text-sm">
+                            <Clock className="w-4 h-4 text-gray-400" />
+                            <span>${service.hourlyRate}/hour</span>
+                          </div>
+                        )}
+                        
+                        {service.contactInfo && (
+                          <div className="flex items-center gap-2 text-sm">
+                            <Mail className="w-4 h-4 text-gray-400" />
+                            <span className="truncate">{service.contactInfo}</span>
+                          </div>
+                        )}
+                      </div>
+
+                      {service.availability && (
+                        <div className="text-xs text-muted-foreground bg-gray-50 dark:bg-gray-800 p-2 rounded">
+                          <strong>Availability:</strong> {service.availability}
+                        </div>
+                      )}
+
+                      <div className="flex gap-2">
+                        <Button 
+                          size="sm" 
+                          onClick={() => {
+                            setNewRequest({ ...newRequest, serviceId: service.id });
+                            setRequestOpen(true);
+                          }}
+                        >
+                          <MessageCircle className="w-4 h-4 mr-1" />
+                          Contact
+                        </Button>
+                        <Button size="sm" variant="outline">
+                          <Calendar className="w-4 h-4 mr-1" />
+                          Schedule
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))
+              )}
+            </div>
           </div>
-        )}
+        </div>
       </div>
     </div>
   );

client/src/pages/TasksPage.tsx

@@ -1,9 +1,7 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
+import { Card, CardContent } from '@/components/ui/card';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { ProjectManager } from '@/components/tasks/ProjectManager';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -14,73 +12,50 @@ import { PageHeader } from '@/components/ui/page-header';
 import { useToast } from '@/hooks/use-toast';
 import { VoiceShortcuts } from '@/components/voice/VoiceShortcuts';
 import Sidebar from '@/components/layout/Sidebar';
-import { 
+import { Plus, Calendar, Clock, CheckCircle, Circle, AlertCircle } from 'lucide-react';
-  Plus, 
-  Search, 
-  Filter, 
-  FolderOpen,
-  Calendar,
-  Clock,
-  CheckCircle2,
-  Circle,
-  ArrowUpDown,
-  MoreHorizontal,
-  Edit,
-  Trash2
-} from 'lucide-react';
-import { apiRequest } from '@/lib/queryClient';
-
-interface Task {
-  id: number;
-  title: string;
-  description?: string;
-  priority: "low" | "medium" | "high";
-  status: "pending" | "in_progress" | "completed";
-  dueDate?: string;
-  createdAt: string;
-  updatedAt: string;
-}
 
 export default function TasksPage() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
-  const [editingTask, setEditingTask] = useState<Task | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
-  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState('all');
-  const [statusFilter, setStatusFilter] = useState("all");
+  const [priorityFilter, setPriorityFilter] = useState('all');
-  const [priorityFilter, setPriorityFilter] = useState("all");
+  const [sortBy, setSortBy] = useState('createdAt');
-  const [sortBy, setSortBy] = useState("createdAt");
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  
   const [newTask, setNewTask] = useState({
-    title: "",
+    title: '',
-    description: "",
+    description: '',
-    priority: "medium" as const,
+    priority: 'medium' as 'low' | 'medium' | 'high',
-    dueDate: ""
+    dueDate: '',
+    status: 'pending' as 'pending' | 'in_progress' | 'completed'
   });
 
-  // Debounced search
+  // Fetch tasks
-  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const { data: tasks, isLoading } = useQuery({
-  useEffect(() => {
+    queryKey: ['/api/tasks'],
-    const timer = setTimeout(() => {
+    queryFn: async () => {
-      setDebouncedSearch(searchQuery);
+      const response = await fetch('/api/tasks');
-    }, 300);
+      if (!response.ok) throw new Error('Failed to fetch tasks');
-    return () => clearTimeout(timer);
+      return response.json();
-  }, [searchQuery]);
+    }
+  });
 
   // Filter and sort tasks
   const filteredAndSortedTasks = useMemo(() => {
     if (!tasks) return [];
     
-    const filtered = tasks.filter((task: Task) => {
+    const filtered = tasks.filter((task: any) => {
-      const matchesSearch = task.title.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+      const matchesSearch = task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                           task.description?.toLowerCase().includes(debouncedSearch.toLowerCase());
+                           task.description?.toLowerCase().includes(searchQuery.toLowerCase());
       const matchesStatus = statusFilter === "all" || task.status === statusFilter;
       const matchesPriority = priorityFilter === "all" || task.priority === priorityFilter;
       
       return matchesSearch && matchesStatus && matchesPriority;
     });
 
-    return filtered.sort((a: Task, b: Task) => {
+    return filtered.sort((a: any, b: any) => {
       let aValue: any, bValue: any;
       
       switch (sortBy) {
@@ -90,8 +65,8 @@ export default function TasksPage() {
           break;
         case "priority":
           const priorityOrder = { high: 3, medium: 2, low: 1 };
-          aValue = priorityOrder[a.priority];
+          aValue = priorityOrder[a.priority] || 0;
-          bValue = priorityOrder[b.priority];
+          bValue = priorityOrder[b.priority] || 0;
           break;
         case "dueDate":
           aValue = a.dueDate ? new Date(a.dueDate) : new Date('9999-12-31');
@@ -108,19 +83,7 @@ export default function TasksPage() {
         return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
       }
     });
-    
+  }, [tasks, searchQuery, statusFilter, priorityFilter, sortBy, sortOrder]);
-    return filtered;
-  }, [tasks, debouncedSearch, statusFilter, priorityFilter, sortBy, sortOrder]);
-
-  // Fetch tasks
-  const { data: tasks, isLoading } = useQuery({
-    queryKey: ['/api/tasks'],
-    queryFn: async () => {
-      const response = await fetch('/api/tasks');
-      if (!response.ok) throw new Error('Failed to fetch tasks');
-      return response.json();
-    }
-  });
 
   // Create task mutation
   const createTaskMutation = useMutation({
@@ -136,7 +99,7 @@ export default function TasksPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['/api/tasks'] });
       setOpen(false);
-      setNewTask({ title: "", description: "", priority: "medium", dueDate: "" });
+      setNewTask({ title: '', description: '', priority: 'medium', dueDate: '', status: 'pending' });
       toast({ title: "Task created successfully!" });
     },
     onError: () => {
@@ -146,7 +109,7 @@ export default function TasksPage() {
 
   // Update task mutation
   const updateTaskMutation = useMutation({
-    mutationFn: async ({ id, ...updates }: Partial<Task> & { id: number }) => {
+    mutationFn: async ({ id, updates }: { id: number, updates: Partial<typeof newTask> }) => {
       const response = await fetch(`/api/tasks/${id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
@@ -157,7 +120,6 @@ export default function TasksPage() {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['/api/tasks'] });
-      setEditingTask(null);
       toast({ title: "Task updated successfully!" });
     },
     onError: () => {
@@ -165,89 +127,47 @@ export default function TasksPage() {
     }
   });
 
-  // Delete task mutation
+  const handleSubmit = (e: React.FormEvent) => {
-  const deleteTaskMutation = useMutation({
-    mutationFn: async (id: number) => {
-      const response = await fetch(`/api/tasks/${id}`, {
-        method: 'DELETE'
-      });
-      if (!response.ok) throw new Error('Failed to delete task');
-      return response.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['/api/tasks'] });
-      toast({ title: "Task deleted successfully!" });
-    },
-    onError: () => {
-      toast({ title: "Failed to delete task", variant: "destructive" });
-    }
-  });
-
-  const handleCreateTask = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!newTask.title.trim()) {
+      toast({ title: "Please enter a task title", variant: "destructive" });
+      return;
+    }
     createTaskMutation.mutate(newTask);
   };
 
-  const handleEditTask = (e: React.FormEvent) => {
+  const handleStatusChange = (taskId: number, newStatus: string) => {
-    e.preventDefault();
+    updateTaskMutation.mutate({ id: taskId, updates: { status: newStatus as any } });
-    if (editingTask) {
+  };
-      updateTaskMutation.mutate(editingTask);
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle className="w-4 h-4 text-green-600" />;
+      case 'in_progress':
+        return <Clock className="w-4 h-4 text-blue-600" />;
+      default:
+        return <Circle className="w-4 h-4 text-gray-400" />;
     }
   };
 
-  const handleStatusChange = (taskId: number, newStatus: Task['status']) => {
-    updateTaskMutation.mutate({ id: taskId, status: newStatus });
-  };
-
-  const handleDeleteTask = (taskId: number) => {
-    if (confirm('Are you sure you want to delete this task?')) {
-      deleteTaskMutation.mutate(taskId);
-    }
-  };
-
-  // Task statistics
-  const taskStats = useMemo(() => {
-    if (!tasks) return { total: 0, pending: 0, in_progress: 0, completed: 0, overdue: 0 };
-    
-    const stats = {
-      total: tasks.length,
-      pending: tasks.filter((t: Task) => t.status === 'pending').length,
-      in_progress: tasks.filter((t: Task) => t.status === 'in_progress').length,
-      completed: tasks.filter((t: Task) => t.status === 'completed').length,
-      overdue: tasks.filter((t: Task) => t.dueDate && new Date(t.dueDate) < new Date() && t.status !== 'completed').length
-    };
-    
-    return stats;
-  }, [tasks]);
-
   const getPriorityColor = (priority: string) => {
     switch (priority) {
-      case "high": return "destructive";
+      case 'high':
-      case "medium": return "default";
+        return 'destructive';
-      case "low": return "secondary";
+      case 'medium':
-      default: return "default";
+        return 'default';
+      case 'low':
+        return 'secondary';
+      default:
+        return 'secondary';
     }
   };
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "completed": return "secondary";
-      case "in_progress": return "default";
-      case "pending": return "outline";
-      default: return "outline";
-    }
-  };
-
-  const isOverdue = (dueDate?: string) => {
-    if (!dueDate) return false;
-    return new Date(dueDate) < new Date();
-  };
-
   // Loading state
   if (isLoading) {
     return (
       <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-        <VoiceShortcuts page="tasks" />
         <Sidebar className="w-64 border-r" />
         <div className="flex-1 overflow-auto p-6">
           <div className="animate-pulse space-y-4">
@@ -255,7 +175,7 @@ export default function TasksPage() {
             <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
             <div className="space-y-3">
               {[...Array(5)].map((_, i) => (
-                <div key={i} className="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                <div key={i} className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
               ))}
             </div>
           </div>
@@ -272,7 +192,7 @@ export default function TasksPage() {
         <div className="p-6">
           <PageHeader
             title="Tasks"
-            description="Manage your tasks and track your progress"
+            description="Manage your tasks and projects efficiently"
           >
             <Dialog open={open} onOpenChange={setOpen}>
               <DialogTrigger asChild>
@@ -285,14 +205,15 @@ export default function TasksPage() {
                 <DialogHeader>
                   <DialogTitle>Create New Task</DialogTitle>
                   <DialogDescription>
-                    Add a new task to your todo list.
+                    Add a new task to your workflow.
                   </DialogDescription>
                 </DialogHeader>
-                <form onSubmit={handleCreateTask} className="space-y-4">
+                <form onSubmit={handleSubmit} className="space-y-4">
                   <div className="space-y-2">
                     <Label htmlFor="title">Title</Label>
                     <Input
                       id="title"
+                      placeholder="Enter task title..."
                       value={newTask.title}
                       onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
                       required
@@ -302,6 +223,7 @@ export default function TasksPage() {
                     <Label htmlFor="description">Description</Label>
                     <Textarea
                       id="description"
+                      placeholder="Optional description..."
                       value={newTask.description}
                       onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
                     />
@@ -338,252 +260,103 @@ export default function TasksPage() {
             </Dialog>
           </PageHeader>
 
-          {/* Statistics Cards */}
+          <div className="space-y-6">
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+            {/* Filters and Search */}
-            <Card>
+            <div className="flex flex-col sm:flex-row gap-4">
-              <CardContent className="p-4">
-                <div className="text-2xl font-bold">{taskStats.total}</div>
-                <p className="text-xs text-muted-foreground">Total Tasks</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent className="p-4">
-                <div className="text-2xl font-bold text-yellow-600">{taskStats.pending}</div>
-                <p className="text-xs text-muted-foreground">Pending</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent className="p-4">
-                <div className="text-2xl font-bold text-blue-600">{taskStats.in_progress}</div>
-                <p className="text-xs text-muted-foreground">In Progress</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent className="p-4">
-                <div className="text-2xl font-bold text-green-600">{taskStats.completed}</div>
-                <p className="text-xs text-muted-foreground">Completed</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent className="p-4">
-                <div className="text-2xl font-bold text-red-600">{taskStats.overdue}</div>
-                <p className="text-xs text-muted-foreground">Overdue</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Filters and Search */}
-          <div className="flex flex-wrap gap-4 mb-6">
-            <div className="flex-1 min-w-64">
               <Input
                 placeholder="Search tasks..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full"
+                className="flex-1"
               />
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-full sm:w-[180px]">
+                  <SelectValue placeholder="Filter by status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Status</SelectItem>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="in_progress">In Progress</SelectItem>
+                  <SelectItem value="completed">Completed</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={priorityFilter} onValueChange={setPriorityFilter}>
+                <SelectTrigger className="w-full sm:w-[180px]">
+                  <SelectValue placeholder="Filter by priority" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Priority</SelectItem>
+                  <SelectItem value="high">High</SelectItem>
+                  <SelectItem value="medium">Medium</SelectItem>
+                  <SelectItem value="low">Low</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
-            <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Status</SelectItem>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="in_progress">In Progress</SelectItem>
-                <SelectItem value="completed">Completed</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Priority" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Priority</SelectItem>
-                <SelectItem value="high">High</SelectItem>
-                <SelectItem value="medium">Medium</SelectItem>
-                <SelectItem value="low">Low</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Sort by" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="createdAt">Created Date</SelectItem>
-                <SelectItem value="dueDate">Due Date</SelectItem>
-                <SelectItem value="title">Title</SelectItem>
-                <SelectItem value="priority">Priority</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
-            >
-              <ArrowUpDown className="w-4 h-4" />
-            </Button>
-          </div>
 
-          {/* Tasks List */}
+            {/* Tasks List */}
-          <div className="space-y-4">
+            <div className="space-y-4">
-            {filteredAndSortedTasks.length === 0 ? (
+              {!filteredAndSortedTasks || filteredAndSortedTasks.length === 0 ? (
-              <Card>
+                <Card className="p-8 text-center">
-                <CardContent className="p-8 text-center">
+                  <div className="space-y-4">
-                  <div className="text-muted-foreground mb-4">
+                    <AlertCircle className="w-12 h-12 mx-auto text-gray-400" />
-                    {tasks?.length === 0 ? "No tasks yet" : "No tasks match your filters"}
+                    <div>
+                      <h3 className="text-lg font-medium">No tasks found</h3>
+                      <p className="text-muted-foreground">
+                        {searchQuery || statusFilter !== 'all' || priorityFilter !== 'all'
+                          ? 'Try adjusting your filters to find more tasks.'
+                          : 'Create your first task to get started.'}
+                      </p>
+                    </div>
+                    {!searchQuery && statusFilter === 'all' && priorityFilter === 'all' && (
+                      <Button onClick={() => setOpen(true)}>
+                        <Plus className="w-4 h-4 mr-2" />
+                        Create Task
+                      </Button>
+                    )}
                   </div>
-                  <Button onClick={() => setOpen(true)}>
+                </Card>
-                    <Plus className="w-4 h-4 mr-2" />
+              ) : (
-                    Create Your First Task
+                filteredAndSortedTasks.map((task: any) => (
-                  </Button>
+                  <Card key={task.id} className="p-4">
-                </CardContent>
+                    <div className="flex items-start justify-between">
-              </Card>
+                      <div className="flex items-start gap-3 flex-1">
-            ) : (
+                        <button
-              <>
+                          onClick={() => handleStatusChange(task.id, task.status === 'completed' ? 'pending' : 'completed')}
-                {filteredAndSortedTasks.map((task: Task) => (
+                          className="mt-1"
-                  <Card key={task.id} className={`${isOverdue(task.dueDate) ? 'border-red-200 dark:border-red-800' : ''}`}>
+                        >
-                    <CardContent className="p-6">
+                          {getStatusIcon(task.status)}
-                      <div className="flex items-start justify-between">
+                        </button>
-                        <div className="flex items-start space-x-4 flex-1">
+                        <div className="flex-1 min-w-0">
-                          <Button
+                          <h3 className={`font-medium ${task.status === 'completed' ? 'line-through text-gray-500' : ''}`}>
-                            variant="ghost"
+                            {task.title}
-                            size="sm"
+                          </h3>
-                            onClick={() => handleStatusChange(task.id, task.status === 'completed' ? 'pending' : 'completed')}
+                          {task.description && (
-                          >
+                            <p className="text-sm text-muted-foreground mt-1">
-                            {task.status === 'completed' ? (
+                              {task.description}
-                              <CheckCircle2 className="w-5 h-5 text-green-600" />
+                            </p>
-                            ) : (
+                          )}
-                              <Circle className="w-5 h-5" />
+                          <div className="flex items-center gap-2 mt-2">
-                            )}
+                            <Badge variant={getPriorityColor(task.priority) as any}>
-                          </Button>
+                              {task.priority}
-                          <div className="flex-1">
+                            </Badge>
-                            <div className="flex items-center gap-2 mb-1">
+                            <Badge variant="outline">
-                              <h3 className={`font-medium ${task.status === 'completed' ? 'line-through text-muted-foreground' : ''}`}>
+                              {task.status.replace('_', ' ')}
-                                {task.title}
+                            </Badge>
-                              </h3>
+                            {task.dueDate && (
-                              <Badge variant={getPriorityColor(task.priority)}>
+                              <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                                {task.priority}
+                                <Calendar className="w-3 h-3" />
-                              </Badge>
+                                {new Date(task.dueDate).toLocaleDateString()}
-                              <Badge variant={getStatusColor(task.status)}>
-                                {task.status.replace('_', ' ')}
-                              </Badge>
-                              {isOverdue(task.dueDate) && task.status !== 'completed' && (
-                                <Badge variant="destructive">Overdue</Badge>
-                              )}
-                            </div>
-                            {task.description && (
-                              <p className="text-sm text-muted-foreground mb-2">{task.description}</p>
-                            )}
-                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                              {task.dueDate && (
-                                <div className="flex items-center gap-1">
-                                  <Calendar className="w-3 h-3" />
-                                  Due: {new Date(task.dueDate).toLocaleDateString()}
-                                </div>
-                              )}
-                              <div className="flex items-center gap-1">
-                                <Clock className="w-3 h-3" />
-                                Created: {new Date(task.createdAt).toLocaleDateString()}
                               </div>
-                            </div>
+                            )}
                           </div>
                         </div>
-                        <div className="flex items-center gap-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setEditingTask(task)}
-                          >
-                            <Edit className="w-4 h-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleDeleteTask(task.id)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        </div>
                       </div>
-                    </CardContent>
+                    </div>
                   </Card>
-                ))}
+                ))
-              </>
-            )}
-          </div>
-
-          {/* Edit Task Dialog */}
-          <Dialog open={!!editingTask} onOpenChange={(open) => !open && setEditingTask(null)}>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Edit Task</DialogTitle>
-                <DialogDescription>
-                  Update your task details.
-                </DialogDescription>
-              </DialogHeader>
-              {editingTask && (
-                <form onSubmit={handleEditTask} className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="edit-title">Title</Label>
-                    <Input
-                      id="edit-title"
-                      value={editingTask.title}
-                      onChange={(e) => setEditingTask({ ...editingTask, title: e.target.value })}
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="edit-description">Description</Label>
-                    <Textarea
-                      id="edit-description"
-                      value={editingTask.description || ""}
-                      onChange={(e) => setEditingTask({ ...editingTask, description: e.target.value })}
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="edit-priority">Priority</Label>
-                      <Select value={editingTask.priority} onValueChange={(value: any) => setEditingTask({ ...editingTask, priority: value })}>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="low">Low</SelectItem>
-                          <SelectItem value="medium">Medium</SelectItem>
-                          <SelectItem value="high">High</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="edit-status">Status</Label>
-                      <Select value={editingTask.status} onValueChange={(value: any) => setEditingTask({ ...editingTask, status: value })}>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="pending">Pending</SelectItem>
-                          <SelectItem value="in_progress">In Progress</SelectItem>
-                          <SelectItem value="completed">Completed</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="edit-dueDate">Due Date</Label>
-                      <Input
-                        id="edit-dueDate"
-                        type="date"
-                        value={editingTask.dueDate || ""}
-                        onChange={(e) => setEditingTask({ ...editingTask, dueDate: e.target.value })}
-                      />
-                    </div>
-                  </div>
-                  <Button type="submit" disabled={updateTaskMutation.isPending}>
-                    {updateTaskMutation.isPending ? "Updating..." : "Update Task"}
-                  </Button>
-                </form>
               )}
-            </DialogContent>
+            </div>
-          </Dialog>
+          </div>
         </div>
       </div>
     </div>