Admin Dashboard

How it works — View Source

import { signal, computed, effect, batch } from 'tina4js';

// Reactive state
const visitors  = signal(1247);
const orders    = signal(84);
const revenue   = signal(12580);
const errorRate = signal(0.3);

// Derived KPI — updates automatically
const convRate = computed(() =>
  ((orders.value / visitors.value) * 100).toFixed(1)
);

// Side effect — re-renders whenever dependencies change
effect(() => {
  kpiEl.textContent = `${convRate.value}%`;
});

// Simulate live data (batch avoids intermediate renders)
setInterval(() => {
  batch(() => {
    visitors.value += Math.floor(Math.random() * 20);
    orders.value   += Math.random() > 0.6 ? 1 : 0;
  });
}, 3000);

Traffic by Source

Activity Feed

How it works — View Source