@consilioweb/payload-support 0.5.1

package/src/styles/SupportDashboard.module.scss

@@ -0,0 +1,649 @@
+// SupportDashboard — Linear/Vercel 2026 inspired dashboard
+// Uses Payload CMS CSS variables for dark mode compatibility
+
+$font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+$radius-sm: 8px;
+$radius-md: 12px;
+
+// ─── PAGE ───
+.page {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 24px 24px 60px;
+  font-family: $font;
+}
+
+.header {
+  margin-bottom: 32px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--theme-text);
+  margin: 0 0 4px;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin: 0;
+}
+
+// ─── STAT CARDS ROW ───
+.statsRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+
+  @media (max-width: 800px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 520px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  position: relative;
+  padding: 20px 20px 16px;
+  background: var(--theme-elevation-50, #f8fafc);
+  border-radius: $radius-md;
+  overflow: hidden;
+  transition: background 150ms;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 16px;
+    right: 16px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--stat-accent, var(--theme-elevation-200));
+    opacity: 0.7;
+  }
+
+  &:hover {
+    background: var(--theme-elevation-100, #f1f5f9);
+  }
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--theme-elevation-500);
+  margin-bottom: 8px;
+}
+
+.statValueRow {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.statValue {
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--theme-text);
+  line-height: 1;
+  letter-spacing: -0.5px;
+}
+
+.sparkline {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.statTrend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 600;
+
+  &.up {
+    color: #16a34a;
+  }
+  &.down {
+    color: #dc2626;
+  }
+  &.neutral {
+    color: var(--theme-elevation-400);
+  }
+}
+
+.trendArrow {
+  display: inline-flex;
+  font-size: 14px;
+  line-height: 1;
+}
+
+// ─── MIDDLE SECTION (2 columns) ───
+.middleGrid {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  gap: 20px;
+  margin-bottom: 32px;
+
+  @media (max-width: 800px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ─── PANEL (shared card style) ───
+.panel {
+  background: var(--theme-elevation-50, #f8fafc);
+  border-radius: $radius-md;
+  padding: 20px;
+}
+
+.panelTitle {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--theme-elevation-500);
+  margin: 0 0 16px;
+}
+
+// ─── ACTIVE TICKETS TABLE ───
+.ticketTable {
+  width: 100%;
+  border-spacing: 0;
+
+  th {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--theme-elevation-400);
+    text-align: left;
+    padding: 0 12px 10px;
+    border-bottom: 1px solid var(--theme-elevation-150, #e2e8f0);
+  }
+
+  td {
+    padding: 10px 12px;
+    font-size: 13px;
+    color: var(--theme-text);
+    vertical-align: middle;
+  }
+
+  tbody tr {
+    cursor: pointer;
+    transition: background 100ms;
+
+    &:nth-child(even) {
+      background: var(--theme-elevation-50, rgba(0,0,0,0.015));
+    }
+
+    &:hover {
+      background: var(--theme-elevation-100, #f1f5f9);
+    }
+  }
+}
+
+.statusDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.statusDotOpen { background: #3b82f6; }
+.statusDotWaiting { background: #f59e0b; }
+.statusDotResolved { background: #22c55e; }
+
+.ticketNum {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  white-space: nowrap;
+}
+
+.ticketSubject {
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.ticketClient {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ticketTime {
+  font-size: 12px;
+  color: var(--theme-elevation-400);
+  white-space: nowrap;
+}
+
+.ticketArrow {
+  color: var(--theme-elevation-300);
+  font-size: 16px;
+  text-align: right;
+  transition: color 100ms;
+
+  tr:hover & {
+    color: var(--theme-text);
+  }
+}
+
+.emptyTable {
+  text-align: center;
+  color: var(--theme-elevation-400);
+  padding: 32px 12px;
+  font-size: 13px;
+}
+
+// ─── RIGHT COLUMN ───
+.rightColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+// ─── VOLUME CHART ───
+.volumeChart {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 80px;
+  padding-top: 8px;
+}
+
+.volumeBar {
+  flex: 1;
+  background: var(--theme-elevation-200, #cbd5e1);
+  border-radius: 4px 4px 0 0;
+  min-height: 4px;
+  transition: background 150ms;
+  position: relative;
+
+  &:hover {
+    background: #3b82f6;
+  }
+}
+
+.volumeLabels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--theme-elevation-400);
+  font-variant-numeric: tabular-nums;
+}
+
+// ─── CSAT RING ───
+.csatContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 12px 0;
+}
+
+.csatRing {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  flex-shrink: 0;
+}
+
+.csatValue {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+}
+
+.csatMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.csatLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.csatSub {
+  font-size: 12px;
+  color: var(--theme-elevation-400);
+}
+
+// ─── QUICK ACTIONS ───
+.actionsRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.actionBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: $radius-sm;
+  background: var(--theme-elevation-100, #f1f5f9);
+  color: var(--theme-text);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: background 120ms, transform 80ms;
+  font-family: $font;
+
+  &:hover {
+    background: var(--theme-elevation-200, #e2e8f0);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+
+  &.badgeRed {
+    background: #fecaca;
+    color: #b91c1c;
+  }
+  &.badgeGreen {
+    background: #dcfce7;
+    color: #166534;
+  }
+}
+
+// ─── SKELETON LOADING ───
+.skeleton {
+  background: linear-gradient(90deg, var(--theme-elevation-100) 25%, var(--theme-elevation-150, #e8ecf0) 50%, var(--theme-elevation-100) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 6px;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeletonCard {
+  @extend .skeleton;
+  height: 100px;
+  border-radius: $radius-md;
+}
+
+.skeletonTable {
+  @extend .skeleton;
+  height: 300px;
+  border-radius: $radius-md;
+}
+
+.skeletonChart {
+  @extend .skeleton;
+  height: 160px;
+  border-radius: $radius-md;
+}
+
+// ─── SLA SECTION ───
+.slaSection {
+  margin-bottom: 32px;
+}
+
+.slaSectionTitle {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--theme-elevation-500);
+  margin: 0 0 16px;
+}
+
+.slaGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.slaCard {
+  border-radius: $radius-md;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+
+  &.slaBreach {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+
+    :global(.theme-dark) & {
+      background: rgba(239, 68, 68, 0.08);
+      border-color: rgba(239, 68, 68, 0.2);
+    }
+  }
+
+  &.slaRisk {
+    background: #fffbeb;
+    border: 1px solid #fed7aa;
+
+    :global(.theme-dark) & {
+      background: rgba(245, 158, 11, 0.08);
+      border-color: rgba(245, 158, 11, 0.2);
+    }
+  }
+}
+
+.slaCardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.slaCardTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.slaCardTitleBreach {
+  color: #dc2626;
+
+  :global(.theme-dark) & {
+    color: #f87171;
+  }
+}
+
+.slaCardTitleRisk {
+  color: #d97706;
+
+  :global(.theme-dark) & {
+    color: #fbbf24;
+  }
+}
+
+.slaCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.slaCountBreach {
+  background: #fecaca;
+  color: #b91c1c;
+
+  :global(.theme-dark) & {
+    background: rgba(239, 68, 68, 0.2);
+    color: #f87171;
+  }
+}
+
+.slaCountRisk {
+  background: #fed7aa;
+  color: #92400e;
+
+  :global(.theme-dark) & {
+    background: rgba(245, 158, 11, 0.2);
+    color: #fbbf24;
+  }
+}
+
+.slaList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.slaItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: $radius-sm;
+  background: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: background 100ms;
+
+  :global(.theme-dark) & {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.9);
+
+    :global(.theme-dark) & {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+}
+
+.slaItemLeft {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.slaItemNum {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--theme-elevation-500);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.slaItemSubject {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--theme-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slaItemTime {
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.slaTimeBreach {
+  color: #dc2626;
+
+  :global(.theme-dark) & {
+    color: #f87171;
+  }
+}
+
+.slaTimeRisk {
+  color: #d97706;
+
+  :global(.theme-dark) & {
+    color: #fbbf24;
+  }
+}
+
+.slaEmpty {
+  font-size: 13px;
+  color: var(--theme-elevation-400);
+  padding: 12px 0;
+  text-align: center;
+}
+
+.slaLoading {
+  font-size: 13px;
+  color: var(--theme-elevation-400);
+  padding: 12px 0;
+  text-align: center;
+}
+
+// ─── SESSION EXPIRED ───
+.errorState {
+  text-align: center;
+  padding: 60px 24px;
+  color: var(--theme-elevation-500);
+  font-size: 14px;
+
+  strong {
+    display: block;
+    font-size: 16px;
+    color: var(--theme-text);
+    margin-bottom: 8px;
+  }
+}