@consilioweb/payload-support 0.5.1

package/src/styles/EmailTracking.module.scss

@@ -0,0 +1,238 @@
+// Email Tracking — Clean 2026 design with Payload CSS vars
+
+.page {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+
+.header {
+  padding: 20px 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--theme-text);
+  margin: 0;
+  flex: 1;
+}
+
+// Stat cards
+.statGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+  @media (max-width: 800px) { grid-template-columns: repeat(2, 1fr); }
+}
+
+.statCard {
+  padding: 16px 18px;
+  border-radius: 10px;
+  background: var(--theme-elevation-50);
+}
+
+.statLabel {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--theme-elevation-500);
+  margin-bottom: 6px;
+}
+
+.statValue {
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--theme-text);
+}
+
+.statUnit {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-elevation-500);
+  margin-left: 2px;
+}
+
+// Filters
+.filters {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
+}
+
+.tab {
+  padding: 8px 14px;
+  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;
+  &:hover { color: var(--theme-text); }
+  &.tabActive {
+    color: var(--theme-text);
+    border-bottom-color: #2563eb;
+  }
+}
+
+.dateRangeGroup {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.dateRangeBtn {
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-200);
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+  transition: all 80ms;
+  &:hover { background: var(--theme-elevation-100); }
+  &.dateRangeActive {
+    background: #2563eb;
+    color: #fff;
+    border-color: #2563eb;
+  }
+}
+
+.searchInput {
+  padding: 7px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-0, #fff);
+  color: var(--theme-text);
+  font-size: 13px;
+  width: 220px;
+  &:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
+  &::placeholder { color: var(--theme-elevation-400); }
+}
+
+// Table
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.table th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--theme-elevation-500);
+  border-bottom: 1px solid var(--theme-elevation-200);
+}
+
+.table td {
+  padding: 10px 12px;
+  color: var(--theme-text);
+  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  vertical-align: middle;
+}
+
+.table tr:hover td {
+  background: var(--theme-elevation-50);
+}
+
+.statusBadge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.ticketLink {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 12px;
+  &:hover { text-decoration: underline; }
+}
+
+.expandBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--theme-elevation-400);
+  font-size: 12px;
+  padding: 2px;
+  &:hover { color: var(--theme-text); }
+}
+
+.errorDetail {
+  padding: 10px 14px;
+  background: #fef2f2;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #991b1b;
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  margin: 4px 0;
+}
+
+.processingTime {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+}
+
+.timeFast { color: #16a34a; }
+.timeMedium { color: #d97706; }
+.timeSlow { color: #dc2626; }
+
+// Pagination
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.pageBtn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-200);
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+  &:hover { background: var(--theme-elevation-100); }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+
+.empty {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+  font-size: 14px;
+}
+
+.loading {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+  font-size: 14px;
+}

package/src/styles/ImportConversation.module.scss

@@ -0,0 +1,267 @@
+// ImportConversation — Clean admin aesthetic, 2026
+
+.page {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 24px 16px 60px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+
+// Header
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--theme-text);
+  margin: 0;
+}
+
+// Buttons
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity 100ms;
+  text-decoration: none;
+
+  &:hover { opacity: 0.9; }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.btnPrimary { composes: btn; background: #2563eb; }
+.btnAmber { composes: btn; background: #d97706; }
+.btnGreen { composes: btn; background: #16a34a; }
+.btnMuted { composes: btn; background: #64748b; }
+
+.btnContent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+// Dropzone
+.dropzone {
+  border: 3px dashed var(--theme-elevation-400);
+  border-radius: 12px;
+  padding: 60px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 200ms ease;
+  background: transparent;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropzoneDragOver {
+  composes: dropzone;
+  border-color: #2563eb;
+  background: rgba(37, 99, 235, 0.04);
+}
+
+.dropzoneHasFile {
+  composes: dropzone;
+  border-color: #16a34a;
+  background: rgba(22, 163, 74, 0.04);
+}
+
+.dropzoneIcon {
+  font-size: 40px;
+  color: #2563eb;
+  margin-bottom: 4px;
+}
+
+.dropzoneText {
+  font-size: 15px;
+  color: var(--theme-elevation-500);
+  margin-top: 8px;
+}
+
+.fileName {
+  font-size: 14px;
+  color: #2563eb;
+  font-weight: 600;
+  margin-top: 8px;
+}
+
+// Section
+.section {
+  margin-top: 20px;
+  padding: 16px;
+  background: var(--theme-elevation-100);
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-300);
+}
+
+.sectionTitle {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sectionTitleRight {
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin-left: auto;
+}
+
+// Info rows
+.infoRow {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0;
+  font-size: 14px;
+  border-bottom: 1px solid var(--theme-elevation-300);
+
+  &:last-child { border-bottom: none; }
+}
+
+.infoLabel {
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  min-width: 100px;
+}
+
+.infoValue {
+  color: var(--theme-text);
+}
+
+// Messages
+.msgRow {
+  padding: 8px 12px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  font-size: 13px;
+  border-left: 3px solid transparent;
+}
+
+.msgAdmin {
+  composes: msgRow;
+  background: rgba(37, 99, 235, 0.06);
+  border-left-color: #2563eb;
+}
+
+.msgClient {
+  composes: msgRow;
+  background: rgba(217, 119, 6, 0.06);
+  border-left-color: #d97706;
+}
+
+.msgHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.msgAuthor {
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--theme-text);
+}
+
+.msgDate {
+  font-size: 11px;
+  color: var(--theme-elevation-500);
+}
+
+.msgPreview {
+  color: var(--theme-elevation-500);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+// Action row
+.btnRow {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+
+// Result
+.result {
+  margin-top: 20px;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.resultSuccess {
+  composes: result;
+  background: rgba(22, 163, 74, 0.06);
+  border: 1px solid #16a34a;
+}
+
+.resultError {
+  composes: result;
+  background: rgba(220, 38, 38, 0.06);
+  border: 1px solid #dc2626;
+}
+
+.resultTitle {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.resultTitleSuccess { composes: resultTitle; color: #16a34a; }
+.resultTitleError { composes: resultTitle; color: #dc2626; }
+
+.errorText {
+  font-size: 14px;
+  color: #dc2626;
+  margin: 0;
+}
+
+// Badge
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.badgeNew {
+  composes: badge;
+  background: rgba(22, 163, 74, 0.12);
+  color: #16a34a;
+}
+
+.badgeInfo {
+  composes: badge;
+  background: rgba(37, 99, 235, 0.12);
+  color: #2563eb;
+}
+
+// Link
+.link {
+  color: #2563eb;
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover { text-decoration: underline; }
+}

package/src/styles/Layout.module.scss

@@ -0,0 +1,55 @@
+@use 'tokens' as *;
+
+.root {
+  padding: 12px 0;
+}
+
+.twoColumns {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 16px;
+  align-items: start;
+
+  @media (max-width: 1100px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mainColumn {
+  min-width: 0; // prevent overflow
+}
+
+.sideColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: sticky;
+  top: 80px;
+
+  @media (max-width: 1100px) {
+    position: static;
+  }
+}
+
+.separator {
+  border-top: 1px solid $border;
+  margin: 16px 0;
+}
+
+// RTE display overrides (scoped)
+.rteDisplay {
+  :global {
+    blockquote {
+      border-left: 3px solid $blue;
+      margin: 8px 0;
+      padding: 8px 16px;
+      background: $bg;
+      border-radius: 0 $radius-sm $radius-sm 0;
+    }
+    img { max-width: 100%; height: auto; border-radius: $radius; margin: 8px 0; }
+    a { color: $blue; text-decoration: underline; }
+    ul, ol { margin: 8px 0; padding-left: 24px; }
+    li { margin: 2px 0; }
+    p { margin: 0 0 6px 0; }
+  }
+}

package/src/styles/Logs.module.scss

@@ -0,0 +1,164 @@
+.page {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+
+.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;
+  flex: 1;
+}
+
+.headerActions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.purgeBtn {
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-200);
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+  transition: all 100ms;
+  &:hover { background: var(--theme-elevation-100); color: var(--theme-text); }
+}
+
+.purgeBtnDanger {
+  border-color: #fca5a5;
+  color: #dc2626;
+  &:hover { background: #fef2f2; }
+}
+
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
+  margin-bottom: 16px;
+}
+
+.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;
+  &:hover { color: var(--theme-text); }
+  &.tabActive { color: var(--theme-text); border-bottom-color: #2563eb; }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.table th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--theme-elevation-500);
+  border-bottom: 1px solid var(--theme-elevation-200);
+}
+
+.table td {
+  padding: 10px 12px;
+  color: var(--theme-text);
+  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  vertical-align: middle;
+}
+
+.table tr:hover td { background: var(--theme-elevation-50); }
+
+.badge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.mono {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
+  font-size: 12px;
+}
+
+.truncate {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+  align-items: center;
+}
+
+.pageBtn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-200);
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+  &:hover { background: var(--theme-elevation-100); }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+
+.pageInfo {
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+}
+
+.empty {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+  font-size: 14px;
+}
+
+.loading {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--theme-elevation-400);
+}
+
+.purgeResult {
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #166534;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}