CUB-134: Build printers list page

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Dashboard from './pages/Dashboard'
 import InventoryPage from './pages/InventoryPage'
+import PrintersPage from './pages/PrintersPage'
 
 const queryClient = new QueryClient()
 
@@ -10,14 +11,22 @@ export default function App() {
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <div className="min-h-screen bg-slate-900 text-slate-50">
-          <header className="bg-slate-800 border-b border-slate-700 px-4 py-3 flex items-center gap-3 sticky top-0 z-20">
+          <header className="bg-slate-800 border-b border-slate-700 px-4 py-3 flex items-center gap-4 sticky top-0 z-20">
+            <a href="/" className="flex items-center gap-3 no-underline">
               <div className="w-8 h-8 rounded bg-emerald-500 flex items-center justify-center text-slate-900 font-bold text-lg">E</div>
-            <h1 className="text-lg font-semibold">Extrudex</h1>
+              <h1 className="text-lg font-semibold text-slate-50">Extrudex</h1>
+            </a>
+            <nav className="flex items-center gap-1 ml-2">
+              <a href="/" className="px-3 py-1.5 rounded-md text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-700 transition-colors">Dashboard</a>
+              <a href="/inventory" className="px-3 py-1.5 rounded-md text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-700 transition-colors">Inventory</a>
+              <a href="/printers" className="px-3 py-1.5 rounded-md text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-700 transition-colors">Printers</a>
+            </nav>
           </header>
           <main className="p-4">
             <Routes>
               <Route path="/" element={<Dashboard />} />
               <Route path="/inventory" element={<InventoryPage />} />
+              <Route path="/printers" element={<PrintersPage />} />
             </Routes>
           </main>
         </div>

frontend/src/pages/PrintersPage.tsx

@@ -0,0 +1,262 @@
+import { useQuery } from '@tanstack/react-query'
+import { Printer, Wifi, WifiOff, HelpCircle, Plus, Globe, Radio } from 'lucide-react'
+import { fetchPrinters } from '../services/printerService'
+import LoadingSpinner from '../components/LoadingSpinner'
+import type { Printer as PrinterType, ConnectionStatus } from '../types/printer'
+
+function getConnectionStatus(printer: PrinterType): ConnectionStatus {
+  if (!printer.is_active) return 'offline'
+  if (printer.moonraker_url || printer.mqtt_broker_host) return 'online'
+  return 'unknown'
+}
+
+const statusConfig: Record<ConnectionStatus, { icon: typeof Wifi; label: string; className: string }> = {
+  online: {
+    icon: Wifi,
+    label: 'Online',
+    className: 'bg-emerald-900/30 border-emerald-700 text-emerald-300',
+  },
+  offline: {
+    icon: WifiOff,
+    label: 'Offline',
+    className: 'bg-red-900/30 border-red-700 text-red-300',
+  },
+  unknown: {
+    icon: HelpCircle,
+    label: 'Unknown',
+    className: 'bg-slate-700/50 border-slate-600 text-slate-400',
+  },
+}
+
+export default function PrintersPage() {
+  const { data: printers, isLoading, error, refetch } = useQuery({
+    queryKey: ['printers'],
+    queryFn: fetchPrinters,
+  })
+
+  const count = printers?.length ?? 0
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div>
+          <h2 className="text-xl font-bold text-slate-100">Printers</h2>
+          <p className="text-sm text-slate-400">{count} printer(s) in fleet</p>
+        </div>
+        <button className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-500 active:bg-emerald-700 transition-colors">
+          <Plus size={16} /> Add Printer
+        </button>
+      </div>
+
+      {/* Loading */}
+      {isLoading && (
+        <div className="flex items-center justify-center py-16">
+          <LoadingSpinner />
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg border border-red-700 bg-red-900/20 p-6 text-center">
+          <p className="text-red-400 mb-2">Failed to load printers.</p>
+          <button
+            onClick={() => refetch()}
+            className="text-sm text-red-300 underline hover:text-red-200"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {/* Empty */}
+      {!isLoading && !error && printers?.length === 0 && (
+        <div className="rounded-lg border border-slate-700 bg-slate-800 p-12 text-center">
+          <Printer size={40} className="mx-auto mb-3 text-slate-500" />
+          <p className="text-slate-400">No printers found.</p>
+          <p className="text-sm text-slate-500 mt-1">
+            Add a printer to start monitoring your fleet.
+          </p>
+        </div>
+      )}
+
+      {/* Desktop Table */}
+      {!isLoading && !error && (printers?.length ?? 0) > 0 && (
+        <>
+          <div className="hidden lg:block overflow-x-auto rounded-lg border border-slate-700">
+            <table className="w-full text-sm">
+              <thead className="bg-slate-800 text-slate-300">
+                <tr>
+                  <th className="px-4 py-3 text-left font-semibold">Name</th>
+                  <th className="px-4 py-3 text-left font-semibold">Type</th>
+                  <th className="px-4 py-3 text-left font-semibold">Manufacturer</th>
+                  <th className="px-4 py-3 text-left font-semibold">Model</th>
+                  <th className="px-4 py-3 text-center font-semibold">Status</th>
+                  <th className="px-4 py-3 text-left font-semibold">Moonraker</th>
+                  <th className="px-4 py-3 text-left font-semibold">MQTT</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-700">
+                {printers!.map((printer) => {
+                  const status = getConnectionStatus(printer)
+                  const StatusIcon = statusConfig[status].icon
+                  return (
+                    <tr
+                      key={printer.id}
+                      className="bg-slate-800/50 hover:bg-slate-700/50 transition-colors"
+                    >
+                      <td className="px-4 py-3 font-medium text-slate-100">
+                        {printer.name}
+                      </td>
+                      <td className="px-4 py-3 text-slate-300">
+                        {printer.printer_type?.name ?? '—'}
+                      </td>
+                      <td className="px-4 py-3 text-slate-300">
+                        {printer.manufacturer || '—'}
+                      </td>
+                      <td className="px-4 py-3 text-slate-300">
+                        {printer.model || '—'}
+                      </td>
+                      <td className="px-4 py-3 text-center">
+                        <span
+                          className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${statusConfig[status].className}`}
+                        >
+                          <StatusIcon size={12} />
+                          {statusConfig[status].label}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        {printer.moonraker_url ? (
+                          <a
+                            href={printer.moonraker_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1.5 text-sky-400 hover:text-sky-300 text-xs truncate max-w-[180px]"
+                            title={printer.moonraker_url}
+                          >
+                            <Globe size={12} className="shrink-0" />
+                            {printer.moonraker_url}
+                          </a>
+                        ) : (
+                          <span className="text-slate-500 text-xs">—</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {printer.mqtt_broker_host ? (
+                          <div className="space-y-0.5">
+                            <div className="inline-flex items-center gap-1.5 text-xs text-slate-300">
+                              <Radio size={12} className="shrink-0 text-amber-400" />
+                              <span className="truncate max-w-[140px]" title={printer.mqtt_broker_host}>
+                                {printer.mqtt_broker_host}
+                              </span>
+                            </div>
+                            {printer.mqtt_topic_prefix && (
+                              <div className="text-xs text-slate-500 ml-[20px] truncate max-w-[140px]" title={printer.mqtt_topic_prefix}>
+                                topic: {printer.mqtt_topic_prefix}
+                              </div>
+                            )}
+                            <div className="text-xs text-slate-500 ml-[20px]">
+                              TLS: {printer.mqtt_tls_enabled ? 'on' : 'off'}
+                            </div>
+                          </div>
+                        ) : (
+                          <span className="text-slate-500 text-xs">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Mobile / Tablet Cards */}
+          <div className="lg:hidden space-y-3">
+            {printers!.map((printer) => {
+              const status = getConnectionStatus(printer)
+              const StatusIcon = statusConfig[status].icon
+              return (
+                <div
+                  key={printer.id}
+                  className="rounded-lg border border-slate-700 bg-slate-800 p-4 space-y-3"
+                >
+                  {/* Top row: name + status */}
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="font-semibold text-slate-100 truncate">
+                        {printer.name}
+                      </div>
+                      <div className="text-xs text-slate-400 mt-0.5">
+                        {[
+                          printer.printer_type?.name,
+                          printer.manufacturer,
+                          printer.model,
+                        ]
+                          .filter(Boolean)
+                          .join(' · ') || 'No details'}
+                      </div>
+                    </div>
+                    <span
+                      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium shrink-0 ${statusConfig[status].className}`}
+                    >
+                      <StatusIcon size={12} />
+                      {statusConfig[status].label}
+                    </span>
+                  </div>
+
+                  {/* Connection details */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {/* Moonraker */}
+                    <div className="rounded-md bg-slate-900/50 p-3 min-w-0">
+                      <div className="flex items-center gap-1.5 text-xs text-slate-400 mb-1">
+                        <Globe size={12} />
+                        Moonraker
+                      </div>
+                      {printer.moonraker_url ? (
+                        <a
+                          href={printer.moonraker_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs text-sky-400 hover:text-sky-300 break-all"
+                        >
+                          {printer.moonraker_url}
+                        </a>
+                      ) : (
+                        <span className="text-xs text-slate-500">Not configured</span>
+                      )}
+                    </div>
+
+                    {/* MQTT */}
+                    <div className="rounded-md bg-slate-900/50 p-3 min-w-0">
+                      <div className="flex items-center gap-1.5 text-xs text-slate-400 mb-1">
+                        <Radio size={12} />
+                        MQTT
+                      </div>
+                      {printer.mqtt_broker_host ? (
+                        <div className="space-y-0.5 text-xs text-slate-300">
+                          <div className="truncate" title={printer.mqtt_broker_host}>
+                            {printer.mqtt_broker_host}
+                          </div>
+                          {printer.mqtt_topic_prefix && (
+                            <div className="text-slate-500 truncate" title={printer.mqtt_topic_prefix}>
+                              topic: {printer.mqtt_topic_prefix}
+                            </div>
+                          )}
+                          <div className="text-slate-500">
+                            TLS: {printer.mqtt_tls_enabled ? 'on' : 'off'}
+                          </div>
+                        </div>
+                      ) : (
+                        <span className="text-xs text-slate-500">Not configured</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/services/printerService.ts

@@ -0,0 +1,9 @@
+import axios from 'axios'
+import type { Printer, PrinterResponse } from '../types/printer'
+
+const API_BASE = '/api'
+
+export async function fetchPrinters(): Promise<Printer[]> {
+  const res = await axios.get<PrinterResponse>(`${API_BASE}/printers`)
+  return res.data.data
+}

frontend/src/types/printer.ts

@@ -0,0 +1,29 @@
+export interface PrinterType {
+  id: number
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+export interface Printer {
+  id: number
+  name: string
+  printer_type_id: number
+  printer_type?: PrinterType
+  manufacturer?: string
+  model?: string
+  moonraker_url?: string
+  moonraker_api_key?: string
+  mqtt_broker_host?: string
+  mqtt_topic_prefix?: string
+  mqtt_tls_enabled: boolean
+  is_active: boolean
+  created_at: string
+  updated_at: string
+}
+
+export type ConnectionStatus = 'online' | 'offline' | 'unknown'
+
+export interface PrinterResponse {
+  data: Printer[]
+}