Tutorial: Setup Dashboard Owner untuk Pantau Revenue Real-Time

Step-by-step setup dashboard revenue real-time tanpa tools mahal. Pakai data dari POS/booking system Anda, visualisasi clean, deliverable dalam 1 minggu.

Yusuf Ginanjar

14 April 20265 min baca

Owner UMKM sering blind terhadap performance bisnisnya sendiri. Data ada — di POS, booking system, payment gateway — tapi tersebar. Hari ini saya tunjukkan cara setup dashboard owner real-time yang actually actionable.

Kenapa dashboard owner penting

Tanpa dashboard, owner decision-making berbasis feeling:

"Sepertinya bulan ini sepi" — padahal revenue naik 15% yoy
"Layanan X laris" — padahal margin-nya tipis dan ada layanan Y yang lebih profitable
"Cabang A perform bagus" — padahal kalau dibreakdown per capita staf, cabang B lebih efisien

Dashboard bukan cosmetic — dia alat decision-making.

Metric yang matter (pick 5-7, bukan 50)

Kesalahan umum: dashboard dengan 30+ widget. Terlalu banyak = tidak ada yang dipakai.

Pick 5-7 metric core. Untuk klinik/resto/jasa:

Revenue core

Today revenue vs same day last week (apple-to-apple comparison)
MTD revenue vs target bulan (% progress)
Revenue trend 30 hari terakhir (line chart)

Operations

Booking/order count today + conversion rate (dari inquiry jika tracked)
Top 5 services/products by revenue this month

Customer

New vs returning customer ratio
Average transaction value trend

Itu saja di fold pertama. Detail bisa di-drill down ke sub-dashboard.

Data source — real-time vs near-real-time

"Real-time" jarang benar-benar penting. 5-15 menit lag biasanya acceptable dan murah implementasinya. True real-time (sub-second) perlu streaming infra yang mahal.

Untuk UMKM, near-real-time cukup:

Polling POS/booking DB setiap 5-15 menit
Cache hasil di dashboard backend
UI refresh setiap page load atau manual refresh button

Stack pilihan

Option A: Custom build (yang kami rekomendasikan)

Pro: fleksibel, data stay di-infra Anda, satu source of truth.

Stack:

Backend: Node/Next.js API route pulling dari POS/booking DB
Database: Postgres (kalau sudah punya, reuse)
Visualisasi: library seperti Recharts atau Tremor (React)
Auth: simple (email + password atau magic link)

Effort: 2-4 minggu untuk dashboard solid.

Option B: Looker Studio (Google)

Pro: gratis, setup cepat, familiar ke banyak orang (ex Google Data Studio).

Stack:

Data source: BigQuery atau direct connection ke SQL database
Visualisasi: Looker Studio dashboard
Auth: Google account

Effort: 3-5 hari untuk dashboard basic.

Cons: data harus ekspor ke Google ecosystem. Less flexible untuk interaksi custom.

Option C: Metabase self-hosted

Pro: open source, powerful SQL-based, gratis untuk self-host.

Cons: butuh server + maintenance.

Step-by-step custom dashboard (option A)

1. Data layer

-- View untuk daily revenue
CREATE MATERIALIZED VIEW daily_revenue AS
SELECT
  DATE(created_at AT TIME ZONE 'Asia/Jakarta') AS day,
  SUM(total_amount) AS revenue,
  COUNT(DISTINCT customer_id) AS unique_customers,
  COUNT(*) AS transaction_count
FROM orders
WHERE status = 'completed'
GROUP BY day;
 
-- Refresh tiap 10 menit
REFRESH MATERIALIZED VIEW CONCURRENTLY daily_revenue;

Materialized view = snapshot hasil query yang bisa di-refresh periodik. Jauh lebih cepat dibanding live query setiap page load.

2. API route

// app/api/dashboard/overview/route.ts
export const revalidate = 300; // 5 menit cache
 
export async function GET() {
  const today = await db.query.dailyRevenue.findFirst({
    where: eq(dailyRevenue.day, sql`CURRENT_DATE`),
  });
 
  const lastWeekSameDay = await db.query.dailyRevenue.findFirst({
    where: eq(dailyRevenue.day, sql`CURRENT_DATE - INTERVAL '7 days'`),
  });
 
  return Response.json({
    today: today?.revenue ?? 0,
    lastWeek: lastWeekSameDay?.revenue ?? 0,
    delta: calcDelta(today?.revenue, lastWeekSameDay?.revenue),
  });
}

3. UI component

Recharts simple line chart:

<LineChart width={600} height={300} data={last30DaysData}>
  <XAxis dataKey="day" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="revenue" stroke="#F0A500" strokeWidth={2} />
</LineChart>

4. Auto-refresh

"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
 
export function AutoRefresh({ intervalMs = 5 * 60 * 1000 }) {
  const router = useRouter();
  useEffect(() => {
    const id = setInterval(() => router.refresh(), intervalMs);
    return () => clearInterval(id);
  }, [intervalMs, router]);
  return null;
}

Include component ini di dashboard page — auto refresh setiap 5 menit tanpa manual reload.

UI principles untuk dashboard

Hierarki visual: metric paling penting paling besar. KPI cards di atas, chart di bawah.
Color code: hijau = good, merah = bad, neutral untuk zero-value. Gunakan sparingly.
Comparison default: setiap angka harus ada baseline (vs yesterday / last week / target).
No clutter: whitespace banyak. Resist temptation nambah widget.
Mobile-friendly: owner sering cek dari HP. Responsive wajib.

Alert yang matter

Selain dashboard passive, setup alert proaktif:

Revenue day-on-day drop >20%: kirim WhatsApp/email ke owner
No-show rate weekly >15%: warning
New customer zero in 3 consecutive days: warning (kalau biasa ada new customer)

Alert terlalu sering = tidak akan dibuka. Tune threshold supaya alert genuine actionable.

Reconciliation dengan cash register/POS native report
Red flag kalau ada >5% discrepancy

❌ Over-engineering

Start simple. 5 KPI + 1 chart cukup untuk month 1. Evolve berdasarkan request owner.

Contoh nyata

Untuk klien yang punya 3 cabang klinik, dashboard yang kami deliver:

Page 1: Overview (KPI cards + revenue trend)
Page 2: Branch breakdown (comparison antar cabang)
Page 3: Services breakdown (revenue per layanan, margin, utilization)
Page 4: Staff performance (booking per dokter, retention)

Owner buka 1-2x sehari. Jadi primary tool untuk weekly ops review dengan manager cabang.

Next step

Kalau bisnis Anda belum ada dashboard, start:

List 5-7 metric yang paling mau Anda track
Mapping: dari sistem mana data-nya?
Pilih stack (A/B/C di atas)
Build MVP dashboard dalam 1 minggu

Konsultasi gratis 30 menit kalau butuh bantuan arsitektur dashboard untuk bisnis Anda.

Baca juga: Cara Kerja Booking System Online untuk Klinik — salah satu data source utama dashboard.

Tags#dashboard #analytics #revenue #tutorial