Synchronizing Offline Device Counts in Real-Time

 

TL;DR: I fixed the discrepancy between the 'Equipos offline' count and the live offline count by implementing a unified data source and updating the dashboard components to reflect real-time changes. This involved modifying dashboard.service.ts, whats-changed.tsx, and TVDashboard.tsx.

The Problem

The 'Equipos offline' count on the dashboard was not matching the live offline count. This discrepancy was causing confusion and undermining the reliability of the dashboard. The error message or symptom was not explicitly recorded, but the issue was clear: the counts were not aligning.

What I Tried First

Initially, I suspected that the issue might be related to the way data was being fetched or processed in the dashboard.service.ts file. I reviewed the code and noticed that there were separate functions for fetching device counts and recent changes. I thought that perhaps the issue was due to the asynchronous nature of these functions and the potential for data to become outdated.

// Initial code snippet from dashboard.service.ts
export async function getDeviceCounts() {
  // ...
}

export async function getRecentChanges(limit = 50) {
  // ...
}

The Implementation

To resolve the issue, I decided to unify the data source for both the 'Equipos offline' count and the live offline count. I modified the dashboard.service.ts file to include a new function that would fetch the offline devices and update the counts accordingly.

// Updated code snippet from dashboard.service.ts
export async function getOfflineDevices() {
  const response = await fetch('/api/offline-devices');
  const offlineDevices = await response.json();
  return offlineDevices;
}

export async function getDeviceCounts() {
  const offlineDevices = await getOfflineDevices();
  // Update counts based on offline devices
  // ...
}

Next, I updated the whats-changed.tsx and TVDashboard.tsx components to use the new unified data source. I added a new interface OfflineEntry to represent the offline devices and updated the code to reflect the real-time changes.

// Updated code snippet from whats-changed.tsx
interface OfflineEntry {
  id: string;
  deviceName: string;
  site: string | null;
  updatedAt: string;
}

const WhatsChanged = () => {
  const { offlineDevices } = useDashboardData();
  // ...
};

// Updated code snippet from TVDashboard.tsx
interface OfflineEntry {
  id: string;
  deviceName: string;
  site: string | null;
  updatedAt: string;
}

const TVDashboard = () => {
  const { offlineDevices } = useDashboardData();
  // ...
};

Key Takeaway

The key takeaway from this experience is the importance of unifying data sources when dealing with real-time data. By doing so, we can ensure that our application reflects the most up-to-date information and avoid discrepancies that can lead to confusion.

What's Next

The next step is to implement a similar unified data source for other device statuses, such as 'online' and 'maintenance'. This will further enhance the reliability and accuracy of the dashboard.

vibecoding #buildinpublic #typescript #react #real-time-data

---

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

Repo: zaerohell/greenview · 2026-07-10

#playadev #buildinpublic