Add missing icons to empty state cards

Add contextual icons to 4 EmptyState usages that were falling back to
the generic Inbox icon: Zap for jobs, Settings for JM config, GitBranch
for job graph, ArrowLeftRight for deployments. Replace custom inline
empty state in deployments-table with shared EmptyState component.

Author: sandboxws

dashboard/src/components/deployments/deployments-table.tsx

@@ -1,4 +1,6 @@
+import { EmptyState } from "@flink-reactor/ui"
 import { Link } from "@tanstack/react-router"
+import { ArrowLeftRight } from "lucide-react"
 import type { BlueGreenDeployment } from "@flink-reactor/ui"
 import { StateBadge } from "./state-badge"
 
@@ -9,13 +11,11 @@ interface DeploymentsTableProps {
 export function DeploymentsTable({ deployments }: DeploymentsTableProps) {
   if (deployments.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-16 text-zinc-500">
-        <p className="text-sm">No blue-green deployments found</p>
-        <p className="mt-1 text-xs">
-          Configure Kubernetes access to monitor FlinkBlueGreenDeployment
-          resources
-        </p>
-      </div>
+      <EmptyState
+        icon={ArrowLeftRight}
+        title="No blue-green deployments found"
+        description="Configure Kubernetes access to monitor FlinkBlueGreenDeployment resources"
+      />
     )
   }
 

dashboard/src/components/job-manager/jm-config-section.tsx

@@ -177,7 +177,7 @@ export function JmConfigSection({ config }: { config: JobManagerConfig[] }) {
             </tbody>
           </table>
           {filtered.length === 0 && (
-            <EmptyState message="No configuration entries" />
+            <EmptyState icon={Settings} message="No configuration entries" />
           )}
         </div>
 

dashboard/src/components/jobs/jobs-table.tsx

@@ -26,6 +26,7 @@ import {
   Check,
   Copy,
   Radio,
+  Zap,
   XCircle,
 } from "lucide-react"
 import { useCallback, useMemo, useState } from "react"
@@ -290,6 +291,7 @@ export function JobsTable({
   if (jobs.length === 0) {
     return (
       <EmptyState
+        icon={Zap}
         message={isRunning ? "No running jobs" : "No matching jobs"}
       />
     )

dashboard/src/components/overview/job-list.tsx

@@ -22,7 +22,7 @@ import { Link, useNavigate } from "@tanstack/react-router"
 import { formatDistanceToNow } from "date-fns"
 import {
   ArrowRight,
-  Briefcase,
+  Zap,
   Radio,
 } from "lucide-react"
 import { useMemo, useState } from "react"
@@ -181,7 +181,7 @@ export function JobList({
       </div>
 
       {visible.length === 0 ? (
-        <EmptyState icon={Briefcase} message="No jobs found" />
+        <EmptyState icon={Zap} message="No jobs found" />
       ) : (
         <Table>
           <TableHeader>

packages/ui/src/templates/jobs/job-graph-section.tsx

@@ -62,7 +62,7 @@ const statusDotColor: Record<string, string> = {
 export function JobGraphSection({ job }: { job: FlinkJob }) {
   const plan = job.plan
   if (!plan || plan.vertices.length === 0) {
-    return <EmptyState message="No execution plan available" />
+    return <EmptyState icon={GitBranch} message="No execution plan available" />
   }
 
   const vertexMap = new Map(plan.vertices.map((v) => [v.id, v]))