@consilioweb/payload-support 0.5.1

package/src/styles/TicketInbox.module.scss

@@ -0,0 +1,296 @@
+// Ticket Inbox — Superhuman/Linear inspired, 2026
+
+.page {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+
+// Header
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 0 16px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--theme-text);
+  margin: 0;
+}
+
+.headerRight {
+  margin-left: auto;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.searchWrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.searchIcon {
+  position: absolute;
+  left: 12px;
+  color: var(--theme-elevation-400);
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.searchInput {
+  padding: 8px 12px 8px 34px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-0, #fff);
+  color: var(--theme-text);
+  font-size: 13px;
+  width: 280px;
+  transition: border-color 150ms, box-shadow 150ms;
+
+  &:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+  }
+
+  &::placeholder { color: var(--theme-elevation-400); }
+}
+
+.searchHint {
+  position: absolute;
+  right: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--theme-elevation-400);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-50);
+}
+
+.newTicketBtn {
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-0, #fff);
+  color: var(--theme-text);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 100ms;
+  text-decoration: none;
+  &:hover { background: var(--theme-elevation-100); }
+}
+
+// Filter tabs
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
+  margin-bottom: 0;
+}
+
+.tab {
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 100ms;
+  white-space: nowrap;
+
+  &:hover { color: var(--theme-text); }
+
+  &.tabActive {
+    color: var(--theme-text);
+    border-bottom-color: #2563eb;
+  }
+}
+
+.tabCount {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--theme-elevation-400);
+  margin-left: 4px;
+}
+
+.sortRow {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 0;
+}
+
+.sortSelect {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  &:hover { color: var(--theme-text); }
+}
+
+// Ticket list
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 18px 16px 70px 50px 1fr 180px 100px 80px 100px 12px;
+  gap: 10px;
+  align-items: center;
+  padding: 11px 12px;
+  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  cursor: pointer;
+  transition: background 60ms;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover { background: var(--theme-elevation-50); }
+
+  @media (max-width: 900px) {
+    grid-template-columns: 16px 60px 1fr 100px 80px;
+  }
+}
+
+.rowSelected {
+  background: #eff6ff;
+  border-left: 3px solid #2563eb;
+  padding-left: 9px;
+}
+
+.statusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.statusText {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+}
+
+.ticketNum {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  font-size: 11px;
+  color: var(--theme-elevation-400);
+  font-weight: 500;
+}
+
+.subject {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.client {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.categoryChip {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--theme-elevation-100);
+  white-space: nowrap;
+}
+
+.priorityBar {
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.timeAgo {
+  font-size: 12px;
+  color: var(--theme-elevation-400);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.unreadDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #2563eb;
+  flex-shrink: 0;
+}
+
+// Empty state
+.empty {
+  padding: 80px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+}
+
+.emptyIcon {
+  font-size: 40px;
+  margin-bottom: 12px;
+  opacity: 0.4;
+}
+
+.emptyText {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+// Keyboard hints
+.keyboardHints {
+  position: fixed;
+  bottom: 20px;
+  right: 24px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: var(--theme-elevation-0, #fff);
+  border: 1px solid var(--theme-elevation-200);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--theme-elevation-500);
+  display: flex;
+  gap: 12px;
+  z-index: 10;
+
+  kbd {
+    font-family: inherit;
+    padding: 1px 5px;
+    border-radius: 3px;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-50);
+    font-size: 10px;
+    font-weight: 700;
+  }
+}
+
+// Loading
+.loading {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+  font-size: 14px;
+}

package/src/styles/TicketingSettings.module.scss

@@ -0,0 +1,358 @@
+// TicketingSettings — SCSS Module
+// Uses Payload CMS CSS variables for dark mode compatibility
+
+$font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+$blue: #2563eb;
+$green: #16a34a;
+
+// ─── PAGE ───
+.page {
+  padding: 20px 24px;
+  max-width: 840px;
+  margin: 0 auto;
+  font-family: $font;
+}
+
+.intro {
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin: 0 0 24px;
+  line-height: 1.6;
+}
+
+// ─── COLLAPSIBLE SECTION ───
+.sectionWrapper {
+  margin-bottom: 32px;
+  border: 1px solid var(--theme-elevation-300);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  background-color: var(--theme-elevation-100);
+  border-bottom: 1px solid var(--theme-elevation-300);
+  cursor: pointer;
+  user-select: none;
+}
+
+.sectionIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--theme-text);
+  flex: 1;
+}
+
+.sectionChevron {
+  font-size: 16px;
+  color: var(--theme-elevation-500);
+  transition: transform 150ms;
+
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.sectionBody {
+  padding: 18px 18px 14px;
+}
+
+.sectionDescription {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  margin: 0 0 16px;
+  line-height: 1.5;
+}
+
+// ─── FIELD ROW ───
+.fieldRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.fieldLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+  min-width: 160px;
+  padding-top: 8px;
+  flex-shrink: 0;
+}
+
+.fieldDescription {
+  font-size: 11px;
+  color: var(--theme-elevation-500);
+  font-weight: 400;
+  margin-top: 2px;
+}
+
+.fieldContent {
+  flex: 1;
+  max-width: 400px;
+}
+
+// ─── INPUTS ───
+.input {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  font-size: 13px;
+  color: var(--theme-text);
+  background-color: var(--theme-elevation-0);
+  width: 100%;
+  max-width: 400px;
+  outline: none;
+  transition: border-color 150ms;
+  font-family: inherit;
+
+  &:focus {
+    border-color: $blue;
+  }
+}
+
+.inputReadonly {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  background-color: var(--theme-elevation-100);
+  width: 100%;
+  max-width: 400px;
+  cursor: not-allowed;
+  outline: none;
+}
+
+.select {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  font-size: 13px;
+  color: var(--theme-text);
+  background-color: var(--theme-elevation-0);
+  max-width: 400px;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+}
+
+.numberInput {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  font-size: 13px;
+  color: var(--theme-text);
+  background-color: var(--theme-elevation-0);
+  width: 100px;
+  outline: none;
+}
+
+// ─── TOGGLE ───
+.toggleRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+}
+
+.inlineLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.inlineDesc {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+}
+
+// ─── BADGE ───
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+// ─── SEPARATOR ───
+.separator {
+  border-top: 1px solid var(--theme-elevation-300);
+  margin: 14px 0;
+}
+
+// ─── FEATURE CARD ───
+.categoryHeading {
+  font-size: 13px;
+  font-weight: 700;
+  margin: 0 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.categoryDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.categoryGroup {
+  margin-bottom: 20px;
+}
+
+.featureList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.featureCard {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-300);
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 150ms;
+  opacity: 0.5;
+
+  &.enabled {
+    background-color: var(--theme-elevation-100);
+    opacity: 1;
+  }
+}
+
+.featureLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+  margin-bottom: 1px;
+}
+
+.featureDesc {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  line-height: 1.4;
+}
+
+// ─── AI TOGGLE ROW ───
+.aiToggleRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.aiToggleLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.aiToggleDesc {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  margin-left: 8px;
+}
+
+// ─── API KEY ROW ───
+.apiKeyRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  max-width: 400px;
+}
+
+.apiKeyToggle {
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+  white-space: nowrap;
+}
+
+// ─── SLA INLINE ───
+.slaInline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.slaHint {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+}
+
+// ─── AI SUB FEATURES LABEL ───
+.aiSubFeaturesLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-text);
+  margin: 0 0 10px;
+}
+
+// ─── SIGNATURE TEXTAREA ───
+.signatureTextarea {
+  @extend .input;
+  max-width: 100%;
+  width: 100%;
+  resize: vertical;
+  line-height: 1.6;
+}
+
+// ─── PURGE SECTION ───
+.purgeGroup {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.purgeCategory {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.purgeCategoryLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.purgeButtons {
+  display: flex;
+  gap: 6px;
+}
+
+// ─── BOTTOM BAR ───
+.bottomBar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 0;
+  border-top: 1px solid var(--theme-elevation-300);
+  margin-top: 8px;
+}