Add search functionality to the Dashboard targets list

Implemented a search input to filter targets based on name, host, or database fields. Updated the UI to show filtered results and display a message if no targets match the search. Adjusted styles for improved responsiveness and usability.

frontend/src/pages/DashboardPage.jsx

@@ -6,6 +6,7 @@ import { useAuth } from "../state";
 export function DashboardPage() {
   const { tokens, refresh } = useAuth();
   const [targets, setTargets] = useState([]);
+  const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
@@ -31,6 +32,15 @@ export function DashboardPage() {
 
   const alerts = targets.filter((t) => !t.host || !t.dbname).length;
   const okCount = Math.max(0, targets.length - alerts);
+  const filteredTargets = targets.filter((t) => {
+    const q = search.trim().toLowerCase();
+    if (!q) return true;
+    return (
+      (t.name || "").toLowerCase().includes(q) ||
+      (t.host || "").toLowerCase().includes(q) ||
+      (t.dbname || "").toLowerCase().includes(q)
+    );
+  });
 
   return (
     <div className="dashboard-page">
@@ -56,12 +66,21 @@ export function DashboardPage() {
 
       <div className="card dashboard-targets-card">
         <div className="dashboard-targets-head">
-          <h3>Targets</h3>
-          <span>{targets.length} registered</span>
+          <div>
+            <h3>Targets</h3>
+            <span>{filteredTargets.length} shown of {targets.length} registered</span>
+          </div>
+          <div className="dashboard-target-search">
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search by name, host, or database..."
+            />
+          </div>
         </div>
 
         <div className="dashboard-target-list">
-          {targets.map((t) => {
+          {filteredTargets.map((t) => {
             const hasAlert = !t.host || !t.dbname;
             return (
               <article className="dashboard-target-card" key={t.id}>
@@ -81,6 +100,9 @@ export function DashboardPage() {
               </article>
             );
           })}
+          {filteredTargets.length === 0 && (
+            <div className="dashboard-empty">No targets match your search.</div>
+          )}
         </div>
       </div>
     </div>