adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/styles/2026/_dashboard.scss

@@ -0,0 +1,520 @@
+/* ============ DASHBOARD-SPECIFIC ============ */
+
+/* KPI grid */
+.kpi-grid {
+  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.kpi-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px 22px 20px;
+  box-shadow: var(--shadow-card);
+  animation: rise-in 600ms cubic-bezier(.2,.7,.2,1) both;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
+              box-shadow 220ms ease,
+              border-color 220ms ease;
+}
+.kpi-card::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto auto;
+  width: 180px; height: 180px;
+  background: radial-gradient(circle at top right, currentColor, transparent 65%);
+  opacity: 0.08;
+  pointer-events: none;
+  transition: opacity 220ms ease;
+}
+.kpi-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.kpi-card:hover::before { opacity: 0.14; }
+.kpi-card.c-success { color: var(--success); }
+.kpi-card.c-danger  { color: var(--danger); }
+.kpi-card.c-purple  { color: var(--purple); }
+.kpi-card.c-primary { color: var(--primary); }
+
+.kpi-card:nth-child(1) { animation-delay: 60ms; }
+.kpi-card:nth-child(2) { animation-delay: 120ms; }
+.kpi-card:nth-child(3) { animation-delay: 180ms; }
+.kpi-card:nth-child(4) { animation-delay: 240ms; }
+
+.kpi-top {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px;
+  position: relative;
+}
+.kpi-identity {
+  display: flex; align-items: center; gap: 10px;
+  min-width: 0;
+}
+
+.kpi-icon {
+  width: 32px; height: 32px;
+  border-radius: 9px;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.kpi-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.9; fill: none; }
+.kpi-icon.primary { background: var(--primary-soft); color: var(--primary); }
+.kpi-icon.success { background: var(--success-soft); color: var(--success); }
+.kpi-icon.info    { background: var(--info-soft);    color: var(--info); }
+.kpi-icon.purple  { background: var(--purple-soft);  color: var(--purple); }
+.kpi-icon.danger  { background: var(--danger-soft);  color: var(--danger); }
+.kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
+
+.kpi-label {
+  font-size: 13px;
+  color: var(--t-muted);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kpi-value {
+  font-family: 'Inter Tight', 'Inter', sans-serif;
+  font-weight: 700;
+  font-size: 44px;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  color: var(--t-base);
+  position: relative;
+}
+.kpi-value sup {
+  font-size: 17px;
+  color: var(--t-muted);
+  vertical-align: top;
+  font-weight: 500;
+  margin-left: 3px;
+  line-height: 2.1;
+}
+
+.kpi-compare {
+  display: flex; align-items: center; gap: 7px;
+  font-size: 12px;
+  color: var(--t-light);
+  font-weight: 500;
+  padding-top: 12px;
+  border-top: 1px dashed var(--border-soft);
+  margin-top: auto;
+}
+.kpi-compare strong {
+  color: var(--t-base);
+  font-weight: 600;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11.5px;
+  letter-spacing: -0.01em;
+}
+.kpi-compare svg {
+  width: 11px; height: 11px;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  fill: none;
+  flex-shrink: 0;
+}
+.kpi-compare .up   { color: var(--success); }
+.kpi-compare .down { color: var(--danger); }
+.kpi-compare .flat { color: var(--purple); }
+.kpi-compare .info { color: var(--info); }
+.kpi-compare .sep { color: var(--t-light); opacity: 0.45; font-weight: 400; }
+
+.kpi-pill {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  font-weight: 500;
+  padding: 4px 9px;
+  border-radius: 999px;
+  display: inline-flex; align-items: center; gap: 4px;
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+.kpi-pill.up   { background: var(--success-soft); color: var(--success); }
+.kpi-pill.down { background: var(--danger-soft);  color: var(--danger); }
+.kpi-pill.flat { background: var(--purple-soft);  color: var(--purple); }
+.kpi-pill.info { background: var(--info-soft);    color: var(--info); }
+.kpi-pill svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; }
+
+/* Site Visits regional + radials */
+.sv-regions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 36px;
+}
+.sv-region { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.sv-region-head {
+  display: flex; align-items: center; gap: 9px;
+  font-size: 13px;
+  color: var(--t-muted);
+  font-weight: 500;
+}
+.sv-region-head .marker { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.sv-region-value {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 28px;
+  color: var(--t-base);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  display: flex; align-items: baseline; gap: 8px;
+}
+.sv-region-value .pct {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11.5px;
+  color: var(--t-light);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+.sv-region-bar {
+  height: 3px;
+  background: var(--bg-muted);
+  border-radius: 99px;
+  overflow: hidden;
+  margin-top: 2px;
+}
+.sv-region-bar-fill {
+  height: 100%;
+  border-radius: 99px;
+  transform-origin: left;
+  animation: bar-in 900ms cubic-bezier(.2,.7,.2,1) 300ms both;
+}
+
+.sv-divider {
+  height: 1px;
+  background: var(--border-soft);
+  margin: 28px 0;
+}
+
+.sv-radials {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 28px;
+}
+.sv-radial {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 16px;
+  align-items: center;
+}
+.sv-radial-chart {
+  width: 72px; height: 72px;
+  position: relative;
+  flex-shrink: 0;
+}
+.sv-radial-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+.radial-track { stroke: var(--bg-muted); stroke-width: 5; fill: none; }
+.radial-fill  { stroke-width: 5; fill: none; stroke-linecap: round; }
+.radial-fill.danger  { stroke: var(--danger); }
+.radial-fill.info    { stroke: var(--info); }
+.radial-fill.warning { stroke: var(--warning); }
+.sv-radial-chart .pct {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--t-base);
+  letter-spacing: -0.022em;
+}
+.sv-radial-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.sv-radial-name {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--t-base);
+  letter-spacing: -0.005em;
+}
+.sv-radial-caption {
+  font-size: 11.5px;
+  color: var(--t-muted);
+}
+
+/* Monthly chart */
+.chart-svg { width: 100%; height: auto; display: block; }
+.chart-svg .grid-line { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 2 4; }
+.chart-svg .axis-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; fill: var(--t-light); letter-spacing: 0.04em; }
+.chart-svg .area { fill: url("#chartGrad"); }
+.chart-svg .line {
+  fill: none; stroke: var(--primary); stroke-width: 2.2;
+  stroke-linecap: round; stroke-linejoin: round;
+  stroke-dasharray: 2400;
+  stroke-dashoffset: 2400;
+  animation: draw 1400ms cubic-bezier(.55,.15,.2,1) 400ms forwards;
+}
+.chart-svg .dot-peak { fill: var(--primary); stroke: var(--bg-card); stroke-width: 3; opacity: 0; animation: fade-in 600ms ease 1400ms forwards; }
+
+.monthly-footer {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 18px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border-soft);
+  margin-top: 18px;
+}
+.stat-cell {
+  display: flex; flex-direction: column; gap: 4px;
+}
+.stat-cell-label { font-size: 11px; color: var(--t-muted); font-weight: 500; }
+.stat-cell-value {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: -0.022em;
+  color: var(--t-base);
+  display: flex; align-items: center; gap: 6px;
+}
+.stat-cell-value .trend-ic { width: 11px; height: 11px; color: var(--success); flex-shrink: 0; }
+
+/* Todo list */
+.todo-list { display: flex; flex-direction: column; }
+.todo-item {
+  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px;
+  align-items: center;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+.todo-item:last-child { border-bottom: 0; }
+.todo-check {
+  appearance: none; -webkit-appearance: none;
+  width: 18px; height: 18px;
+  border: 1.5px solid var(--t-light);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  transition: all 160ms ease;
+  background: transparent;
+}
+.todo-check:hover { border-color: var(--primary); }
+.todo-check:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.todo-check:checked::after {
+  content: '';
+  position: absolute;
+  left: 5px; top: 1px;
+  width: 4px; height: 9px;
+  border: solid #fff;
+  border-width: 0 1.8px 1.8px 0;
+  transform: rotate(45deg);
+}
+.todo-item.is-done .todo-text { color: var(--t-light); text-decoration: line-through; text-decoration-thickness: 1.5px; }
+.todo-text { font-size: 13.5px; color: var(--t-base); cursor: pointer; }
+.todo-badge {
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: 999px;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+.todo-badge.low      { background: var(--bg-muted); color: var(--t-muted); }
+.todo-badge.upcoming { background: var(--info-soft); color: var(--info); }
+.todo-badge.urgent   { background: var(--danger-soft); color: var(--danger); }
+.todo-badge.warn     { background: var(--warning-soft); color: var(--warning); }
+.todo-badge.done     { background: var(--success-soft); color: var(--success); }
+
+/* Sales report */
+.sales-summary {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  padding: 0 0 20px;
+  margin-bottom: 4px;
+}
+.sales-summary-label .eyebrow { display: block; margin-bottom: 4px; }
+.sales-summary h4 {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--t-base);
+  margin: 0;
+}
+.sales-summary-total {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 28px;
+  letter-spacing: -0.03em;
+  color: var(--t-base);
+  line-height: 1;
+}
+.sales-summary-total sup { font-size: 15px; color: var(--t-muted); vertical-align: top; font-weight: 500; margin-right: 1px; line-height: 2; }
+
+.sales-all {
+  padding: 18px 0 0;
+  text-align: center;
+  margin-top: 6px;
+  border-top: 1px solid var(--border-soft);
+}
+.sales-all a {
+  font-size: 12.5px;
+  color: var(--primary);
+  font-weight: 600;
+  display: inline-flex; align-items: center; gap: 5px;
+  transition: color 180ms;
+}
+.sales-all a:hover { color: var(--primary-dark); }
+.sales-all svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; }
+
+/* Weather */
+.wx-hero {
+  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
+  padding: 8px 0;
+}
+.wx-temp-block { display: flex; align-items: center; gap: 16px; }
+.wx-icon {
+  width: 60px; height: 60px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--info-soft), var(--primary-soft));
+  color: var(--info);
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.wx-icon svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.3; fill: none; }
+.wx-temp {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 44px;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  color: var(--t-base);
+}
+.wx-temp sup { font-size: 18px; color: var(--t-muted); vertical-align: top; font-weight: 500; line-height: 1.6; }
+.wx-condition { margin-top: 4px; color: var(--t-muted); font-size: 13px; }
+.wx-condition strong { color: var(--t-base); font-weight: 600; }
+.wx-date { text-align: right; }
+.wx-date h5 {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--t-base);
+  margin: 0 0 2px;
+  letter-spacing: -0.02em;
+}
+.wx-date p {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: var(--t-light);
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+.wx-stats {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding: 16px 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  margin: 20px 0 16px;
+}
+.wx-stats > div { display: flex; flex-direction: column; gap: 4px; }
+.wx-stat-label { font-size: 11px; color: var(--t-muted); font-weight: 500; }
+.wx-stat-value {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--t-base);
+  letter-spacing: -0.018em;
+}
+.wx-stat-value .unit { font-size: 11px; color: var(--t-light); margin-left: 3px; font-weight: 500; letter-spacing: 0; }
+
+.wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
+.wx-day {
+  padding: 10px 4px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 160ms ease;
+}
+.wx-day:hover { background: var(--bg-hover); }
+.wx-day.is-today {
+  background: var(--primary);
+  color: #fff;
+}
+.wx-day-name { font-size: 10.5px; font-weight: 600; color: var(--t-muted); letter-spacing: 0.04em; margin-bottom: 6px; }
+.wx-day.is-today .wx-day-name { color: rgba(255,255,255,0.85); }
+.wx-day-icon { width: 22px; height: 22px; margin: 0 auto 6px; color: var(--t-muted); }
+.wx-day-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none; }
+.wx-day.is-today .wx-day-icon { color: #fff; }
+.wx-day-temp { font-size: 12.5px; color: var(--t-base); font-weight: 600; }
+.wx-day.is-today .wx-day-temp { color: #fff; }
+
+/* Quick chat */
+.chat-frame {
+  margin: -6px -6px 0;
+  border-radius: 12px;
+  background: var(--bg-muted);
+  overflow: hidden;
+}
+.chat-messages {
+  padding: 20px;
+  display: flex; flex-direction: column;
+  gap: 16px;
+  min-height: 200px;
+}
+.chat-row { display: flex; gap: 10px; max-width: min(85%, 560px); }
+.chat-row.me { margin-left: auto; flex-direction: row-reverse; }
+.chat-avatar {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  color: var(--t-base);
+  display: grid; place-items: center;
+  font-weight: 600;
+  font-size: 11.5px;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+}
+.chat-avatar.me { background: linear-gradient(135deg, var(--primary), var(--purple)); color: #fff; border: 0; }
+.chat-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.chat-row.me .chat-stack { align-items: flex-end; }
+.chat-bubble {
+  padding: 8px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  border-top-left-radius: 4px;
+  font-size: 13px;
+  color: var(--t-base);
+  line-height: 1.45;
+  box-shadow: var(--shadow-sm);
+}
+.chat-row.me .chat-bubble {
+  background: var(--primary); color: #fff; border-color: var(--primary);
+  border-top-left-radius: 14px;
+  border-top-right-radius: 4px;
+}
+.chat-ts {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  color: var(--t-light);
+  letter-spacing: 0.04em;
+  padding: 0 4px;
+}
+.chat-input-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+}
+.chat-input {
+  flex: 1; background: transparent; border: 0; outline: 0;
+  font-size: 13.5px; color: var(--t-base); padding: 4px 0;
+}
+.chat-input::placeholder { color: var(--t-light); }
+.chat-send {
+  width: 34px; height: 34px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  background: var(--primary); color: #fff;
+  transition: background 180ms;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px -1px color-mix(in oklab, var(--primary) 40%, transparent);
+}
+.chat-send:hover { background: var(--primary-dark); }
+.chat-send svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

package/src/assets/styles/2026/_data.scss

@@ -0,0 +1,130 @@
+/* ============ DATA TABLE / RICH TABLE ============ */
+
+.data-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.data-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; }
+.data-toolbar-right { display: flex; align-items: center; gap: 8px; }
+.data-toolbar .input-icon { flex: 1; max-width: 320px; }
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.data-table thead th {
+  position: sticky; top: 0;
+  background: var(--bg-card);
+  text-align: left;
+  padding: 12px 14px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--t-light);
+  font-weight: 500;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+.data-table thead th .sort {
+  display: inline-flex; vertical-align: middle;
+  margin-left: 4px;
+  color: var(--t-light);
+}
+.data-table thead th.sorted-asc .sort,
+.data-table thead th.sorted-desc .sort {
+  color: var(--primary);
+}
+.data-table thead th.sorted-asc .sort svg { transform: rotate(180deg); }
+.data-table thead th .sort svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 160ms; }
+
+.data-table tbody td {
+  padding: 12px 14px;
+  font-size: 13px;
+  color: var(--t-base);
+  border-bottom: 1px solid var(--border-soft);
+  white-space: nowrap;
+}
+.data-table tbody tr { transition: background 140ms; }
+.data-table tbody tr:hover td { background: var(--bg-hover); }
+.data-table tbody tr.is-selected td { background: var(--primary-soft); }
+
+.data-cell-user {
+  display: flex; align-items: center; gap: 10px;
+  min-width: 0;
+}
+.data-cell-user .av {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.data-cell-user-meta { line-height: 1.3; min-width: 0; }
+.data-cell-user-name { font-size: 13px; font-weight: 600; color: var(--t-base); }
+.data-cell-user-email {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--t-muted);
+  letter-spacing: 0.02em;
+}
+
+.data-cell-mono {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: var(--t-muted);
+  letter-spacing: 0.02em;
+}
+
+.data-cell-actions {
+  display: flex; gap: 2px;
+}
+.data-cell-actions .btn--icon {
+  padding: 6px;
+  background: transparent;
+  border: 0;
+  color: var(--t-muted);
+  border-radius: 6px;
+  transition: background 140ms, color 140ms;
+}
+.data-cell-actions .btn--icon:hover { background: var(--bg-hover); color: var(--t-base); }
+.data-cell-actions .btn--icon svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; }
+
+.data-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  padding-top: 16px;
+  margin-top: 4px;
+  border-top: 1px solid var(--border-soft);
+  font-size: 12px;
+  color: var(--t-muted);
+}
+.data-foot-info {
+  display: flex; align-items: center; gap: 16px;
+}
+.data-foot-info .select { width: auto; padding: 6px 28px 6px 10px; font-size: 12px; }
+
+.pager {
+  display: flex; gap: 4px; align-items: center;
+}
+.pager-btn {
+  min-width: 30px; height: 30px;
+  padding: 0 8px;
+  display: grid; place-items: center;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--t-muted);
+  transition: background 160ms, color 160ms;
+}
+.pager-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--t-base); }
+.pager-btn.is-active {
+  background: var(--primary);
+  color: #fff;
+}
+.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.pager-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }