Distributions Authority (DAL) — UI/UX Specs for DAL Dashboard (Phase 0 — High-Level)

Document Version: 1.0 Date: August 8, 2025 Author: CrownThrive, LLC — [email protected] Project: CHLOM™ — Compliance Hybrid Licensing & Ownership Model

1. Objective

Define the high-level UX strategy, information architecture, and component system for the DAL Dashboard that serves internal operators, license issuers, rightsholders, and auditors. Phase 0 establishes personas, core views, data contracts, and accessibility/performance baselines to guide design and implementation in later phases.

2. Personas & Role-Based Access

• DAL Operator (Internal) — Monitors payout queues, overrides with DAO authorization, reviews anomalies.
• Issuer (DLA-Verified) — Views license-linked earnings, configures splits, requests disputes.
• Rightsholder/Beneficiary — Tracks royalties, verifies identity, updates DID routing.
• Auditor/Regulator (Read-Only) — Reviews immutable logs, ZK attestations, compliance outcomes.

RBAC (Phase 0 Rules): View-only by default; write actions gated by DID + Fingerprint ID + policy claims; high-risk actions require DAO multi-sig.

3. Core User Journeys

1. Payout Monitoring → Filter by license ID, status, risk score → Drill into event → View ZK proof → Export receipt.
2. Configure Splits → Add stakeholders + percentages → Validate totals → Simulate → Save draft (pending DAO).
3. Resolve Dispute → Flag transaction → Auto-hold escrow → Submit evidence → DAO vote → Auto-release.
4. Identity Update → Re-verify Fingerprint ID → Rotate payout wallet via DID → Confirm routing.
5. Compliance Review → Open case → See rule matches, clauses, jurisdiction → Approve/deny.

4. Information Architecture (IA)

• Top Nav: Dashboard · Payouts · Licenses · Compliance · Disputes · Settings · Audit Logs
• Global Elements: Search (license ID/tx hash/DID), Risk banner, Status chips, Time-range selector.
• Key Panels:
• Payouts: Queue, Batch ops, Real-time feed.
• Details: Entitlements, beneficiaries, split table, proofs, ledger links.
• Compliance: Jurisdiction map, rule hits, anomaly graph.
• Disputes: Case timeline, evidence vault, DAO decisions.
• Settings: Identity & Routing, Notification rules, API keys.

5. Screen Specs (High-Level)

5.1 Dashboard (Overview)

• Widgets: Today’s payouts, Held in escrow, High-risk alerts, Throughput, Avg latency, Error rate.
• Actions: View queue, Open anomalies, Export report.

5.2 Payout Detail

• Tabs: Summary · Beneficiaries · Compliance · Proofs · History
• Data: License ID, Tx hash, Amount, Split table, DID routes, Fingerprint verification status, ZK-proof link.

5.3 Split Designer

• Elements: Stakeholder picker (DID), Percentage inputs, Validation badge, Simulation results (slippage, fees), DAO submit.

5.4 Dispute Center

• Elements: Case list, Evidence upload (hashing client-side), DAO timeline, Resolution outcome, Contract action log.

5.5 Audit Logs

• Filters: Actor DID, Action, Result, Range.
• Export: CSV/JSON; signed receipt with ledger pointer.

6. Component System (Design Tokens & Primitives)

• Tokens: spacing, radius, elevation, typography scale, semantic states (success/warn/danger/info).
• Primitives: Button, Chip, Tag, Badge, Card, Table, Drawer, Modal, Stepper, CodeBlock, EmptyState, Skeleton.
• Composites: SplitTable, RiskMeter, ComplianceMap, ProofViewer, DisputeTimeline.

7. Accessibility (A11y) Baseline

• WCAG 2.2 AA contrast/pass.
• Keyboard-only flows; focus traps in modals; skip links.
• ARIA for live regions (real-time feed).
• Color-independence for status (use icons/text labels).

8. Performance & Telemetry

• Initial view TTI < 2.5s on baseline hardware; live feed chunked/paginated.
• Client-side caching; optimistic UI for non-final states.
• Telemetry events: view_opened, queue_filtered, split_saved, dispute_opened, proof_viewed.
• Privacy: No PII in logs; use DID references; redact sensitive fields.

9. Data Contracts (Sample Schemas)

// Payout Detail (read)
{
  "licenseId": "LIC-9F3C",
  "txHash": "0x...",
  "amount": "1234.56",
  "currency": "USDC",
  "status": "HELD|READY|PAID|DISPUTED",
  "beneficiaries": [
    { "did": "did:chlom:abc", "percent": 62.5 },
    { "did": "did:chlom:def", "percent": 37.5 }
  ],
  "identity": { "fingerprintVerified": true, "didRoutes": ["evm:0x...","sol:..."] },
  "proofs": { "zk": "ipfs://cid", "ledger": "ledger://block/123" },
  "risk": { "score": 0.03, "flags": [] }
}

// Split Designer (write)
{
  "licenseId": "LIC-9F3C",
  "splits": [
    { "did": "did:chlom:abc", "percent": 60.0 },
    { "did": "did:chlom:def", "percent": 40.0 }
  ],
  "effectiveFrom": "2025-09-01",
  "simulation": true
}

10. Example UI Skeleton (React)

export default function DalPayoutDetail() {
  return (
    <div className="grid gap-6">
      <header className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold">Payout Detail</h1>
        <div className="flex gap-2">
          <button>Export</button>
          <button>View Proof</button>
        </div>
      </header>
      <section className="grid gap-4">
        <div className="card">{/* Summary */}</div>
        <div className="card">{/* Beneficiaries (SplitTable) */}</div>
        <div className="card">{/* Compliance */}</div>
        <div className="card">{/* ProofViewer */}</div>
        <div className="card">{/* History */}</div>
      </section>
    </div>
  );
}

11. Phase Allocation

Phase 0 — Define IA, roles, core screens, data contracts, and accessibility/performance baselines. Phase 1 — Build component library and skeleton screens; wire to mock APIs. Phase 2 — Integrate identity, compliance, and proofs; implement split designer flows. Phase 3 — Harden for security; add dispute workflows and exports. Phase 4 — DAO action surfaces and governance hooks. Phase 5 — Optimization, theming for partner deployments, localized compliance modules.

Next Step: Proceed to API Design Docs for DAL (Phase 0) to specify endpoints, authentication, rate limits, and error taxonomies aligned with DLA/LEX integrations.