@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/admin/AdminReportingTab.astro

@@ -0,0 +1,435 @@
+---
+import { getReportingViewModel } from "@/lib/admin/services/mock";
+
+const { envelope } = Astro.props;
+const reporting = getReportingViewModel(envelope);
+
+const { tenant, capabilities } = Astro.locals;
+
+const compliance = tenant.compliance;
+const regulatedEnabled = Boolean(compliance);
+const ageVerificationEnabled = Boolean(capabilities.ageVerification.enabled && compliance?.minAge);
+const exciseTaxEnabled = Boolean(capabilities.exciseTax.enabled);
+const pactReportingEnabled = Boolean(compliance?.shippingRestriction?.match(/\bPACT\b/i));
+const regulatedReportCount =
+  Number(ageVerificationEnabled) + Number(exciseTaxEnabled) + Number(pactReportingEnabled);
+
+const CATEGORY_TONE: Record<string, string> = {
+  sales: "green",
+  products: "blue",
+  customers: "violet",
+  fulfillment: "amber",
+  compliance: "teal",
+  tax: "blue",
+  risk: "amber",
+};
+
+const TREND_LABEL: Record<string, string> = { up: "▲", down: "▼", flat: "—" };
+const TREND_TONE: Record<string, string> = { up: "green", down: "red", flat: "" };
+
+const monthlyRows = [
+  {
+    enabled: exciseTaxEnabled,
+    report: "Excise tax close",
+    period: "June 2026",
+    cadence: "Monthly visibility",
+    owner: "Finance",
+    readiness: "$3,214.90 collected",
+    status: "Ready",
+    tone: "green",
+    action: "Export",
+  },
+  {
+    enabled: pactReportingEnabled,
+    report: "PACT shipment packets",
+    period: "June 2026",
+    cadence: "Due by state schedule",
+    owner: "Compliance",
+    readiness: "14 states, 2 local copies",
+    status: "Review",
+    tone: "amber",
+    action: "Prepare",
+  },
+  {
+    enabled: pactReportingEnabled || exciseTaxEnabled,
+    report: "Reorder and supplemental forms",
+    period: "July 2026",
+    cadence: "Monthly checklist",
+    owner: "Operations",
+    readiness: "Registrations, amendments, and no-ship attestations",
+    status: "Draft",
+    tone: "teal",
+    action: "Open",
+  },
+  {
+    enabled: exciseTaxEnabled,
+    report: "Federal excise support",
+    period: "Q2 2026",
+    cadence: "Quarterly filing support",
+    owner: "Finance",
+    readiness: "Liability, deposits, EIN, and records packet",
+    status: "Ready",
+    tone: "blue",
+    action: "Open",
+  },
+].filter((row) => row.enabled);
+
+const requiredFieldGroups = [
+  {
+    enabled: exciseTaxEnabled,
+    title: "Excise Tax",
+    source: "Products, orders, tax engine",
+    fields:
+      "jurisdiction, filing period, tax class, SKU, brand, product type, nicotine flag, pack quantity, volume or weight, wholesale cost, retail price, taxable basis, tax collected, exemption status",
+    status: "Excise on",
+    tone: "blue",
+  },
+  {
+    enabled: pactReportingEnabled,
+    title: "PACT Act Shipment Reports",
+    source: "Orders, shipments, customer address, carrier record",
+    fields:
+      "seller registration, customer name and address, destination state, city, ZIP, invoice or memo ID, brand, quantity, delivery-party name, delivery-party address, delivery-party phone, local or tribal copies",
+    status: "PACT active",
+    tone: "amber",
+  },
+  {
+    enabled: ageVerificationEnabled,
+    title: "Tobacco 21 Verification",
+    source: "Customer verification evidence",
+    fields:
+      "minimum age, date of birth result, photo ID check, verification status, method, evidence ID, freshness, timestamp, review owner, pass or fail reason",
+    status: "Age checks on",
+    tone: "teal",
+  },
+  {
+    enabled: regulatedEnabled,
+    title: "Restricted Product Sales",
+    source: "Catalog attributes, jurisdiction rules, orders",
+    fields:
+      "category, restricted states, allowed destinations, adult signature requirement, product claims evidence, refund and void adjustments, shipment hold reason",
+    status: "Regulated",
+    tone: "violet",
+  },
+].filter((group) => group.enabled);
+---
+
+<!-- agent-hook:reporting-tab -->
+<section id="reporting" class="band reporting-tab" aria-labelledby="admin-tab-reporting reporting-title" data-admin-panel data-agent-scope="reporting" role="tabpanel">
+  <div class="section-title">
+    <div>
+      <h2 id="reporting-title">Reporting</h2>
+      <p>Sales, product, customer, fulfillment, refund, and exception reporting with regulated reports added when the tenant needs them.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button"><svg><use href="#i-refresh"></use></svg>Refresh</button>
+      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
+    </div>
+  </div>
+
+  <div class="report-card-grid">
+    {reporting.summaries.map((summary) => (
+      <a class="report-card" href={summary.drilldownHref}>
+        <div class="report-card-head">
+          <span class:list={["chip", CATEGORY_TONE[summary.category] ?? ""]}>{summary.label}</span>
+          <span class:list={["trend", TREND_TONE[summary.trend]]}>{TREND_LABEL[summary.trend]}</span>
+        </div>
+        <strong>{summary.value}</strong>
+        <p>{summary.headline}</p>
+      </a>
+    ))}
+  </div>
+
+  <div class="panel analysis-panel">
+    <div class="panel-head">
+      <h3><svg><use href="#i-ask"></use></svg>Analysis Brief</h3>
+      <span class="chip blue">Evidence-linked</span>
+    </div>
+    <div class="panel-body grid">
+      <div class="analysis-group">
+        <h4>Drivers</h4>
+        {reporting.analysisBrief.drivers.length === 0 ? (
+          <p class="note">No notable drivers this period.</p>
+        ) : (
+          reporting.analysisBrief.drivers.map((item) => (
+            <a class="analysis-item" href={item.drilldownHref}>
+              <div>
+                <b>{item.title}</b>
+                <p>{item.detail}</p>
+              </div>
+              <span class="chip teal">{item.evidenceRef}</span>
+            </a>
+          ))
+        )}
+      </div>
+      <div class="analysis-group">
+        <h4>Watch items</h4>
+        {reporting.analysisBrief.watchItems.length === 0 ? (
+          <p class="note">Nothing flagged for follow-up.</p>
+        ) : (
+          reporting.analysisBrief.watchItems.map((item) => (
+            <a class="analysis-item" href={item.drilldownHref}>
+              <div>
+                <b>{item.title}</b>
+                <p>{item.detail}</p>
+              </div>
+              <span class="chip amber">{item.evidenceRef}</span>
+            </a>
+          ))
+        )}
+      </div>
+    </div>
+  </div>
+
+  <div class:list={["ship-gate", regulatedReportCount ? "" : "amber"]}>
+    <div class="ship-gate-main">
+      <span class="seal"><svg><use href={regulatedReportCount ? "#i-check" : "#i-alert"}></use></svg></span>
+      <div>
+        <b>{regulatedReportCount ? "Regulated Reports Available" : "No Regulated Reports Enabled"}</b>
+        <span>
+          {regulatedReportCount
+            ? `${regulatedReportCount} regulated report set${regulatedReportCount === 1 ? "" : "s"} will pull the required attributes into exports for ${tenant.displayName ?? tenant.appDomain}.`
+            : "This tenant still sees commerce reporting, while compliance, tax, and PACT packets stay quiet until enabled."}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="grid reporting-workspace">
+    <div class="panel">
+      <div class="panel-head">
+        <h3><svg><use href="#i-file"></use></svg>Monthly Visibility</h3>
+        <span class:list={["chip", monthlyRows.length ? "teal" : ""]}>{monthlyRows.length ? "Regulated calendar" : "Commerce only"}</span>
+      </div>
+      <div class="panel-body grid">
+        {monthlyRows.length ? (
+          <div class="table-wrap monthly-table-wrap">
+            <table class="monthly-table">
+              <thead>
+                <tr>
+                  <th>Report</th>
+                  <th>Period</th>
+                  <th>Cadence</th>
+                  <th>Owner</th>
+                  <th>Readiness</th>
+                  <th>Status</th>
+                  <th class="action">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {monthlyRows.map((row) => (
+                  <tr>
+                    <td><strong>{row.report}</strong><span class="subtle">Monthly report package</span></td>
+                    <td><strong>{row.period}</strong></td>
+                    <td><span class="subtle">{row.cadence}</span></td>
+                    <td><strong>{row.owner}</strong></td>
+                    <td><span class="subtle">{row.readiness}</span></td>
+                    <td><span class:list={["chip", row.tone]}>{row.status}</span></td>
+                    <td class="action"><button class="btn" type="button">{row.action}</button></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div class="field">
+            <label>Monthly regulated reports</label>
+            <strong>Not enabled for this tenant</strong>
+            <p>Excise tax, PACT packets, and regulated reorder forms appear here when those capabilities or tenant policies are active.</p>
+          </div>
+        )}
+      </div>
+    </div>
+
+    <aside class="panel report-detail-panel" aria-labelledby="report-detail-title">
+      <div class="panel-head">
+        <h3 id="report-detail-title"><svg><use href="#i-shield"></use></svg>Required Fields</h3>
+        <span class:list={["chip", requiredFieldGroups.length ? "green" : ""]}>{requiredFieldGroups.length ? "Auto-pulled" : "No regulated fields"}</span>
+      </div>
+      <div class="panel-body grid">
+        {requiredFieldGroups.length ? (
+          requiredFieldGroups.map((group) => (
+            <div class="required-field-set">
+              <div class="required-field-head">
+                <div>
+                  <strong>{group.title}</strong>
+                  <span>{group.source}</span>
+                </div>
+                <span class:list={["chip", group.tone]}>{group.status}</span>
+              </div>
+              <p>{group.fields}</p>
+            </div>
+          ))
+        ) : (
+          <div class="field">
+            <label>Regulated field groups</label>
+            <strong>Hidden until enabled</strong>
+            <p>The report builder only asks for regulated fields when the tenant policy or capability requires them.</p>
+          </div>
+        )}
+      </div>
+    </aside>
+  </div>
+</section>
+
+<style>
+  .report-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+  }
+
+  .report-card {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    text-decoration: none;
+  }
+
+  .report-card:hover {
+    border-color: var(--admin-teal);
+  }
+
+  .report-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .trend {
+    font-size: 13px;
+    font-weight: 760;
+  }
+
+  .trend.green {
+    color: var(--admin-green);
+  }
+
+  .trend.red {
+    color: var(--admin-red);
+  }
+
+  .report-card > strong {
+    font-size: 20px;
+  }
+
+  .report-card p {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .analysis-panel {
+    border-color: #b9c9ec;
+    background: #fbfcff;
+  }
+
+  .analysis-group {
+    display: grid;
+    gap: 8px;
+  }
+
+  .analysis-group h4 {
+    margin: 0;
+    font-size: 13px;
+  }
+
+  .analysis-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    text-decoration: none;
+  }
+
+  .analysis-item:hover {
+    border-color: var(--admin-teal);
+  }
+
+  .analysis-item b {
+    display: block;
+    font-size: 13px;
+  }
+
+  .analysis-item p {
+    margin: 2px 0 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .reporting-workspace {
+    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
+  }
+
+  .monthly-table {
+    min-width: 940px;
+  }
+
+  .required-field-set {
+    display: grid;
+    gap: 8px;
+    padding: 11px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: #fcfdfc;
+  }
+
+  .required-field-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .required-field-head > div {
+    flex: 1 1 150px;
+    min-width: 0;
+  }
+
+  .required-field-head strong {
+    display: block;
+  }
+
+  .required-field-head span:not(.chip) {
+    display: block;
+    margin-top: 2px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .required-field-set p {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  @media (max-width: 1120px) {
+    .reporting-workspace {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 760px) {
+    .reporting-workspace {
+      grid-template-columns: 1fr;
+    }
+
+    .analysis-item,
+    .required-field-head {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+</style>