Revamp Dashboard UI and enhance target display.

Refactored the dashboard page to improve layout and clarity, including updated KPIs with better alert and status representation. Redesigned the target list to a card-based layout with clear status indicators and actionable buttons. Updated styles for consistency and better user experience.

frontend/src/pages/DashboardPage.jsx

@@ -29,45 +29,55 @@ export function DashboardPage() {
   if (loading) return <div className="card">Loading dashboard...</div>;
   if (error) return <div className="card error">{error}</div>;
 
+  const alerts = targets.filter((t) => !t.host || !t.dbname).length;
+  const okCount = Math.max(0, targets.length - alerts);
+
   return (
-    <div>
+    <div className="dashboard-page">
       <h2>Dashboard Overview</h2>
-      <div className="grid three">
-        <div className="card stat">
+      <div className="grid three dashboard-kpis">
+        <div className="card stat kpi-card">
           <strong>{targets.length}</strong>
-          <span>Targets</span>
+          <span>Total Targets</span>
         </div>
-        <div className="card stat">
-          <strong>{targets.length}</strong>
-          <span>Status OK (placeholder)</span>
+        <div className="card stat kpi-card ok">
+          <strong>{okCount}</strong>
+          <span>Status OK</span>
         </div>
-        <div className="card stat">
-          <strong>0</strong>
-          <span>Alerts (placeholder)</span>
+        <div className="card stat kpi-card alert">
+          <strong>{alerts}</strong>
+          <span>Alerts</span>
         </div>
       </div>
+
       <div className="card">
-        <h3>Targets</h3>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Host</th>
-              <th>DB</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {targets.map((t) => (
-              <tr key={t.id}>
-                <td>{t.name}</td>
-                <td>{t.host}:{t.port}</td>
-                <td>{t.dbname}</td>
-                <td><Link to={`/targets/${t.id}`}>Details</Link></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <div className="dashboard-targets-head">
+          <h3>Targets</h3>
+          <span>{targets.length} registered</span>
+        </div>
+
+        <div className="dashboard-target-list">
+          {targets.map((t) => {
+            const hasAlert = !t.host || !t.dbname;
+            return (
+              <article className="dashboard-target-card" key={t.id}>
+                <div className="target-main">
+                  <div className="target-title-row">
+                    <h4>{t.name}</h4>
+                    <span className={`status-chip ${hasAlert ? "alert" : "ok"}`}>
+                      {hasAlert ? "Alert" : "OK"}
+                    </span>
+                  </div>
+                  <p><strong>Host:</strong> {t.host}:{t.port}</p>
+                  <p><strong>DB:</strong> {t.dbname}</p>
+                </div>
+                <div className="target-actions">
+                  <Link className="details-btn" to={`/targets/${t.id}`}>Details</Link>
+                </div>
+              </article>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

frontend/src/pages/TargetsPage.jsx

@@ -137,7 +137,7 @@ export function TargetsPage() {
               </small>
             </div>
             <div className="field submit-field">
-              <div className="target-actions">
+              <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
                   {testState.loading ? "Testing..." : "Test connection"}
                 </button>