Subversion Repositories SmartDukaan

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>RBM DRR Dashboard</title>

  <style>

    :root {

      --bg: #f4f6fb;

      --card: #ffffff;

      --ink: #141a2b;

      --muted: #5d6a83;

      --soft: #97a1b5;

      --line: #e6e9f1;

      --line2: #eef1f6;

      --brand: #3b5bdb;

      --brand2: #5c7cfa;

      --teal: #0ca678;

      --cyan: #1098ad;

      --amber: #f59f00;

      --orange: #e8590c;

      --red: #e03131;

      --violet: #7048e8;

      --pink: #d6336c;

      --good: #2f9e44;

      --warn: #e8590c;

      --bad: #e03131;

      --hid: #7048e8;

      --fast: #3b5bdb;

      --run: #0ca678;

      --slow: #e8590c;

      --other: #868e96;

      --hid-bg: #f2edff;

      --fast-bg: #eaf0ff;

      --run-bg: #e5f7ee;

      --slow-bg: #ffefe0;

      --other-bg: #eef0f4;

    }

    * {

      box-sizing: border-box

    }

    html, body {

      margin: 0;

      background: var(--bg);

      color: var(--ink);

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      -webkit-font-smoothing: antialiased;

      font-size: 14px

    }

    .wrap {

      max-width: 1440px;

      margin: 0 auto;

      padding: 22px 26px 100px

    }

    a {

      color: var(--brand);

      text-decoration: none

    }

    a:hover {

      text-decoration: underline

    }

    /* header */

    header.top {

      display: flex;

      align-items: flex-end;

      justify-content: space-between;

      gap: 18px;

      flex-wrap: wrap;

      margin-bottom: 20px

    }

    .brand .crumb {

      font-size: 12px;

      color: var(--soft);

      font-weight: 600

    }

    .brand h1 {

      margin: 4px 0 0;

      font-size: 26px;

      font-weight: 770;

      letter-spacing: -.015em;

      display: flex;

      align-items: center;

      gap: 12px

    }

    .brand h1 .live {

      font-size: 11px;

      font-weight: 700;

      color: var(--teal);

      background: #e6fcf5;

      border: 1px solid #c3fae8;

      border-radius: 999px;

      padding: 3px 10px

    }

    .brand h1 .live i {

      display: inline-block;

      width: 7px;

      height: 7px;

      border-radius: 50%;

      background: var(--teal);

      margin-right: 5px;

      animation: pulse 1.6s infinite;

      vertical-align: middle

    }

    @keyframes pulse {

      0%, 100% {

        opacity: 1

      }

      50% {

        opacity: .25

      }

    }

    .hd-right {

      display: flex;

      align-items: center;

      gap: 10px;

      flex-wrap: wrap

    }

    .ctl {

      background: var(--card);

      border: 1px solid var(--line);

      border-radius: 10px;

      padding: 9px 13px;

      font-size: 13px;

      color: var(--ink);

      font-weight: 600;

      box-shadow: 0 1px 2px rgba(20, 30, 60, .04)

    }

    input.ctl {

      appearance: none;

      cursor: pointer;

      height: 38px;

      min-width: 240px

    }

    .btn-r {

      background: var(--brand);

      border: 0;

      color: #fff;

      font-weight: 670;

      padding: 9px 18px;

      border-radius: 10px;

      cursor: pointer;

      font-size: 13px;

      height: 38px;

      box-shadow: 0 1px 2px rgba(59, 91, 219, .35);

      transition: transform .1s, box-shadow .1s

    }

    .btn-r:hover {

      background: var(--brand2);

      box-shadow: 0 3px 10px rgba(59, 91, 219, .35)

    }

    .btn-r:active {

      transform: translateY(1px)

    }

    /* KPI cards */

    .kpis {

      display: grid;

      grid-template-columns:repeat(4, 1fr);

      gap: 14px;

      margin-bottom: 22px

    }

    .kpi {

      position: relative;

      background: var(--card);

      border: 1px solid var(--line);

      border-radius: 14px;

      padding: 16px 18px;

      box-shadow: 0 1px 2px rgba(20, 30, 60, .05);

      display: flex;

      flex-direction: column;

      min-height: 118px;

      overflow: hidden

    }

    .kpi::before {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      height: 3px;

      width: 100%;

      border-top-left-radius: 14px;

      border-top-right-radius: 14px

    }

    .kpi.a::before {

      background: linear-gradient(90deg, var(--brand), var(--brand2))

    }

    .kpi.b::before {

      background: linear-gradient(90deg, var(--teal), #20c997)

    }

    .kpi.c::before {

      background: linear-gradient(90deg, var(--amber), #ffc078)

    }

    .kpi.d::before {

      background: linear-gradient(90deg, var(--violet), #9775fa)

    }

    .kpi .top {

      display: flex;

      align-items: center;

      gap: 10px

    }

    .kpi .ic {

      width: 34px;

      height: 34px;

      border-radius: 10px;

      display: flex;

      align-items: center;

      justify-content: center;

      flex: none;

      color: #fff;

      box-shadow: 0 2px 6px rgba(0, 0, 0, .08)

    }

    .kpi.a .ic {

      background: linear-gradient(135deg, var(--brand), var(--brand2))

    }

    .kpi.b .ic {

      background: linear-gradient(135deg, var(--teal), #20c997)

    }

    .kpi.c .ic {

      background: linear-gradient(135deg, var(--amber), #ffc078);

      color: #3a2500

    }

    .kpi.d .ic {

      background: linear-gradient(135deg, var(--violet), #9775fa)

    }

    .kpi .ic svg {

      width: 18px;

      height: 18px

    }

    .kpi .label {

      font-size: 12px;

      color: var(--muted);

      font-weight: 650;

      line-height: 1.2;

      letter-spacing: .005em

    }

    .kpi .val {

      font-size: 28px;

      font-weight: 780;

      margin-top: auto;

      padding-top: 10px;

      letter-spacing: -.02em;

      line-height: 1;

      font-variant-numeric: tabular-nums

    }

    .kpi .val .u {

      font-size: 13px;

      color: var(--soft);

      font-weight: 600;

      margin-left: 3px

    }

    .kpi .foot {

      font-size: 11.5px;

      color: var(--soft);

      margin-top: 8px;

      font-weight: 500

    }

    .kpi .val .pct {

      margin-left: 0;

      font-size: 20px;

      padding: 4px 12px

    }

    .kpi.clickable {

      cursor: pointer;

      transition: transform .1s, box-shadow .12s, border-color .12s

    }

    .kpi.clickable:hover {

      transform: translateY(-2px);

      box-shadow: 0 6px 18px rgba(20, 30, 60, .08);

      border-color: #c8d2f4

    }

    .kpi.clickable .hint {

      position: absolute;

      bottom: 8px;

      right: 12px;

      color: var(--soft);

      font-size: 11px;

      font-weight: 600;

      opacity: .7

    }

    .kpi.clickable:hover .hint {

      opacity: 1;

      color: var(--brand)

    }

    /* Cards & section labels */

    .card {

      background: var(--card);

      border: 1px solid var(--line);

      border-radius: 15px;

      padding: 18px 20px;

      margin-bottom: 16px;

      box-shadow: 0 1px 2px rgba(20, 30, 60, .04)

    }

    .card .card-hd {

      display: flex;

      align-items: baseline;

      justify-content: space-between;

      gap: 14px;

      margin-bottom: 14px

    }

    .card h2 {

      margin: 0;

      font-size: 16px;

      font-weight: 730;

      letter-spacing: -.01em

    }

    .card .desc {

      color: var(--muted);

      font-size: 12.5px;

      margin: 2px 0 0

    }

    .card .badge-period {

      background: #eef2ff;

      border: 1px solid #d7defb;

      color: var(--brand);

      border-radius: 999px;

      padding: 3px 12px;

      font-size: 12px;

      font-weight: 650;

      letter-spacing: .01em

    }

    .sectionlabel {

      font-size: 11px;

      letter-spacing: .14em;

      text-transform: uppercase;

      color: var(--soft);

      font-weight: 700;

      margin: 20px 2px 10px

    }

    /* Legend under section label */

    .legend {

      display: flex;

      gap: 14px;

      flex-wrap: wrap;

      margin: 0 2px 10px;

      align-items: center;

      color: var(--soft);

      font-size: 11.5px;

      font-weight: 600

    }

    .legend .lg {

      display: inline-flex;

      align-items: center;

      gap: 5px

    }

    .legend .lg i {

      width: 8px;

      height: 8px;

      border-radius: 50%;

      display: inline-block

    }

    .legend .lg.hid i {

      background: var(--hid)

    }

    .legend .lg.fast i {

      background: var(--fast)

    }

    .legend .lg.run i {

      background: var(--run)

    }

    .legend .lg.slow i {

      background: var(--slow)

    }

    .legend .lg.other i {

      background: var(--other)

    }

    .legend .lg .lgt {

      color: var(--muted)

    }

    /* Table */

    table {

      width: 100%;

      border-collapse: separate;

      border-spacing: 0;

      font-size: 13px

    }

    th, td {

      text-align: left;

      padding: 11px 10px;

      border-bottom: 1px solid var(--line2)

    }

    thead th {

      font-size: 10.5px;

      text-transform: uppercase;

      letter-spacing: .06em;

      color: var(--soft);

      font-weight: 700;

      white-space: nowrap;

      user-select: none;

      position: sticky;

      top: 0;

      background: #fff;

      z-index: 1;

      border-bottom: 1px solid var(--line)

    }

    th.num, td.num {

      text-align: right

    }

    th.g-hid {

      color: var(--hid);

      border-top: 3px solid var(--hid)

    }

    th.g-fast {

      color: var(--fast);

      border-top: 3px solid var(--fast)

    }

    th.g-run {

      color: var(--run);

      border-top: 3px solid var(--run)

    }

    th.g-slow {

      color: var(--slow);

      border-top: 3px solid var(--slow)

    }

    th.g-other {

      color: var(--other);

      border-top: 3px solid var(--other)

    }

    th.g-total {

      color: var(--brand);

      border-top: 3px solid var(--brand)

    }

    tbody tr:hover {

      background: #f6f8fd

    }

    tbody tr.clickable {

      cursor: pointer;

      transition: background .1s

    }

    tbody tr.clickable:hover {

      background: #eef2ff

    }

    tr.totalrow {

      background: #fafbfe;

      border-top: 2px solid var(--line)

    }

    tr.totalrow td {

      font-weight: 770;

      color: var(--ink)

    }

    tr.totalrow .cell-val {

      font-size: 14px

    }

    .rbm-cell {

      display: flex;

      flex-direction: column;

      gap: 2px

    }

    .rbm-cell .rn {

      font-weight: 700;

      color: var(--ink);

      font-size: 13.5px

    }

    .rbm-cell .wh {

      font-size: 11.5px;

      color: var(--muted);

      font-weight: 600

    }

    .cell-val {

      font-variant-numeric: tabular-nums;

      font-weight: 650;

      color: var(--ink);

      white-space: nowrap

    }

    .cell-val small {

      color: var(--soft);

      font-weight: 500;

      margin-left: 3px

    }

    .pct {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-width: 56px;

      padding: 3px 9px;

      border-radius: 7px;

      font-size: 11.5px;

      font-weight: 700;

      text-align: center;

      font-variant-numeric: tabular-nums;

      line-height: 1.35

    }

    .pct.good {

      background: #e5f7ee;

      color: #177a3a

    }

    .pct.warn {

      background: #fff0e0;

      color: #a04600

    }

    .pct.bad {

      background: #ffeaea;

      color: #b8272b

    }

    .pct.na {

      background: transparent;

      color: var(--soft);

      font-weight: 600;

      min-width: auto;

      padding: 0

    }

    .bar {

      height: 5px;

      border-radius: 3px;

      background: #eef1f6;

      overflow: hidden;

      margin-top: 6px

    }

    .bar > i {

      display: block;

      height: 100%;

      border-radius: 3px;

      transition: width .3s ease

    }

    .bar > i.good {

      background: linear-gradient(90deg, #51cf66, #2f9e44)

    }

    .bar > i.warn {

      background: linear-gradient(90deg, #ffa94d, #e8590c)

    }

    .bar > i.bad {

      background: linear-gradient(90deg, #ff8787, #e03131)

    }

    .chev {

      color: #c5cce0;

      font-size: 16px;

      padding-left: 6px;

      transition: transform .12s, color .12s

    }

    tr.clickable:hover .chev {

      color: var(--brand);

      transform: translateX(2px)

    }

    .loading {

      padding: 70px;

      text-align: center;

      color: var(--muted)

    }

    .spinner {

      width: 32px;

      height: 32px;

      border: 3px solid #e3e8f5;

      border-top-color: var(--brand);

      border-radius: 50%;

      animation: spin 1s linear infinite;

      margin: 0 auto 12px

    }

    @keyframes spin {

      to {

        transform: rotate(360deg)

      }

    }

    .empty {

      padding: 56px 20px;

      text-align: center;

      color: var(--soft);

      font-size: 13.5px

    }

    .empty .ei {

      font-size: 36px;

      margin-bottom: 8px;

      opacity: .5

    }

    .foot-note {

      color: var(--soft);

      font-size: 11.5px;

      margin-top: 14px;

      padding: 10px 12px;

      background: #fafbfe;

      border: 1px dashed var(--line);

      border-radius: 10px;

      line-height: 1.5

    }

    .foot-note code {

      background: #eef1f6;

      color: var(--muted);

      padding: 1px 5px;

      border-radius: 4px;

      font-size: 11px

    }

    /* drill-down panel */

    .rdrr-back {

      position: fixed;

      inset: 0;

      background: rgba(15, 22, 40, .5);

      backdrop-filter: blur(2px);

      z-index: 1200;

      display: none

    }

    .rdrr-back.show {

      display: block

    }

    .rdrr-panel {

      position: absolute;

      top: 0;

      right: 0;

      height: 100%;

      width: min(760px, 96vw);

      background: #fff;

      box-shadow: -12px 0 40px rgba(20, 30, 60, .22);

      display: flex;

      flex-direction: column;

      padding: 24px 26px 20px;

      transform: translateX(100%);

      transition: transform .22s ease;

      overflow-y: auto

    }

    .rdrr-back.show .rdrr-panel {

      transform: translateX(0)

    }

    .rdrr-panel .x {

      position: absolute;

      top: 16px;

      right: 18px;

      cursor: pointer;

      color: var(--soft);

      font-size: 24px;

      line-height: 1;

      border: 0;

      background: none;

      width: 32px;

      height: 32px;

      border-radius: 8px;

      transition: background .1s, color .1s

    }

    .rdrr-panel .x:hover {

      background: #f1f3f9;

      color: var(--ink)

    }

    .rdrr-panel h3 {

      margin: 0 0 3px;

      font-size: 19px;

      font-weight: 750;

      letter-spacing: -.01em;

      padding-right: 40px

    }

    .rdrr-panel > .desc {

      margin: 0 0 18px;

      font-size: 12.5px;

      color: var(--muted);

      font-weight: 600

    }

    .rdrr-total {

      display: flex;

      gap: 14px;

      padding: 14px 16px;

      background: linear-gradient(135deg, #f8f9fc, #eef2ff);

      border: 1px solid #dbe2f6;

      border-radius: 12px;

      margin-bottom: 18px

    }

    .rdrr-total > div {

      flex: 1;

      text-align: center;

      border-right: 1px solid #dbe2f6;

      padding: 0 4px

    }

    .rdrr-total > div:last-child {

      border-right: 0

    }

    .rdrr-total .k {

      font-size: 10.5px;

      color: var(--muted);

      text-transform: uppercase;

      letter-spacing: .06em;

      font-weight: 700

    }

    .rdrr-total .v {

      font-size: 20px;

      font-weight: 770;

      color: var(--ink);

      font-variant-numeric: tabular-nums;

      margin-top: 5px;

      letter-spacing: -.01em

    }

    .rdrr-total .v .pct {

      font-size: 16px;

      padding: 3px 10px;

      margin-top: 0

    }

    .bbars {

      display: flex;

      flex-direction: column;

      gap: 10px;

      margin-bottom: 20px

    }

    .bbar {

      display: grid;

      grid-template-columns:82px 1fr 145px 60px;

      gap: 14px;

      align-items: center;

      padding: 12px 14px;

      background: #fff;

      border: 1px solid var(--line);

      border-radius: 11px;

      transition: box-shadow .12s

    }

    .bbar:hover {

      box-shadow: 0 3px 10px rgba(20, 30, 60, .06)

    }

    .bbar .bname {

      font-size: 11.5px;

      font-weight: 750;

      color: var(--ink);

      letter-spacing: .04em;

      text-transform: uppercase;

      display: flex;

      align-items: center;

      gap: 6px

    }

    .bbar .bname i {

      display: inline-block;

      width: 8px;

      height: 8px;

      border-radius: 50%

    }

    .bbar.hid .bname {

      color: var(--hid)

    }

    .bbar.fast .bname {

      color: var(--fast)

    }

    .bbar.run .bname {

      color: var(--run)

    }

    .bbar.slow .bname {

      color: var(--slow)

    }

    .bbar.other .bname {

      color: var(--other)

    }

    .bbar.hid .bname i {

      background: var(--hid)

    }

    .bbar.fast .bname i {

      background: var(--fast)

    }

    .bbar.run .bname i {

      background: var(--run)

    }

    .bbar.slow .bname i {

      background: var(--slow)

    }

    .bbar.other .bname i {

      background: var(--other)

    }

    .bbar .btrack {

      height: 14px;

      border-radius: 8px;

      overflow: hidden;

      position: relative

    }

    .bbar.hid .btrack {

      background: var(--hid-bg)

    }

    .bbar.fast .btrack {

      background: var(--fast-bg)

    }

    .bbar.run .btrack {

      background: var(--run-bg)

    }

    .bbar.slow .btrack {

      background: var(--slow-bg)

    }

    .bbar.other .btrack {

      background: var(--other-bg)

    }

    .bbar .btrack > i {

      display: block;

      height: 100%;

      border-radius: 8px;

      transition: width .3s ease;

      position: relative

    }

    .bbar.hid .btrack > i {

      background: linear-gradient(90deg, #9775fa, var(--hid))

    }

    .bbar.fast .btrack > i {

      background: linear-gradient(90deg, var(--brand2), var(--fast))

    }

    .bbar.run .btrack > i {

      background: linear-gradient(90deg, #20c997, var(--run))

    }

    .bbar.slow .btrack > i {

      background: linear-gradient(90deg, #ffa94d, var(--slow))

    }

    .bbar.other .btrack > i {

      background: linear-gradient(90deg, #adb5bd, var(--other))

    }

    .bbar .btgt {

      font-size: 12px;

      color: var(--muted);

      font-variant-numeric: tabular-nums;

      font-weight: 600;

      text-align: right

    }

    .bbar .btgt b {

      color: var(--ink);

      font-weight: 700

    }

    .bbar .bpct {

      font-size: 13px;

      font-weight: 750;

      text-align: right;

      font-variant-numeric: tabular-nums

    }

    .bbar .bpct.good {

      color: var(--good)

    }

    .bbar .bpct.warn {

      color: var(--warn)

    }

    .bbar .bpct.bad {

      color: var(--bad)

    }

    .bbar .bpct.na {

      color: var(--soft);

      font-weight: 600

    }

    /* brand mix bars in drill-down */

    .brands {

      display: flex;

      flex-direction: column;

      gap: 8px;

      margin-bottom: 20px

    }

    .brand-card {

      background: #fff;

      border: 1px solid var(--line);

      border-radius: 11px;

      overflow: hidden;

      transition: box-shadow .12s

    }

    .brand-card:hover {

      box-shadow: 0 3px 10px rgba(20, 30, 60, .06)

    }

    .brand-card.open {

      box-shadow: 0 4px 14px rgba(59, 91, 219, .14);

      border-color: #c8d2f4

    }

    .brand-head {

      display: grid;

      grid-template-columns:24px 130px 1fr 100px 60px;

      gap: 12px;

      align-items: center;

      padding: 10px 14px;

      cursor: pointer;

      user-select: none

    }

    .brand-head .cx {

      color: #c5cce0;

      font-size: 14px;

      transition: transform .18s ease, color .12s

    }

    .brand-card.open .brand-head .cx {

      transform: rotate(90deg);

      color: var(--brand)

    }