@consilioweb/payload-support 0.6.0 → 0.6.2

package/dist/styles/SupportDashboard.module.scss

@@ -1,649 +0,0 @@
-// 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;
-  }
-}