feat: add report material workflows and gateway safeguards

src/styles/global.css

@@ -2,6 +2,88 @@
   box-sizing: border-box;
 }
 
+.gateway-exception-time {
+  font-size: 1rem !important;
+  line-height: 1.35;
+}
+
+.table-cell-note {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  line-height: 1.35;
+  max-width: 28rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.gateway-exception-command {
+  margin-top: 1rem;
+}
+
+.gateway-exception-command pre {
+  max-height: 22rem;
+  margin: 0;
+  padding: 1rem;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+  font-size: 0.78rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.gateway-requeue-confirm .callout {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.9rem 1rem;
+  border: 1px solid;
+  border-radius: 0.75rem;
+}
+
+.gateway-requeue-confirm .callout p {
+  margin: 0.25rem 0 0;
+}
+
+.gateway-requeue-confirm .callout--warning {
+  border-color: #f5c66f;
+  background: #fff8e8;
+  color: #8a5700;
+}
+
+.gateway-requeue-confirm .callout--danger {
+  border-color: #f2a4a4;
+  background: #fff0f0;
+  color: #a12222;
+}
+
+.gateway-requeue-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  color: var(--color-text);
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.gateway-requeue-checkbox input {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.2rem;
+}
+
 html {
   text-size-adjust: 100%;
 }
@@ -6986,6 +7068,84 @@ h3 {
   padding: var(--space-6);
 }
 
+.channel-export-preview {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-muted);
+}
+
+.channel-export-preview span {
+  flex: 0 0 auto;
+  padding: 5px 9px;
+  border-radius: 6px;
+  background: var(--surface);
+  font-size: 12px;
+}
+
+.channel-field-mapping-grid,
+.report-import-basic-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.report-import-basic-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.report-import-file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 16px 0;
+  padding: 14px 16px;
+  border: 1px dashed var(--primary);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
+}
+
+.report-import-file span { display: flex; align-items: center; gap: 9px; }
+.report-import-file input { max-width: 310px; }
+.report-import-mapping { display: grid; gap: 12px; }
+.report-import-mapping-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
+.report-import-mapping-head,
+.report-import-mapping-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.5fr) 110px 100px 130px; gap: 10px; align-items: center; min-width: 820px; padding: 10px 12px; }
+.report-import-mapping-head { background: var(--surface-muted); color: var(--text-muted); font-size: 12px; font-weight: 700; }
+.report-import-mapping-row { border-top: 1px solid var(--border); }
+.report-import-mapping-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
+.report-import-mapping-row small { width: 100%; color: var(--text-muted); }
+.report-import-profile { display: flex; align-items: end; gap: 12px; }
+.report-import-profile button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 9px 12px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
+.report-import-profile button.is-active { border-color: var(--primary); color: var(--primary); }
+.report-import-profile .field { min-width: 320px; }
+.report-import-preview pre { max-height: 240px; overflow: auto; padding: 12px; background: #111827; color: #d1fae5; border-radius: 8px; font-size: 11px; }
+
+.report-material-filter { display: grid; grid-template-columns: 220px minmax(280px, 1fr) auto; gap: 14px; align-items: end; }
+.report-material-pool { overflow: hidden; padding: 0; }
+.report-material-table-head,
+.report-material-row { display: grid; grid-template-columns: 28px minmax(260px, 1.5fr) minmax(180px, 1fr) 90px 160px; gap: 12px; align-items: center; padding: 12px 16px; }
+.report-material-table-head { background: var(--surface-muted); color: var(--text-muted); font-size: 12px; font-weight: 700; }
+.report-material-row { border-top: 1px solid var(--border); cursor: pointer; }
+.report-material-row:hover { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
+.report-material-row > span { display: grid; gap: 3px; }
+.report-material-row small, .report-material-row em { color: var(--text-muted); font-size: 12px; font-style: normal; }
+.report-material-batches { display: grid; gap: 0; }
+.report-material-batches article { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid var(--border); }
+.report-material-batches article > div { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
+.report-material-batches article small { width: 100%; color: var(--text-muted); }
+.report-material-batches article a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); }
+
+@media (max-width: 980px) {
+  .channel-field-mapping-grid, .report-import-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .report-material-table-head, .report-material-row { grid-template-columns: 28px minmax(220px, 1.5fr) minmax(160px, 1fr); }
+  .report-material-table-head > :nth-child(n+4), .report-material-row > :nth-child(n+4) { display: none; }
+}
+
 .channel-field-pool {
   border-right: 1px solid var(--color-border);
 }