{# templates/pos/index.html #}
{% extends "pos/base.html" %}
{% load video_help_tags %}
{% load static %}

{% block title %}Dashboard{% endblock %}

{% block stylesheets %}
<style>
  :root{
    --bp-blue:#0056B8;
    --bp-dark:#0f172a;
    --bp-muted:#667085;
    --bp-bg:#f7f9ff;
    --bp-card:#ffffff;
    --bp-line:#e5e7eb;
    --bp-shadow: 0 8px 24px rgba(16,24,40,.08);
  }

  .dash-wrap { background: var(--bp-bg); border-radius: 14px; }
  .dash-topbar{
    background: var(--bp-card);
    border:1px solid var(--bp-line);
    border-radius: 14px;
    box-shadow: var(--bp-shadow);
  }

  .bp-title{
    font-weight:800; color:var(--bp-dark); letter-spacing:.2px;
  }
  .bp-sub{ color:var(--bp-muted); font-size:.9rem; }

  .sub-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .6rem; border-radius:999px;
    border:1px solid var(--bp-line); background:#fff;
    font-size:.82rem; font-weight:700;
  }
  .sub-dot{ width:10px; height:10px; border-radius:50%; background:#22c55e; }
  .sub-dot.warn{ background:#f59e0b; }
  .sub-dot.danger{ background:#ef4444; }

  .range-controls .input-group-text{ background:#fff; border-color:var(--bp-line); }
  .range-controls .custom-select, .range-controls .form-control{
    border-color:var(--bp-line);
  }
  .btn-bp{
    background:var(--bp-blue); border:none; color:#fff;
    border-radius:10px; padding:.45rem .75rem; font-weight:700;
    box-shadow: 0 6px 16px rgba(0,86,184,.22);
  }
  .btn-bp:hover{ opacity:.95; color:#fff; }

  /* Launcher tiles */
  .launcher{
    background:var(--bp-card);
    border:1px solid var(--bp-line);
    border-radius: 14px;
    box-shadow: var(--bp-shadow);
  }
  .tile{
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem .9rem;
    border:1px solid var(--bp-line);
    border-radius: 14px;
    background:#fff;
    transition: transform .06s ease, box-shadow .12s ease;
    text-decoration:none !important;
    color:inherit;
  }
  .tile:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,24,40,.10); }
  .tile-ic{
    width:44px; height:44px; border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,86,184,.08);
    color: var(--bp-blue);
    font-size: 18px;
  }
  .tile-t{ font-weight:800; color:var(--bp-dark); line-height:1.1; }
  .tile-s{ color:var(--bp-muted); font-size:.82rem; }

  /* Pending panels */
  .pending{
    border-radius:14px;
    border:1px solid var(--bp-line);
    background:#fff;
    box-shadow: var(--bp-shadow);
  }
  .pending-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem .9rem; border-bottom:1px solid var(--bp-line);
  }
  .pending-title{ font-weight:900; color:var(--bp-dark); }
  .badge-soft{
    padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:800;
    border:1px solid var(--bp-line); background:#f8fafc; color:var(--bp-dark);
  }
  .badge-soft.pending{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }
  .badge-soft.partial{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); }
  .pending-body{ padding:.75rem .9rem; }
  .pending-row{
    display:flex; gap:.75rem; align-items:center; justify-content:space-between;
    padding:.6rem .6rem;
    border:1px solid var(--bp-line);
    border-radius: 12px;
    margin-bottom:.55rem;
  }
  .pending-row:last-child{ margin-bottom:0; }
  .p-left{ min-width:0; }
  .p-main{ font-weight:900; color:var(--bp-dark); }
  .p-sub{ color:var(--bp-muted); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 360px; }
  .p-actions{ display:flex; gap:.4rem; flex:0 0 auto; }
  .btn-mini{
    border-radius:10px; padding:.35rem .55rem; font-weight:800; font-size:.78rem;
    border:1px solid var(--bp-line); background:#fff;
  }
  .btn-mini.primary{ background:var(--bp-blue); color:#fff; border-color: transparent; }

  /* Charts + cards */
  .panel{
    background:#fff;
    border:1px solid var(--bp-line);
    border-radius: 14px;
    box-shadow: var(--bp-shadow);
  }
  .panel-head{
    padding:.75rem .9rem; border-bottom:1px solid var(--bp-line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .panel-title{ font-weight:900; color:var(--bp-dark); }
  .panel-sub{ color:var(--bp-muted); font-size:.82rem; }

  .kpi{
    background:#fff;
    border:1px solid var(--bp-line);
    border-radius: 14px;
    box-shadow: var(--bp-shadow);
    padding:.85rem .9rem;
  }
  .kpi-top{ display:flex; align-items:center; justify-content:space-between; }
  .kpi-ic{
    width:40px; height:40px; border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,86,184,.08);
    color: var(--bp-blue);
  }
  .kpi-l{ color:var(--bp-muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
  .kpi-v{ font-weight:950; font-size: 1.2rem; color:var(--bp-dark); margin-top:.25rem; }
  .kpi-mini{ margin-top:.35rem; color:var(--bp-muted); font-size:.78rem; display:flex; gap:.6rem; flex-wrap:wrap; }
  .mini-pill{ padding:.15rem .45rem; border-radius:999px; border:1px solid var(--bp-line); background:#f8fafc; font-weight:800; }

  .table thead th{ border-top:0; }
  .table td, .table th{ vertical-align:middle; }
  .btn-view{
    border-radius:10px; font-weight:800;
    padding:.35rem .6rem;
  }

  .skeleton{
    background: linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);
    background-size: 200% 100%;
    animation: sk 1.2s ease-in-out infinite;
    border-radius: .75rem;
  }
  @keyframes sk { 0%{background-position:0 0} 100%{background-position:-200% 0} }


  /* ================================
     DASHBOARD: Peaceful Light Theme
     (Overrides dark background)
  ================================ */

  /* 1) Soft page background (remove black gaps) */
  :root{
    --dash-bg: #f4f7fb;                 /* main background */
    --dash-card: #ffffff;               /* cards */
    --dash-border: rgba(15, 23, 42, .08);
    --dash-shadow: 0 10px 26px rgba(2, 6, 23, .08);
    --dash-shadow-sm: 0 6px 16px rgba(2, 6, 23, .06);
    --dash-text: #0f172a;
    --dash-muted: #64748b;
  }

  html, body{
    background: var(--dash-bg) !important;
    color: var(--dash-text);
  }

  /* In case base.html wraps content in dark containers */
  #content, .content-wrapper, .main-content, .container-fluid, main{
    background: transparent !important;
  }

  /* Optional: subtle “not boring” but peaceful gradient */
  body{
    background-image:
      radial-gradient(900px 380px at 12% -10%, rgba(0, 86, 184, .10), transparent 55%),
      radial-gradient(900px 380px at 95% 0%, rgba(34, 197, 94, .08), transparent 50%);
    background-repeat: no-repeat;
  }

  /* 2) Cards: remove heavy/dark look */
  .card, .kpi-card{
    background: var(--dash-card) !important;
    border: 1px solid var(--dash-border) !important;
    box-shadow: var(--dash-shadow-sm) !important;
    border-radius: 16px !important;
  }

  /* 3) Tight black separators fix (gaps area) */
  .row, .dash-wrap, .dash-shell{
    background: transparent !important;
  }

  /* 4) Headings + muted text polish */
  .kpi-label, .muted{
    color: var(--dash-muted) !important;
  }

  /* 5) Subscription badge: clean chip look */
  .badge, .sub-badge, #subBadge{
    border-radius: 999px !important;
    padding: .45rem .7rem !important;
    border: 1px solid var(--dash-border) !important;
    background: rgba(255,255,255,.85) !important;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .06) !important;
  }

  /* 6) Icon button (Apply) less harsh */
  .icon-btn{
    box-shadow: 0 8px 18px rgba(0, 86, 184, .18) !important;
  }



/* ============================
   Quick Actions: Compact 1-Row
============================ */

/* card padding compact */
.qa-card .card-body{
  padding: .45rem .6rem !important;
}

/* force single row + allow horizontal scroll on small screens */
.quick-actions{
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: .55rem;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}

/* optional: slim scrollbar */
.quick-actions::-webkit-scrollbar{ height: 6px; }
.quick-actions::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, .18);
  border-radius: 999px;
}
.quick-actions::-webkit-scrollbar-track{
  background: transparent;
}

/* each shortcut: compact footprint */
.quick-actions a{
  flex: 0 0 auto;
  width: 66px;              /* compact */
  min-width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: inherit;
  padding: .2rem .2rem;
  border-radius: 12px;
  transition: transform .08s ease, background .12s ease;
}
.quick-actions a:hover{
  background: rgba(0, 86, 184, .06);
  transform: translateY(-1px);
}

/* icon bubble */
.qa-circle{
  width: 44px;
  height: 44px;
  border-radius: 12px;     /* modern (not full circle) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 8px 18px rgba(2, 6, 23, .06);
}

/* label compact */
.qa-label{
  font-size: .68rem;
  margin-top: .25rem;
  line-height: 1.05;
  white-space: nowrap;
  color: #334155;
}

/* =========================
   Chart Height (Max Height)
========================= */
.chart-box{
  position: relative;
  width: 100%;
  height: clamp(180px, 26vh, 280px);   /* responsive + max cap */
  max-height: 280px;
}

.chart-box.sm{
  height: clamp(160px, 22vh, 240px);
  max-height: 240px;
}

/* Chart.js canvas must fill the box */
.chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Topbar color states (soft) */
.dash-topbar.sub-ok{
  background: rgba(34, 197, 94, .08) !important;   /* green */
  border-color: rgba(34, 197, 94, .20) !important;
}
.dash-topbar.sub-warn{
  background: rgba(245, 158, 11, .10) !important;  /* orange */
  border-color: rgba(245, 158, 11, .25) !important;
}
.dash-topbar.sub-danger{
  background: rgba(239, 68, 68, .10) !important;   /* red */
  border-color: rgba(239, 68, 68, .25) !important;
}


.chart-box{
  height: 220px;        /* max height */
  max-height: 220px;
}
.chart-box canvas{
  width:100% !important;
  height:100% !important;
}


/* ============================
   Quick Actions Row (QA + WhatsApp)
============================ */
.qa-row {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}
.qa-row .qa-card {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* ============================
   WhatsApp Status Card (Standalone)
============================ */
.wa-status-card {
  flex: 0 0 auto;
  width: 100px;
  padding: .6rem .5rem;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
  transition: all .2s ease;
}
.wa-status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.wa-status-card.connected {
  border-color: #25D366;
  background: linear-gradient(135deg, rgba(37,211,102,.06), rgba(18,140,126,.03));
}
.wa-status-card.disconnected {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(220,38,38,.03));
}
.wa-status-card .wa-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  font-size: 24px;
  position: relative;
}
.wa-status-card .wa-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #9ca3af;
}
.wa-status-card.connected .wa-dot {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,.7);
}
.wa-status-card.disconnected .wa-dot {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,.6);
}
.wa-status-card .wa-label {
  font-size: .75rem;
  font-weight: 800;
  color: #334155;
  text-align: center;
  line-height: 1.2;
}
.wa-status-card.connected .wa-label { color: #15803d; }
.wa-status-card.disconnected .wa-label { color: #dc2626; }
.wa-status-card .wa-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(37,211,102,.3);
  border-top-color: #25D366;
  border-radius: 50%;
  animation: wa-spin .8s linear infinite;
}
@keyframes wa-spin { to { transform: rotate(360deg); } }

/* Mobile: stack vertically */
@media (max-width: 576px) {
  .qa-row {
    flex-direction: column;
  }
  .wa-status-card {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    padding: .5rem .75rem;
    gap: .75rem;
  }
}

</style>






{# === START CSS === #}
<style>
/* =============================================
   EXPANDABLE QUICK-ACTIONS  — Animated Sub-Menu
   ============================================= */
 
/* Parent item: toggle mode */
.qa-toggle{
  flex: 0 0 auto;
  width: 66px;
  min-width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: inherit;
  padding: .2rem .2rem;
  border-radius: 12px;
  transition: transform .12s ease, background .15s ease;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.qa-toggle:hover{
  background: rgba(0, 86, 184, .06);
  transform: translateY(-1px);
}
 
/* Active / selected parent */
.qa-toggle.active{
  background: rgba(0, 86, 184, .10);
  transform: translateY(-1px);
}
.qa-toggle.active .qa-circle{
  border-color: var(--bp-blue);
  box-shadow: 0 0 0 3px rgba(0, 86, 184, .15), 0 8px 18px rgba(2,6,23,.08);
  background: rgba(0, 86, 184, .06);
}
.qa-toggle.active::after{
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--bp-blue);
  border-radius: 50%;
  animation: dotPulse .4s ease-out;
}
 
@keyframes dotPulse{
  0%  { transform: translateX(-50%) scale(0); opacity:0; }
  60% { transform: translateX(-50%) scale(1.4); opacity:.6; }
  100%{ transform: translateX(-50%) scale(1); opacity:1; }
}
 
/* ─── Expand Zone (container for sub-rows) ─── */
.qa-expand-zone{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1),
              opacity .35s ease,
              margin .35s ease;
  margin-top: 0;
}
.qa-expand-zone.open{
  max-height: 320px;
  opacity: 1;
  margin-top: .6rem;
}
 
/* ─── Sub Row (one per parent) ─── */
.qa-sub-row{
  display: none;
  padding: .65rem .5rem;
  background: linear-gradient(135deg, rgba(0,86,184,.03), rgba(34,197,94,.02));
  border: 1px solid rgba(0, 86, 184, .12);
  border-radius: 14px;
  position: relative;
}
.qa-sub-row.visible{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}
 
/* ─── Connector Line (vertical from parent dot) ─── */
.qa-sub-row::before{
  content: '';
  position: absolute;
  top: -8px;
  left: var(--connector-x, 50%);
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--bp-blue);
  border-radius: 2px;
  animation: lineGrow .25s ease-out;
}
 
@keyframes lineGrow{
  0%  { height: 0; opacity: 0; }
  100%{ height: 8px; opacity: 1; }
}
 
/* ─── Branch Lines (from center to each sub-item) ─── */
.qa-sub-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #fff;
  border: 1px solid rgba(0, 86, 184, .10);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--bp-dark);
  font-size: .82rem;
  font-weight: 700;
  transition: all .18s ease;
  box-shadow: 0 4px 12px rgba(2, 6, 23, .04);
  /* Staggered entry animation */
  opacity: 0;
  transform: translateY(12px) scale(.92);
  animation: subPop .4s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
 
.qa-sub-item:nth-child(1){ animation-delay: .08s; }
.qa-sub-item:nth-child(2){ animation-delay: .16s; }
.qa-sub-item:nth-child(3){ animation-delay: .24s; }
.qa-sub-item:nth-child(4){ animation-delay: .32s; }
.qa-sub-item:nth-child(5){ animation-delay: .40s; }
 
@keyframes subPop{
  0%  { opacity:0; transform: translateY(12px) scale(.92); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
 
.qa-sub-item:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 86, 184, .14);
  border-color: rgba(0, 86, 184, .25);
  background: rgba(0, 86, 184, .03);
}
.qa-sub-item:active{
  transform: scale(.97);
}
 
/* Sub-item icon */
.qa-sub-ic{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 86, 184, .08);
  color: var(--bp-blue);
  font-size: 13px;
  flex-shrink: 0;
}
 
/* Sub-item label */
.qa-sub-text{
  line-height: 1.15;
  white-space: nowrap;
}
 
/* ─── Animated branch/tree lines between items ─── */
.qa-branch-svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.qa-branch-svg path{
  fill: none;
  stroke: rgba(0, 86, 184, .18);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine .6s ease forwards;
}
.qa-branch-svg path:nth-child(2){ animation-delay: .1s; }
.qa-branch-svg path:nth-child(3){ animation-delay: .2s; }
.qa-branch-svg path:nth-child(4){ animation-delay: .3s; }
.qa-branch-svg path:nth-child(5){ animation-delay: .4s; }
 
@keyframes drawLine{
  to{ stroke-dashoffset: 0; }
}
 
/* ─── Close button in sub-row ─── */
.qa-close-btn{
  position: absolute;
  top: .35rem;
  right: .45rem;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--bp-muted);
  transition: all .15s ease;
  z-index: 2;
}
.qa-close-btn:hover{
  background: #fee2e2;
  color: #ef4444;
  border-color: rgba(239,68,68,.2);
}
 
/* ─── Responsive ─── */
@media (max-width: 576px){
  .qa-sub-row.visible{
    gap: .45rem;
  }
  .qa-sub-item{
    padding: .4rem .6rem;
    font-size: .78rem;
  }
  .qa-sub-ic{
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}


/* Quick Actions — long label text wrap fix */
.quick-actions a {
  flex: 0 0 72px !important;
  width: 72px !important;
  max-width: 72px !important;
  text-align: center;
}
.qa-label {
  display: block !important;
  width: 68px !important;
  max-width: 68px !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.25 !important;
  font-size: 10.5px !important;
  padding: 0 2px !important;
  margin-top: 4px !important;
}

</style>


{% endblock %}
{% block content %}
<div class="dash-wrap p-2 p-md-3">
 
  <!-- TOP BAR -->
  <div id="dashTopbar" class="dash-topbar p-3 mb-3">
    <div class="d-flex flex-wrap align-items-center justify-content-between" style="gap:.75rem;">
      <div>
        <div class="bp-title" style="font-size:1.2rem;">Welcome back, {{ request.user.get_full_name|default:request.user.username|title }}!
        </div>
      </div>
 
      <div class="d-flex flex-wrap align-items-center" style="gap:.6rem;">
        <!-- Subscription -->
        <span id="subChip" class="sub-chip">
          <span id="subDot" class="sub-dot"></span>
          <span id="subText">Subscription</span>
        </span>
 
        <!-- Range -->
        <div class="range-controls d-flex align-items-center" style="gap:.4rem;">
          <div class="input-group input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">Range</span>
            </div>
            <select id="datePreset" class="custom-select">
              <option value="this_month" selected>This Month</option>
              <option value="today">Today</option>
              <option value="7d">Last 7 days</option>
              <option value="30d">Last 30 days</option>
              <option value="custom">Custom…</option>
            </select>
          </div>
 
          <div id="customRange" class="d-none">
            <div class="input-group input-group-sm">
              <div class="input-group-prepend"><span class="input-group-text">From</span></div>
              <input type="date" id="from" class="form-control">
              <div class="input-group-prepend"><span class="input-group-text">To</span></div>
              <input type="date" id="to" class="form-control">
            </div>
          </div>
 
          <button id="applyFilters" class="btn btn-bp btn-sm" type="button">
            <i class="fas fa-sync-alt mr-1"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
 

<div class="qa-row">
  <div class="card qa-card">
    <div class="card-body">
      <div class="quick-actions">
 
        {% if invoice_no_based_on_datetime|default:"True" == "True" %}
        {# Offline POS hardcoded tiles #}
        <a href="{% url 'sales:sales_add' %}">
          <div class="qa-circle"><i class="fas fa-file-invoice text-primary fa-lg"></i></div>
          <span class="qa-label">Sales Invoice</span>
        </a>
        <a href="{% url 'sales:sales_list' %}">
          <div class="qa-circle"><i class="fas fa-chart-bar text-info fa-lg"></i></div>
          <span class="qa-label">Sales Report</span>
        </a>
        <a href="{% url 'reports:customer_report' %}">
          <div class="qa-circle"><i class="fas fa-users text-primary fa-lg"></i></div>
          <span class="qa-label">Customers</span>
        </a>
        <a href="{% url 'reports:inventory_report' %}">
          <div class="qa-circle"><i class="fas fa-boxes text-success fa-lg"></i></div>
          <span class="qa-label">Inventory</span>
        </a>
        <a href="{% url 'offline_pos:sync_dashboard' %}">
          <div class="qa-circle"><i class="fas fa-sync-alt fa-lg"></i></div>
          <span class="qa-label">Sync</span>
        </a>
      {% else %}
        {# Feature Manager driven tiles #}
        {% for tile in dashboard_tiles %}
          <a href="{{ tile.url }}">
            <div class="qa-circle">
              <i class="{{ tile.icon }} {{ tile.color }} fa-lg"></i>
            </div>
            <span class="qa-label">{{ tile.label }}</span>
          </a>
        {% empty %}
        {% endfor %}

        {% video_help_button 'home' 'Video Help' 'btn btn-danger' %}
      {% endif %}
 
      </div>{# end quick-actions #}
    </div>
  </div>
 
  {# WhatsApp Status Card — unchanged #}
  <div class="wa-status-card disconnected" id="waStatusCard" onclick="handleWaCardClick()">
    <div class="wa-icon">
      <i class="fab fa-whatsapp"></i>
      <span class="wa-dot" id="waStatusDot"></span>
    </div>
    <span class="wa-label" id="waStatusLabel">Checking...</span>
  </div>
</div>
{# end qa-row #}


  {% if invoice_no_based_on_datetime|default:"False" == "True" %}

  {% else %}

    </div>
      <!-- PENDING STRIP (Top Priority) -->
      <div id="pendingWrap" class="row mb-3 d-none">
        <div class="col-lg-6 mb-2">
          <div class="pending">
            <div class="pending-head">
              <div class="pending-title"><i class="fas fa-truck-loading mr-2 text-primary"></i>Pending Stock Transfers</div>
              <span id="stockPendingCount" class="badge-soft pending">0</span>
            </div>
            <div id="stockPendingBody" class="pending-body">
              <div class="skeleton" style="height:56px;"></div>
            </div>
          </div>
        </div>

        <div class="col-lg-6 mb-2">
          <div class="pending">
            <div class="pending-head">
              <div class="pending-title"><i class="fas fa-exchange-alt mr-2 text-primary"></i>Pending Payment Transfers</div>
              <span id="payPendingCount" class="badge-soft pending">0</span>
            </div>
            <div id="payPendingBody" class="pending-body">
              <div class="skeleton" style="height:56px;"></div>
            </div>
          </div>
        </div>
      </div>

    {% if pos_type|default:"retail" == "ticketing" %}
       {% include "pos/dash_ticketing.html" %}
    {% elif pos_type|default:"retail" == "petrol_pump" %}
       {% include "pos/dash_petrol.html" %}
    {% elif pos_type|default:"retail" == "saloon" %}
       {% include "pos/dash_saloon.html" %}
    {% elif pos_type|default:"retail" == "restaurant" %}
       {% include "pos/dash_restaurant.html" %}
    {% elif pos_type == "automotive" %}
      {% include "pos/dash_automotive.html" %}
    {% elif 'show_sales_on_dashboard' in allowed_features %}
      <!-- CHARTS -->
      <div class="row mb-3">
        <div class="col-lg-8 mb-2">
          <div class="panel">
            <div class="panel-head">
              <div>
                <div class="panel-title">Sales • Returns • Profit</div>
                <div class="panel-sub">Selected date range</div>
              </div>
              <span id="rangeLabel" class="badge-soft">—</span>
            </div>
            <div class="p-3">
              <div class="chart-box">
                <canvas id="rangeChart"></canvas>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg-4 mb-2">
          <div class="panel">
            <div class="panel-head">
              <div>
                <div class="panel-title">Top 7 Best Selling (Pie)</div>
                <div class="panel-sub">Quantity share</div>
              </div>
              <a class="btn btn-outline-primary btn-sm btn-view" href="{% url 'reports:best_selling_report' %}">View All</a>
            </div>

            <div class="p-3">
              <div class="chart-box">
                <canvas id="bestPieChart"></canvas>
              </div>
              <div id="bestPieEmpty" class="text-center text-muted mt-2 d-none" style="font-weight:800;">
                No best-selling data
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- BEST SELLING + KPI CARDS -->
      <div class="row mb-3">
        <div class="col-lg-4 mb-2">
          <div class="panel">
            <div class="panel-head">
              <div>
                <div class="panel-title">Best Selling Items</div>
                <div class="panel-sub">Top 7 (Qty)</div>
              </div>
              <a class="btn btn-outline-primary btn-sm btn-view" href="{% url 'reports:dead_stock_report' %}">Dead Stock</a>
            </div>
            <div class="p-0">
              <table class="table mb-0 table-sm">
                <thead>
                  <tr><th>#</th><th>Item</th><th class="text-right">Qty</th></tr>
                </thead>
                <tbody id="bestSellingBody">
                  <tr><td colspan="3"><div class="skeleton" style="height:44px;"></div></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="col-lg-8 mb-2">
          <div class="row">
            <div class="col-md-4 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">Net Sales</div>
                    <div id="kpiNetSales" class="kpi-v">—</div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-chart-line"></i></div>
                </div>
              </div>
            </div>

            <div class="col-md-4 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">GP</div>
                    <div id="kpiGP" class="kpi-v">—</div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-percentage"></i></div>
                </div>
              </div>
            </div>

            <div class="col-md-4 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">Bank Balances</div>
                    <div id="kpiBank" class="kpi-v">—</div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-university"></i></div>
                </div>
              </div>
            </div>

            <div class="col-md-6 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">Customer (AR/AP)</div>
                    <div id="kpiCustNet" class="kpi-v">—</div>
                    <div class="kpi-mini">
                      <span class="mini-pill">AR <span id="kpiCustAR">—</span></span>
                      <span class="mini-pill">AP <span id="kpiCustAP">—</span></span>
                    </div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-users"></i></div>
                </div>
              </div>
            </div>

            <div class="col-md-6 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">Vendor (AP/AR)</div>
                    <div id="kpiVendNet" class="kpi-v">—</div>
                    <div class="kpi-mini">
                      <span class="mini-pill">AP <span id="kpiVendAP">—</span></span>
                      <span class="mini-pill">AR <span id="kpiVendAR">—</span></span>
                    </div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-truck"></i></div>
                </div>
              </div>
            </div>

            <div class="col-md-12 mb-2">
              <div class="kpi">
                <div class="kpi-top">
                  <div>
                    <div class="kpi-l">Expenses</div>
                    <div id="kpiExp" class="kpi-v">—</div>
                  </div>
                  <div class="kpi-ic"><i class="fas fa-receipt"></i></div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- TABLES -->
      <div class="row">
        <div class="col-lg-6 mb-2">
          <div class="panel">
            <div class="panel-head">
              <div>
                <div class="panel-title">Top 10 Customers</div>
                <div class="panel-sub">Current balances</div>
              </div>
              <a class="btn btn-outline-primary btn-sm btn-view" href="{% url 'reports:customer_report' %}">View</a>
            </div>
            <div class="p-0">
              <table class="table table-sm mb-0">
                <thead><tr><th>#</th><th>Customer</th><th class="text-right">Balance</th></tr></thead>
                <tbody id="topCustomersBody">
                  <tr><td colspan="3"><div class="skeleton" style="height:44px;"></div></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="col-lg-6 mb-2">
          <div class="panel">
            <div class="panel-head">
              <div>
                <div class="panel-title">Top 10 Vendors</div>
                <div class="panel-sub">Current balances</div>
              </div>
              <a class="btn btn-outline-primary btn-sm btn-view" href="{% url 'reports:vendor_report' %}">View</a>
            </div>
            <div class="p-0">
              <table class="table table-sm mb-0">
                <thead><tr><th>#</th><th>Vendor</th><th class="text-right">Balance</th></tr></thead>
                <tbody id="topVendorsBody">
                  <tr><td colspan="3"><div class="skeleton" style="height:44px;"></div></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

  {% endif %}



{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/chart.js/Chart.min.js' %}"></script>
<script>
  const urls = {
    summary: "{% url 'pos:dash_summary' %}",
    pending: "{% url 'pos:dash_pending' %}",
    chartRange: "{% url 'pos:dash_chart_range' %}",
    chartMonthly: "{% url 'pos:dash_chart_monthly' %}",
    bestSelling: "{% url 'pos:dash_best_selling' %}",
    topCustomers: "{% url 'pos:dash_top_customers' %}",
    topVendors: "{% url 'pos:dash_top_vendors' %}",
  };

  // URL templates for approve/view
  const transferDetailTmpl = "{% url 'stock_transfer:transfer_detail' 0 %}";      // /transfer/0/
  const paymentApproveTmpl = "{% url 'stock_transfer:payment_approve' 0 %}";      // /payment/0/approve/

  function fmt(n){
    n = Number(n || 0);
    const rounded = Math.round(n);
    return rounded.toLocaleString();
  }

  function firstDayOfMonth(d){
    return new Date(d.getFullYear(), d.getMonth(), 1);
  }

  function ymdLocal(d){
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
  }

  function firstDayOfMonth(d){
    return new Date(d.getFullYear(), d.getMonth(), 1);
  }

  function addDays(d, delta){
    const x = new Date(d);
    x.setDate(x.getDate() + delta);
    return x;
  }

  function getRange(){
    const p = document.getElementById("datePreset").value;
    const today = new Date();

    // IMPORTANT: custom inputs ko string hi rehne do (UTC parsing avoid)
    if (p === "custom"){
      const fromStr = document.getElementById("from").value;
      const toStr   = document.getElementById("to").value;
      return { from: fromStr, to: toStr };
    }

    let fromD, toD;

    if (p === "today"){
      fromD = toD = today;
    } else if (p === "7d"){
      toD = today;
      fromD = addDays(today, -6);
    } else if (p === "30d"){
      toD = today;
      fromD = addDays(today, -29);
    } else { // this_month
      toD = today;
      fromD = firstDayOfMonth(today);
    }

    return { from: ymdLocal(fromD), to: ymdLocal(toD) };
  }

  // init default dates (this month -> today)
  (function initDates(){
    const t = new Date();
    const f = firstDayOfMonth(t);
    document.getElementById("from").value = ymdLocal(f);
    document.getElementById("to").value   = ymdLocal(t);
  })();


  function rangeParams(){
    const r = getRange();
    return `?from=${r.from}&to=${r.to}`;
  }

  function daysDiff(fromIso, toIso){
    const a = new Date(fromIso);
    const b = new Date(toIso);
    const ms = b - a;
    return Math.floor(ms / (1000*60*60*24)) + 1;
  }

  function syncInputsWithPreset(){
    const p = document.getElementById("datePreset").value;
    document.getElementById("customRange").classList.toggle("d-none", p !== "custom");

    // UI me from/to update kar do (user ko bhi clear rahe)
    const r = getRange();
    if (r.from) document.getElementById("from").value = r.from;
    if (r.to)   document.getElementById("to").value   = r.to;
  }

  document.getElementById("datePreset").addEventListener("change", ()=>{
    syncInputsWithPreset();
    if (typeof tkRunAll === 'function') tkRunAll();
    runAll();
  });

  document.getElementById("from").addEventListener("change", ()=>{
    if (document.getElementById("datePreset").value === "custom"){
    if (document.getElementById("rangeChart")) {
      runAll();
    }
  }

  });
  document.getElementById("to").addEventListener("change", ()=>{
    if (document.getElementById("datePreset").value === "custom") 
    {
    if (document.getElementById("rangeChart")) {
      runAll();
    }
    }
  });

  // on first load, keep UI consistent
  syncInputsWithPreset();


  let rangeChart, bestPieChart;

  async function loadSummary(){
    const r = await fetch(urls.summary + rangeParams());
    const j = await r.json();

    // subscription chip
    const sub = j.subscription || {};
    const dot = document.getElementById("subDot");
    const text = document.getElementById("subText");

    let daysLeft = sub.days_left;
    if (daysLeft === null || daysLeft === undefined){
      text.textContent = "Subscription";
      dot.className = "sub-dot";
    } else {
      if (daysLeft < 0){
        text.textContent = `Expired`;
        dot.className = "sub-dot danger";
      } else if (daysLeft <= 15){
        text.textContent = `Subscription: ${daysLeft} days left`;
        dot.className = "sub-dot danger";
      } else {
        text.textContent = `Subscription: ${daysLeft} days left`;
        dot.className = "sub-dot";
      }
    }

    // sync topbar background with dot color
    const topbar = document.getElementById("dashTopbar");
    topbar.classList.remove("sub-ok","sub-warn","sub-danger");

    if (dot.classList.contains("danger")) topbar.classList.add("sub-danger");
    else if (dot.classList.contains("warn")) topbar.classList.add("sub-danger");
    else topbar.classList.add("sub-ok");



    // KPI cards
    const k = j.kpis || {};
    document.getElementById("kpiNetSales").textContent = fmt(k.net_sales);
    document.getElementById("kpiGP").textContent = fmt(k.gp);
    document.getElementById("kpiBank").textContent = fmt(k.bank_sum);
    document.getElementById("kpiExp").textContent = fmt(k.expenses);

    document.getElementById("kpiCustAR").textContent = fmt(k.cust_ar);
    document.getElementById("kpiCustAP").textContent = fmt(k.cust_ap);
    document.getElementById("kpiCustNet").textContent = fmt((k.cust_ar||0) - (k.cust_ap||0));

    document.getElementById("kpiVendAP").textContent = fmt(k.vend_ap);
    document.getElementById("kpiVendAR").textContent = fmt(k.vend_ar);
    document.getElementById("kpiVendNet").textContent = fmt((k.vend_ap||0) - (k.vend_ar||0));

    // range label
    const rr = j.range || {};
    document.getElementById("rangeLabel").textContent = `${rr.from || ''} → ${rr.to || ''}`;
  }

  async function loadPending(){
    const r = await fetch(urls.pending);
    const j = await r.json();

    const stock = j.stock || [];
    const pays  = j.payments || [];

    const wrap = document.getElementById("pendingWrap");
    const any = (stock.length + pays.length) > 0;
    wrap.classList.toggle("d-none", !any);

    document.getElementById("stockPendingCount").textContent = stock.length;
    document.getElementById("payPendingCount").textContent = pays.length;

    const sb = document.getElementById("stockPendingBody");
    const pb = document.getElementById("payPendingBody");

    sb.innerHTML = stock.length ? "" : `<div class="text-muted" style="font-weight:800;">No pending stock transfers</div>`;
    pb.innerHTML = pays.length ? "" : `<div class="text-muted" style="font-weight:800;">No pending payment transfers</div>`;

    stock.forEach(x=>{
      const badgeClass = x.status === "partially_approved" ? "badge-soft partial" : "badge-soft pending";
      const detailUrl = transferDetailTmpl.replace("/0/", `/${x.id}/`);
      sb.insertAdjacentHTML("beforeend", `
        <div class="pending-row">
          <div class="p-left">
            <div class="p-main">${x.from_branch}</div>
            <div class="p-sub">Lines: ${x.lines} • Qty: ${fmt(x.qty)} • ${x.created_at.slice(0,19).replace('T',' ')}</div>
          </div>
          <div class="p-actions">
            <span class="${badgeClass}">${x.status.replace('_',' ')}</span>
            <a class="btn-mini primary" href="${detailUrl}">Approve</a>
            <a class="btn-mini" href="${detailUrl}">View</a>
          </div>
        </div>
      `);
    });

    pays.forEach(x=>{
      const approveUrl = paymentApproveTmpl.replace("/0/", `/${x.id}/`);
      pb.insertAdjacentHTML("beforeend", `
        <div class="pending-row">
          <div class="p-left">
            <div class="p-main">${x.from_branch}</div>
            <div class="p-sub">Amount: ${fmt(x.amount)} • ${x.created_at.slice(0,19).replace('T',' ')}</div>
          </div>
          <div class="p-actions">
            <span class="badge-soft pending">pending</span>
            <a class="btn-mini primary" href="${approveUrl}">Approve</a>
            <a class="btn-mini" href="#" onclick="return false;">View</a>
          </div>
        </div>
      `);
    });
  }

  async function loadCharts(){
    const rp = rangeParams();

    const r = await fetch(urls.chartRange + rp);
    if (!r.ok){
      console.error("chartRange failed", r.status);
      return;
    }
    const j = await r.json();

    // Range chart
    const ctx = document.getElementById("rangeChart").getContext("2d");
    if (rangeChart) rangeChart.destroy();

    rangeChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: j.labels,
        datasets: [
          {
            label:'Sales',
            data:j.sales,
            fill:true,
            borderColor:'#0056B8',
            backgroundColor:'rgba(0,86,184,0.14)',
            tension:.35,
            pointRadius:0,
            borderWidth:2
          },
          {
            label:'Returns',
            data:j.returns,
            fill:true,
            borderColor:'#f59e0b',
            backgroundColor:'rgba(245,158,11,0.16)',
            tension:.35,
            pointRadius:0,
            borderWidth:2
          },
          {
            label:'Profit',
            data:j.profit,
            fill:false,
            borderColor:'#22c55e',
            backgroundColor:'rgba(34,197,94,0.10)',
            tension:.35,
            pointRadius:0,
            borderWidth:2
          }
        ]
      },
      options: {
        responsive:true,
        maintainAspectRatio:false,
        animation:{ duration: 0 },   // page heavy na ho
        interaction:{ mode:'index', intersect:false },
        plugins:{
          legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:10 } }
        },
        scales:{ y:{ beginAtZero:true } }
      }
    });


  }

  async function loadBestSelling(){
    const r = await fetch(urls.bestSelling + rangeParams());
    const j = await r.json();
    const tb = document.getElementById("bestSellingBody");
    tb.innerHTML = "";
    (j.items || []).forEach((x,i)=>{
      tb.insertAdjacentHTML("beforeend",
        `<tr><td>${i+1}</td><td>${x.name}</td><td class="text-right">${fmt(x.qty)}</td></tr>`
      );
    });
    if (!(j.items||[]).length){
      tb.innerHTML = `<tr><td colspan="3" class="text-muted" style="font-weight:800;">No data</td></tr>`;
    }
    renderBestPie(j.items || []);

  }

  function renderBestPie(items){
    const empty = document.getElementById("bestPieEmpty");
    const canvas = document.getElementById("bestPieChart");
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (bestPieChart) bestPieChart.destroy();

    if (!items || !items.length){
      empty.classList.remove("d-none");
      bestPieChart = new Chart(ctx, {
        type:'doughnut',
        data:{ labels:[], datasets:[{ data:[] }] },
        options:{ responsive:true, maintainAspectRatio:false, animation:{duration:0} }
      });
      return;
    }

    empty.classList.add("d-none");

    const labels = items.map(x => x.name);
    const data = items.map(x => Number(x.qty || 0));

    const colors = ['#0056B8','#22c55e','#f59e0b','#8b5cf6','#06b6d4','#ef4444','#f97316'];

    bestPieChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels,
        datasets: [{
          data,
          backgroundColor: colors.slice(0, labels.length),
          borderColor: '#ffffff',
          borderWidth: 2
        }]
      },
      options: {
        responsive:true,
        maintainAspectRatio:false,
        animation:{ duration:0 },
        plugins:{
          legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:10 } },
          tooltip:{
            callbacks:{
              label: function(context){
                const v = context.parsed || 0;
                return ` ${context.label}: ${v.toLocaleString()}`;
              }
            }
          }
        },
        cutout: '62%'
      }
    });
  }


  async function loadTopCustomers(){
    const r = await fetch(urls.topCustomers);
    const j = await r.json();
    const tb = document.getElementById("topCustomersBody");
    tb.innerHTML = "";
    (j.items || []).forEach((x,i)=>{
      tb.insertAdjacentHTML("beforeend",
        `<tr><td>${i+1}</td><td>${x.name}</td><td class="text-right">${fmt(x.balance)}</td></tr>`
      );
    });
    if (!(j.items||[]).length){
      tb.innerHTML = `<tr><td colspan="3" class="text-muted" style="font-weight:800;">No customers</td></tr>`;
    }
  }

  async function loadTopVendors(){
    const r = await fetch(urls.topVendors);
    const j = await r.json();
    const tb = document.getElementById("topVendorsBody");
    tb.innerHTML = "";
    (j.items || []).forEach((x,i)=>{
      tb.insertAdjacentHTML("beforeend",
        `<tr><td>${i+1}</td><td>${x.name}</td><td class="text-right">${fmt(x.balance)}</td></tr>`
      );
    });
    if (!(j.items||[]).length){
      tb.innerHTML = `<tr><td colspan="3" class="text-muted" style="font-weight:800;">No vendors</td></tr>`;
    }
  }



// ════════════════ WhatsApp Status Card ════════════════
  const WA_SERVER = 'http://localhost:3000';
  let waConnected = false;
  let waChecking = false;

  function updateWaCard(status) {
    const card = document.getElementById('waStatusCard');
    const label = document.getElementById('waStatusLabel');
    const dot = document.getElementById('waStatusDot');
    if (!card || !label) return;

    card.classList.remove('connected', 'disconnected');
    
    if (status === 'connected') {
      waConnected = true;
      card.classList.add('connected');
      label.textContent = 'Connected';
    } else if (status === 'checking') {
      label.innerHTML = '<span class="wa-spinner"></span>';
    } else {
      waConnected = false;
      card.classList.add('disconnected');
      label.textContent = status === 'offline' ? 'Server Off' : 'Disconnected';
    }
  }

  async function checkWaStatus() {
    if (waChecking) return;
    waChecking = true;
    updateWaCard('checking');

    try {
      const resp = await fetch(WA_SERVER + '/api/status', { mode: 'cors' });
      const data = await resp.json();
      
      if (data.connected) {
        updateWaCard('connected');
      } else {
        updateWaCard('disconnected');
      }
    } catch (err) {
      updateWaCard('offline');
    } finally {
      waChecking = false;
    }
  }

  async function handleWaCardClick() {
    if (waConnected) {
      // Already connected, go to settings
      window.location.href = "{% url 'pos:whatsapp_settings' %}";
      return;
    }

    // Try to reconnect
    updateWaCard('checking');
    
    try {
      const resp = await fetch(WA_SERVER + '/api/connect', { mode: 'cors' });
      const data = await resp.json();
      
      if (data.status === 'connected') {
        updateWaCard('connected');
        return;
      }
      
      // Need QR scan, redirect to settings
      window.location.href = "{% url 'pos:whatsapp_settings' %}";
    } catch (err) {
      // Server offline or error, go to settings anyway
      window.location.href = "{% url 'pos:whatsapp_settings' %}";
    }
  }

  // Check WhatsApp status on load and every 30 seconds
  checkWaStatus();
  setInterval(checkWaStatus, 30000);


  async function runAll(){
      // Ticketing mode
      const isTicketing = (typeof tkRunAll === 'function');
      if (isTicketing) {
        tkRunAll();
        await loadSummary().catch(e => {});
        await loadPending().catch(e => {});
        return;
      }

      // Saloon mode
      if (typeof window.slnRunAll === 'function') {
        await loadPending().catch(e => {});
        await window.slnRunAll();
        return;
      }

      // Default retail mode
      const tasks = [
        loadSummary,
        loadPending,
        loadCharts,
        loadBestSelling,
        loadTopCustomers,
        loadTopVendors,
      ].map(fn => fn().catch(err => console.error("[dashboard]", fn.name, err)));

      await Promise.all(tasks);
    }


  document.getElementById("applyFilters").addEventListener("click", function(){
           if (typeof tkRunAll === 'function') tkRunAll();
       });

  // First load
  runAll();
  
  (function(){
    'use strict';
    var activeQA = null;
   
    window.toggleQA = function(el){
      var key  = el.getAttribute('data-qa');
      var zone = document.getElementById('qaExpandZone');
      if(!zone) return;
      var rows = zone.querySelectorAll('.qa-sub-row');
      var all  = document.querySelectorAll('.qa-toggle');
   
      // same item → close
      if(activeQA === key){ closeQA(); return; }
   
      // de-activate all
      all.forEach(function(t){ t.classList.remove('active'); });
      // activate this
      el.classList.add('active');
   
      // hide all sub-rows
      rows.forEach(function(r){
        r.classList.remove('visible');
        r.style.display = 'none';
      });
   
      // show matching
      var target = document.getElementById('qaSub_' + key);
      if(target){
        // position connector under clicked toggle
        var cardBody = el.closest('.card-body');
        if(cardBody){
          var parentRect = el.getBoundingClientRect();
          var cardRect   = cardBody.getBoundingClientRect();
          var cx = parentRect.left + parentRect.width/2 - cardRect.left;
          target.style.setProperty('--connector-x', cx + 'px');
        }
        target.style.display = 'flex';
        void target.offsetWidth;          // reflow
        target.classList.add('visible');
   
        // replay sub-item animations
        target.querySelectorAll('.qa-sub-item').forEach(function(item){
          item.style.animation = 'none';
          void item.offsetWidth;
          item.style.animation = '';
        });
      }
   
      zone.classList.add('open');
      activeQA = key;
    };
   
    window.closeQA = function(){
      var zone = document.getElementById('qaExpandZone');
      if(!zone) return;
      var rows = zone.querySelectorAll('.qa-sub-row');
      document.querySelectorAll('.qa-toggle').forEach(function(t){ t.classList.remove('active'); });
      rows.forEach(function(r){ r.classList.remove('visible'); });
      zone.classList.remove('open');
      setTimeout(function(){
        rows.forEach(function(r){ r.style.display = 'none'; });
      }, 400);
      activeQA = null;
    };
  })();



</script>
{% endblock %}