Implementing a Live 'TVs without MAC' List on the /tv Dashboard

TL;DR: I added a live 'TVs without MAC' list next to the recent activity section on the /tv dashboard. This feature involves modifying the dashboard API, updating the TV dashboard component, and adding a new service function.

The Problem

The /tv dashboard previously only displayed recent activity and device counts. However, there's a need to also show a list of TVs currently missing a valid MAC address for easier identification and management. The error message or symptom wasn't a specific error, but rather a missing feature.

What I Tried First

Initially, I considered adding a new endpoint to fetch the list of devices without MAC addresses. However, I decided to integrate this functionality into the existing dashboard API to minimize the number of requests made to the server.

The Implementation

To implement this feature, I made changes to three files:

src/app/api/dashboard/route.ts

import { NextResponse } from "next/server";
import {
  getLastSync,
  getDeviceCounts,
  getRecentChanges,
  getNoMacDevices,
} from "@/services/dashboard.service";

export async function GET(request: Request) {
  const lastSync = await getLastSync();
  const deviceCounts = await getDeviceCounts();
  const recentChanges = await getRecentChanges();
  const noMacDevices = await getNoMacDevices();

  return NextResponse.json({
    lastSync,
    deviceCounts,
    recentChanges,
    noMacDevices,
  });
}

src/features/tv/TVDashboard.tsx

interface DashboardData {
  newDevices: ChangeEntry[];
  removedDevices: ChangeEntry[];
  noMacDevices: { id: string; room: string; location: string; terminalAddress: string }[];
}

const TVDashboard = () => {
  const { data, error, isLoading } = useQuery<DashboardData>('/api/dashboard');

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Recent Activity</h2>
      <ul>
        {data.recentChanges.map((change) => (
          <li key={change.id}>{change.message}</li>
        ))}
      </ul>
      <h2>TVs without MAC</h2>
      <ul>
        {data.noMacDevices.map((device) => (
          <li key={device.id}>
            {device.room} - {device.location} ({device.terminalAddress})
          </li>
        ))}
      </ul>
    </div>
  );
};

src/services/dashboard.service.ts

/** Live list of TVs currently missing a valid MAC — for the /tv wallboard. */
export async function getNoMacDevices() {
  // Assuming a database query or API call to fetch devices without MAC
  const response = await fetch('/api/devices?filter=noMac');
  const devices = await response.json();
  return devices;
}

Key Takeaway

The key takeaway from this implementation is the importance of integrating new features into existing APIs and services to minimize the complexity and overhead of additional requests. By adding a new function to the dashboard.service.ts file and modifying the existing API endpoint, I was able to easily add the 'TVs without MAC' list feature to the /tv dashboard.

What's Next

Next, I plan to implement filtering and sorting functionality for the 'TVs without MAC' list to make it easier to manage and identify specific devices. This will involve adding additional parameters to the getNoMacDevices function and modifying the API endpoint to handle these new parameters.

vibecoding #buildinpublic #typescript #react #dashboard #api #services

---

Part of my Build in Public series — sharing the real process of building SaaS projects from Playa del Carmen, México.

Repo: zaerohell/tvview · 2026-07-10

#playadev #buildinpublic