The calm admin panel for your next product

/* One file sets the look of every page */
:root {
  /* Sidebar */
  --sidebar-bg: #0B132B;
  --sidebar-text: #8D99AE;

  /* Brand & states */
  --primary: #00B4D8;        /* change it, every button follows */
  --primary-hover: #0096C7;
  --success: #10B981;
  --danger: #EF4444;

  /* Surfaces */
  --bg-body: #F8F9FA;
  --bg-card: #FFFFFF;
}

<!-- The demo reads its figures from a JSON file -->
<div data-finance-dashboard
     data-source="json/finance.json"></div>

<!-- Your app: the same shape, from your own route -->
<div data-finance-dashboard
     data-source="/admin/finance/data"></div>

<!-- No server yet? An inline copy is the fallback -->
<script type="application/json" id="finance-data">
  { "months": [ … ] }
</script>

// A card was dragged to another kanban column
document.addEventListener('odin:task-move', (event) => {
  const { id, status, sort } = event.detail;

  fetch(`/api/tasks/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ status, sort }),
  });
});

// Same idea for every app: odin:invoice-save,
// odin:gantt-change, odin:permissions-save …