Home
Ijila Itunu
Dash.OS: Drag & Drop Dashboard Widget System

Dash.OS: Drag & Drop Dashboard Widget System

A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

This tailwind example is contributed by Ijila Itunu, on 09-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics,Graph,Admin Dashboard, User dashboard

Breadcrumb Stats Chart Dashboard Progress Bar Widget

Author Ijila Itunu

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dashboard Widget System</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.27/interact.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
      font-family: 'Syne', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      transition: background .3s, color .3s;
    }

/* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

/* ── Header ── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      height: 56px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky; top: 0;
      z-index: 200;
      transition: background .3s, border-color .3s;
    }
    .logo {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .logo em { font-style: normal; color: var(--accent); }
    .logo sub {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text2);
      font-weight: 400;
      margin-left: 4px;
      letter-spacing: 0;
    }

.header-right { display: flex; align-items: center; gap: 8px; }

.btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      font-size: 12px; font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      user-select: none;
    }
    .btn:hover { background: var(--border); }

.btn-primary {
      background: var(--accent);
      color: #000;
      border-color: var(--accent);
    }
    .btn-primary:hover { opacity: .85; background: var(--accent); }

.icon-btn {
      width: 34px; height: 34px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all .15s;
    }
    .icon-btn:hover { background: var(--border); }

/* ── Toolbar ── */
    .toolbar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      transition: background .3s, border-color .3s;
    }
    .toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .toolbar-label {
      font-size: 10px; font-weight: 700; letter-spacing: .6px;
      text-transform: uppercase; color: var(--text2);
      margin-right: 4px;
    }
    .chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 12px;
      border-radius: 9999px;
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--text2);
      font-family: 'Syne', sans-serif;
      font-size: 11px; font-weight: 700;
      cursor: pointer;
      transition: all .2s;
    }
    .chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,.05); }
    .chip[data-theme-light] { --accent: #0284c7; }

.hint-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text2);
    }

/* ── Grid Area ── */
    .grid-area {
      position: relative;
      min-height: calc(100vh - 120px);
      overflow: hidden;
    }
    .grid-area::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle, var(--border) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
      opacity: .6;
      transition: opacity .3s;
    }

/* ── Widget ── */
    .widget {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex; flex-direction: column;
      overflow: hidden;
      min-width: 220px; min-height: 160px;
      transition: box-shadow .2s, border-color .2s, background .3s;
      will-change: transform;
    }
    .widget:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--shadow);
    }
    .widget.dragging {
      opacity: .92;
      z-index: 500;
      box-shadow: 0 24px 64px var(--shadow);
      border-color: var(--accent);
    }
    .widget.minimized .widget-body { display: none; }

.widget-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      cursor: grab;
      user-select: none;
      flex-shrink: 0;
      transition: background .3s, border-color .3s;
    }
    .widget-header:active { cursor: grabbing; }

.widget-title {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase;
      color: var(--text2);
    }
    .w-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

.widget-controls { display: flex; gap: 3px; }
    .wc-btn {
      width: 22px; height: 22px;
      border-radius: 5px;
      border: none; background: transparent;
      color: var(--text2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all .15s;
    }
    .wc-btn:hover { background: var(--border); color: var(--text); }
    .wc-btn.close:hover { color: var(--danger); background: rgba(239,68,68,.1); }

.widget-body {
      flex: 1;
      padding: 14px;
      overflow: auto;
      position: relative;
    }

.resize-handle {
      position: absolute; bottom: 0; right: 0;
      width: 22px; height: 22px;
      display: flex; align-items: flex-end; justify-content: flex-end;
      padding: 4px;
      color: var(--text2);
      opacity: 0; cursor: se-resize;
      transition: opacity .2s;
    }
    .widget:hover .resize-handle { opacity: 1; }

/* ── Stats Widget ── */
    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; height: 100%;
    }
    .stat-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      display: flex; flex-direction: column; gap: 6px;
      transition: background .3s, border-color .3s;
    }
    .stat-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      color: var(--text2);
    }
    .stat-val {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px; font-weight: 500;
      line-height: 1;
    }
    .stat-delta {
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; gap: 3px;
    }
    .stat-delta.up { color: var(--success); }
    .stat-delta.dn { color: var(--danger); }

/* ── Tasks Widget ── */
    .task-list { display: flex; flex-direction: column; gap: 7px; }
    .task-item {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 11px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s;
    }
    .task-item:hover { border-color: var(--accent); }
    .task-cb {
      width: 15px; height: 15px; flex-shrink: 0;
      border: 2px solid var(--border); border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .task-item.done .task-cb { background: var(--success); border-color: var(--success); }
    .task-text { font-size: 12px; flex: 1; transition: all .15s; }
    .task-item.done .task-text { text-decoration: line-through; color: var(--text2); }
    .task-badge {
      font-size: 9px; font-weight: 700;
      padding: 2px 7px; border-radius: 9999px;
      text-transform: uppercase; letter-spacing: .3px;
    }
    .badge-h { background: rgba(239,68,68,.12); color: var(--danger); }
    .badge-m { background: rgba(249,115,22,.12); color: var(--accent2); }
    .badge-l { background: rgba(34,197,94,.12); color: var(--success); }

/* ── Notifications Widget ── */
    .notif-list { display: flex; flex-direction: column; gap: 7px; }
    .notif-item {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      position: relative;
      transition: border-color .15s;
    }
    .notif-item:hover { border-color: var(--accent); }
    .notif-item.unread::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 3px; height: 55%;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }
    .notif-ico {
      width: 30px; height: 30px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; flex-shrink: 0;
    }
    .notif-body { flex: 1; }
    .notif-title { font-size: 12px; font-weight: 700; }
    .notif-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }
    .notif-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text2); flex-shrink: 0;
    }

/* ── Revenue header row ── */
    .rev-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .rev-kpi {
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px; font-weight: 500;
      color: var(--accent);
    }
    .rev-sub { font-size: 10px; color: var(--text2); margin-top: 1px; }
    .rev-badge {
      font-size: 11px; font-weight: 700;
      background: rgba(34,197,94,.12); color: var(--success);
      padding: 3px 10px; border-radius: 9999px;
    }

/* ── Toast ── */
    .toast {
      position: fixed; bottom: 20px; right: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--success);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px; font-weight: 700;
      display: flex; align-items: center; gap: 7px;
      z-index: 9999;
      transform: translateY(80px); opacity: 0;
      transition: all .4s cubic-bezier(.34,1.56,.64,1);
      pointer-events: none;
    }
    .toast.show { transform: translateY(0); opacity: 1; }

/* ── Enter animation ── */
    @keyframes widgetIn {
      from { opacity: 0; transform: scale(.94) translateY(8px); }
      to   { opacity: 1; transform: scale(1)  translateY(0); }
    }
    .widget { animation: widgetIn .25s ease forwards; }
  </style>
</head>
<body>

<header class="header">
  <div class="logo">dash<em>.</em>OS<sub>v1.0</sub></div>
  <div class="header-right">
    <button class="icon-btn" id="themeToggle" title="Toggle theme">
      
      <svg id="iconSun" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707"/>
      </svg>
      
      <svg id="iconMoon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 16 16" style="display:none">
        <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
      </svg>
    </button>
    <button class="btn" id="resetBtn">↺ Reset</button>
    <button class="btn btn-primary" id="saveBtn">✦ Save Layout</button>
  </div>
</header>

<div class="toolbar">
  <div class="toolbar-left">
    <span class="toolbar-label">+ Widget</span>
    <button class="chip" data-type="revenue">📈 Revenue</button>
    <button class="chip" data-type="stats">📊 KPI Stats</button>
    <button class="chip" data-type="tasks">✓ Tasks</button>
    <button class="chip" data-type="notifications">🔔 Alerts</button>
  </div>
  <span class="hint-text">drag header · resize corner · auto-saves</span>
</div>

<div class="grid-area" id="gridArea"></div>

<div class="toast" id="toast">
  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </svg>
  <span id="toastMsg">Saved!</span>
</div>

<script>
/* ─── Constants ─────────────────────────────────────────────── */
const SNAP       = 20;
const STORE_KEY  = 'dashOS_layout_v2';
const THEME_KEY  = 'dashOS_theme';

/* ─── Default Layout ────────────────────────────────────────── */
const DEFAULT_LAYOUT = [
  { id:'w_revenue_0',       type:'revenue',       title:'Revenue Overview', x:0,   y:0,   w:600, h:330 },
  { id:'w_stats_0',         type:'stats',         title:'KPI Metrics',      x:620, y:0,   w:370, h:330 },
  { id:'w_tasks_0',         type:'tasks',         title:'Tasks',            x:0,   y:350, w:370, h:370 },
  { id:'w_notifications_0', type:'notifications', title:'Notifications',    x:390, y:350, w:600, h:370 },
];

/* ─── State ─────────────────────────────────────────────────── */
let charts = {};   // widgetId → Chart instance

/* ─── Widget HTML builders ──────────────────────────────────── */
function buildRevenue(id) {
  return `
    <div class="rev-header">
      <div>
        <div class="rev-kpi">$470,240</div>
        <div class="rev-sub">Total revenue · YTD</div>
      </div>
      <span class="rev-badge">↑ 12.4% vs last year</span>
    </div>
    <div style="position:relative;flex:1;min-height:0;height:calc(100% - 60px)">
      <canvas id="canvas_${id}" style="width:100%;height:100%"></canvas>
    </div>`;
}

function buildStats() {
  return `
    <div class="stats-grid">
      <div class="stat-card">
        <span class="stat-label">Active Users</span>
        <span class="stat-val" style="color:var(--accent3)">8,241</span>
        <span class="stat-delta up">↑ 7.2% this week</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Conversion</span>
        <span class="stat-val" style="color:var(--accent2)">3.8%</span>
        <span class="stat-delta dn">↓ 0.3% vs avg</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Avg. Order</span>
        <span class="stat-val">$284</span>
        <span class="stat-delta up">↑ 5.1%</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Churn Rate</span>
        <span class="stat-val" style="color:var(--danger)">1.9%</span>
        <span class="stat-delta up">↓ 0.4% improved</span>
      </div>
    </div>`;
}

function buildTasks() {
  const tasks = [
    { text:'Design system audit',        done:true,  badge:'badge-h', label:'high'  },
    { text:'Q3 performance review',      done:false, badge:'badge-h', label:'high'  },
    { text:'API rate limit docs',        done:false, badge:'badge-m', label:'med'   },
    { text:'Onboarding flow update',     done:false, badge:'badge-m', label:'med'   },
    { text:'Fix sidebar alignment bug',  done:true,  badge:'badge-l', label:'low'   },
    { text:'Analytics dashboard v2',     done:false, badge:'badge-l', label:'low'   },
  ];
  return `<div class="task-list">${tasks.map((t,i) => `
    <div class="task-item ${t.done?'done':''}" onclick="toggleTask(this)">
      <div class="task-cb">
        ${t.done?`<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="white" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>`:''}
      </div>
      <span class="task-text">${t.text}</span>
      <span class="task-badge ${t.badge}">${t.label}</span>
    </div>`).join('')}</div>`;
}

function buildNotifications() {
  const items = [
    { ico:'💰', bg:'rgba(34,211,238,.1)',  title:'Revenue milestone hit',   desc:'Monthly target exceeded by 12%',        time:'2m',  unread:true  },
    { ico:'👤', bg:'rgba(167,139,250,.1)', title:'New team member joined',  desc:'Sarah Chen added to Engineering',        time:'18m', unread:true  },
    { ico:'⚠️', bg:'rgba(249,115,22,.1)', title:'API latency spike',        desc:'P95 latency rose to 840ms',              time:'1h',  unread:true  },
    { ico:'✅', bg:'rgba(34,197,94,.1)',   title:'Deploy successful',        desc:'v2.4.1 shipped to production',           time:'3h',  unread:false },
    { ico:'📊', bg:'rgba(34,211,238,.1)',  title:'Weekly report ready',     desc:'View analytics for the last 7 days',     time:'5h',  unread:false },
  ];
  return `<div class="notif-list">${items.map(n => `
    <div class="notif-item ${n.unread?'unread':''}">
      <div class="notif-ico" style="background:${n.bg}">${n.ico}</div>
      <div class="notif-body">
        <div class="notif-title">${n.title}</div>
        <div class="notif-desc">${n.desc}</div>
      </div>
      <span class="notif-time">${n.time} ago</span>
    </div>`).join('')}</div>`;
}

/* ─── Chart creation ────────────────────────────────────────── */
function createRevenueChart(widgetId) {
  const canvas = document.getElementById(`canvas_${widgetId}`);
  if (!canvas) return;

// destroy previous instance if exists
  if (charts[widgetId]) { charts[widgetId].destroy(); delete charts[widgetId]; }

const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
  const gridColor   = isDark ? '#1f2133' : '#e2e8f0';
  const tickColor   = isDark ? '#64748b' : '#94a3b8';
  const tooltipBg   = isDark ? '#0f1018' : '#ffffff';
  const tooltipText = isDark ? '#e2e8f0' : '#0f172a';

charts[widgetId] = new Chart(canvas.getContext('2d'), {
    type: 'line',
    data: {
      labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul'],
      datasets: [
        {
          label: 'Revenue',
          data: [42000,58000,51000,73000,68000,91000,87000],
          borderColor: '#22d3ee',
          backgroundColor: 'rgba(34,211,238,.07)',
          borderWidth: 2,
          pointBackgroundColor: '#22d3ee',
          pointRadius: 4, pointHoverRadius: 6,
          tension: .4, fill: true,
        },
        {
          label: 'Expenses',
          data: [28000,32000,30000,41000,38000,52000,47000],
          borderColor: '#f97316',
          backgroundColor: 'rgba(249,115,22,.05)',
          borderWidth: 2,
          pointBackgroundColor: '#f97316',
          pointRadius: 4, pointHoverRadius: 6,
          tension: .4, fill: true,
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 600 },
      plugins: {
        legend: {
          labels: {
            color: tickColor,
            font: { family: 'JetBrains Mono', size: 11 },
            boxWidth: 10,
          }
        },
        tooltip: {
          backgroundColor: tooltipBg,
          borderColor: gridColor,
          borderWidth: 1,
          titleColor: tooltipText,
          bodyColor: tickColor,
          titleFont: { family: 'Syne', weight: '700', size: 12 },
          bodyFont:  { family: 'JetBrains Mono', size: 11 },
          callbacks: {
            label: ctx => ` $${ctx.raw.toLocaleString()}`,
          }
        }
      },
      scales: {
        x: {
          grid: { color: gridColor },
          ticks: { color: tickColor, font: { family: 'JetBrains Mono', size: 10 } }
        },
        y: {
          grid: { color: gridColor },
          ticks: {
            color: tickColor, font: { family: 'JetBrains Mono', size: 10 },
            callback: v => '$'+(v/1000).toFixed(0)+'k'
          }
        }
      }
    }
  });
}

/* ─── Widget element factory ─────────────────────────────────── */
function makeWidget(cfg) {
  const el = document.createElement('div');
  el.className = 'widget';
  el.id = cfg.id;
  el.dataset.type = cfg.type;
  el.style.cssText = `left:${cfg.x}px;top:${cfg.y}px;width:${cfg.w}px;height:${cfg.h}px;`;

el.innerHTML = `
    <div class="widget-header">
      <div class="widget-title">
        <span class="w-dot" style="background:${TYPE_COLOR[cfg.type]}"></span>
        ${TYPE_ICON[cfg.type]} ${cfg.title}
      </div>
      <div class="widget-controls">
        <button class="wc-btn" title="Minimise" onclick="toggleMinimise('${cfg.id}')">
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
            <path d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
          </svg>
        </button>
        <button class="wc-btn close" title="Remove" onclick="removeWidget('${cfg.id}')">
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
          </svg>
        </button>
      </div>
    </div>
    <div class="widget-body" id="body_${cfg.id}" style="display:flex;flex-direction:column;gap:8px;overflow:auto;"></div>
    <div class="resize-handle">
      <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
        <path d="M5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-6 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
      </svg>
    </div>`;

return el;
}

function populateBody(id, type) {
  const body = document.getElementById(`body_${id}`);
  if (!body) return;
  if (type === 'revenue')       body.innerHTML = buildRevenue(id);
  else if (type === 'stats')    body.innerHTML = buildStats();
  else if (type === 'tasks')    body.innerHTML = buildTasks();
  else if (type === 'notifications') body.innerHTML = buildNotifications();
  if (type === 'revenue') requestAnimationFrame(() => createRevenueChart(id));
}

/* ─── interact.js ────────────────────────────────────────────── */
function attachInteract(el) {
  interact(el)
    .draggable({
      allowFrom: '.widget-header',
      modifiers: [
        interact.modifiers.snap({
          targets: [interact.snappers.grid({ x: SNAP, y: SNAP })],
          range: Infinity,
          relativePoints: [{ x: 0, y: 0 }]
        }),
        interact.modifiers.restrictRect({ restriction: '#gridArea', endOnly: true })
      ],
      listeners: {
        start(e) { e.target.classList.add('dragging'); },
        move(e) {
          const x = Math.max(0, (parseFloat(e.target.style.left) || 0) + e.dx);
          const y = Math.max(0, (parseFloat(e.target.style.top)  || 0) + e.dy);
          e.target.style.left = x + 'px';
          e.target.style.top  = y + 'px';
        },
        end(e) {
          e.target.classList.remove('dragging');
          autoSave();
        }
      }
    })
    .resizable({
      edges: { right: true, bottom: true, bottomRight: '.resize-handle' },
      modifiers: [
        interact.modifiers.snapSize({
          targets: [interact.snappers.grid({ width: SNAP, height: SNAP })]
        }),
        interact.modifiers.restrictSize({ minWidth: 220, minHeight: 160 })
      ],
      listeners: {
        move(e) {
          e.target.style.width  = e.rect.width  + 'px';
          e.target.style.height = e.rect.height + 'px';
          const id  = e.target.id;
          const c   = charts[id];
          if (c) c.resize();
        },
        end() { autoSave(); }
      }
    });
}

/* ─── Add / Remove / Minimise ────────────────────────────────── */
function addWidget(cfg) {
  const ga = document.getElementById('gridArea');
  const el = makeWidget(cfg);
  ga.appendChild(el);
  populateBody(cfg.id, cfg.type);
  attachInteract(el);
}

/* ─── Task toggle ────────────────────────────────────────────── */
function toggleTask(el) {
  el.classList.toggle('done');
  const cb  = el.querySelector('.task-cb');
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="white" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>`;
  cb.innerHTML = el.classList.contains('done') ? svg : '';
}

/* ─── Persistence ────────────────────────────────────────────── */
function getLayout() {
  return [...document.querySelectorAll('.widget')].map(el => ({
    id:    el.id,
    type:  el.dataset.type,
    title: TYPE_TITLE[el.dataset.type] || el.dataset.type,
    x:     parseFloat(el.style.left)   || 0,
    y:     parseFloat(el.style.top)    || 0,
    w:     parseFloat(el.style.width)  || 400,
    h:     parseFloat(el.style.height) || 300,
    minimized: el.classList.contains('minimized'),
    prevH: el.dataset.prevH || '',
  }));
}

function saveLayout() {
  localStorage.setItem(STORE_KEY, JSON.stringify(getLayout()));
  showToast('Layout saved ✓');
}

function autoSave() {
  localStorage.setItem(STORE_KEY, JSON.stringify(getLayout()));
}

function loadLayout() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
}

/* ─── Toast ──────────────────────────────────────────────────── */
let toastTimer;
function showToast(msg) {
  const t = document.getElementById('toast');
  document.getElementById('toastMsg').textContent = msg;
  t.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 2600);
}

/* ─── Theme ──────────────────────────────────────────────────── */
function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem(THEME_KEY, theme);
  document.getElementById('iconSun' ).style.display = theme === 'dark'  ? 'block' : 'none';
  document.getElementById('iconMoon').style.display = theme === 'light' ? 'block' : 'none';
  // Re-init charts for new colours
  setTimeout(() => {
    Object.keys(charts).forEach(id => createRevenueChart(id));
  }, 60);
}

function toggleTheme() {
  const cur = document.documentElement.getAttribute('data-theme');
  applyTheme(cur === 'dark' ? 'light' : 'dark');
}

/* ─── Boot ───────────────────────────────────────────────────── */
(function init() {
  // Theme
  const savedTheme = localStorage.getItem(THEME_KEY) || 'dark';
  applyTheme(savedTheme);

// Layout
  const layout = loadLayout() || DEFAULT_LAYOUT;
  renderLayout(layout);

// Controls
  document.getElementById('saveBtn').addEventListener('click', saveLayout);
  document.getElementById('themeToggle').addEventListener('click', toggleTheme);
  document.getElementById('resetBtn').addEventListener('click', () => {
    if (confirm('Reset to the default layout? Saved layout will be cleared.')) {
      localStorage.removeItem(STORE_KEY);
      renderLayout(DEFAULT_LAYOUT);
      showToast('Layout reset ↺');
    }
  });

// Add-widget chips
  document.querySelectorAll('.chip[data-type]').forEach(btn => {
    btn.addEventListener('click', () => {
      const type = btn.dataset.type;
      const id   = `w_${type}_${Date.now()}`;
      addWidget({ id, type, title: TYPE_TITLE[type], x: 20, y: 20, w: 480, h: 320 });
      autoSave();
      showToast(`${TYPE_ICON[type]} ${TYPE_TITLE[type]} added`);
    });
  });
})();
</script>
</body>
</html>

Related Examples

SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

936
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

11 months ago

1k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

947
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

12.4k
Breadcrumb

Author:
Laurits

3 years ago

11.6k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

9.7k
Simple count down timer

Author:
Gopi Yadav

3 years ago

15.3k
E-Voting Dashboard
For You

Author:
Alif Bima Pradana

1 week ago

107
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

11.4k
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

3 months ago

317
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

12.2k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components