feat: Add search and filter options to Customers page

client/src/App.tsx

@@ -1,11 +1,13 @@
+
+
 import { Switch, Route } from "wouter";
 import { queryClient } from "./lib/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider } from "@/components/theme-provider";
 import { AuthProvider } from "@/contexts/auth-context";
-import { HeaderWithNotifications } from "@/components/header-with-notifications"; // IMPORT THE NEW WRAPPER
+import { HeaderWithNotifications } from "@/components/header-with-notifications";
 import Home from "@/pages/home";
 import Network from "@/pages/network";
 import Profile from "@/pages/profile";
@@ -14,12 +16,13 @@ import Register from "@/pages/register";
 import Login from "@/pages/login";
 import Settings from "@/pages/settings";
 import NotFound from "@/pages/not-found";
-import { useState } from "react";
+import Customers from "@/pages/customers"; // ✅ Customers page
 
 function Router() {
   return (
     <Switch>
       <Route path="/" component={Home} />
+      <Route path="/customers" component={Customers} /> {/* ✅ Customers route */}
       <Route path="/network" component={Network} />
       <Route path="/profile/:id" component={Profile} />
       <Route path="/messages" component={Messages} />
@@ -32,17 +35,13 @@ function Router() {
 }
 
 function App() {
-  const [notificationCount,setnotificationCount]=useState<number>(0);
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider defaultTheme="light" storageKey="codebros-ui-theme">
         <AuthProvider>
           <TooltipProvider>
             <div className="min-h-screen bg-background">
-              <Header 
-                notificationCount={3}
-                onSearch={(query) => console.log("Search:", query)}
-              />
+              <HeaderWithNotifications /> {/* Keep header as is */}
               <main>
                 <Router />
               </main>

client/src/components/connection-modal.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { User } from "@shared/schema";
 import {
   Dialog,
   DialogContent,
@@ -11,11 +10,19 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
+interface UserMinimal {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  profileImage?: string;
+  title?: string;
+}
+
 interface ConnectionModalProps {
   isOpen: boolean;
   onClose: () => void;
-  targetUser: User | null;
-  onSendRequest: (userId: number, message?: string) => void;
+  targetUser: UserMinimal | null;
+  onSendRequest: (userId: string, message?: string) => void;
   isLoading?: boolean;
 }
 
@@ -30,11 +37,11 @@ export function ConnectionModal({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (targetUser) {
-      onSendRequest(targetUser.id, message.trim() || undefined);
-      setMessage("");
-      onClose();
-    }
+    if (!targetUser) return;
+
+    onSendRequest(targetUser._id, message.trim() || undefined);
+    setMessage("");
+    onClose();
   };
 
   const handleClose = () => {
@@ -54,16 +61,22 @@ export function ConnectionModal({
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
             <Avatar className="w-12 h-12">
-              <AvatarImage src={targetUser.profileImage} alt={`${targetUser.firstName} ${targetUser.lastName}`} />
+              <AvatarImage
+                src={targetUser.profileImage || ""}
+                alt={`${targetUser.firstName} ${targetUser.lastName}`}
+              />
               <AvatarFallback>
-                {targetUser.firstName[0]}{targetUser.lastName[0]}
+                {targetUser.firstName[0]}
+                {targetUser.lastName[0]}
               </AvatarFallback>
             </Avatar>
             <div>
               <h4 className="font-medium text-gray-900 dark:text-white">
                 {targetUser.firstName} {targetUser.lastName}
               </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">{targetUser.title}</p>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {targetUser.title || ""}
+              </p>
             </div>
           </div>
 

client/src/components/header-with-notifications.tsx

@@ -1,15 +1,25 @@
+import React, { useState, useEffect } from "react";
+import { Header } from "./header";
+import { useNotifications } from "../hooks/useNotifications";
 
-import React from 'react';
-import { useNotifications } from '../hooks/useNotifications';
-import { Header } from './header';
+interface HeaderWithNotificationsProps {
+  onSearch?: (query: string) => void;
+}
 
-export const HeaderWithNotifications = () => {
-  const { data: notificationCount = 0 } = useNotifications();
+export const HeaderWithNotifications: React.FC<HeaderWithNotificationsProps> = ({ onSearch }) => {
+  const { data: hookNotificationCount = 0 } = useNotifications();
+  const [notificationCount, setNotificationCount] = useState<number>(hookNotificationCount);
+
+  // Keep state in sync with hook
+  useEffect(() => {
+    setNotificationCount(hookNotificationCount);
+  }, [hookNotificationCount]);
 
   return (
     <Header
       notificationCount={notificationCount}
-      onSearch={(query) => console.log("Search:", query)}
+      setnotificationCount={setNotificationCount} // optional in Header
+      onSearch={onSearch ?? ((query) => console.log("Search:", query))}
     />
   );
 };