bible/demo/web/templates/operator_tools_pattern.html

{{ define "operator_tools_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Universal operator/admin dashboard pattern: tool queue, batch actions, safety checks, import/export shortcuts, and explicit confirmation paths." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel panel-composite" id="operator-workbench">
      <div class="panel-subsection" id="operator-filters">
      <div class="panel-head">
        <h2>Tool Scope Tabs</h2>
        <div class="meta">{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected</div>
      </div>
      <div class="segmented">
        <a class="segment {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
        <a class="segment {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
        <a class="segment {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
        <a class="segment {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
        <a class="segment {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
      </div>
      <div class="segmented" style="margin-top:10px;">
        <a class="segment {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
        <a class="segment {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
        <a class="segment {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
        <a class="segment {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
        <a class="segment {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
      </div>
      </div>

      <div class="panel-subsection panel-subsection-divider" id="operator-actions">
      <div class="panel-head">
        <h2>Operator Tooling Actions</h2>
        <div class="meta">Batch controls must keep scope/filter context explicit</div>
      </div>
      {{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
      <p class="meta" style="margin-bottom:12px;">
        Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
      </p>
      <div class="bulk-bar">
        <a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
        <a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
        <a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
        <a class="btn btn-primary" href="{{ .RunSelectedURL }}">Run selected</a>
        <a class="btn btn-secondary" href="{{ .RetrySelectedURL }}">Retry selected</a>
        <a class="btn btn-danger" href="{{ .CancelSelectedURL }}">Cancel selected</a>
        <a class="btn btn-secondary" href="{{ .OpenReviewModalURL }}">Open confirm modal</a>
      </div>
      <div class="button-demo-row" style="margin-top:12px;">
        <a class="btn btn-secondary" href="{{ .ImportPreviewURL }}">Import batch preview</a>
        <a class="btn btn-secondary" href="{{ .ExportFilteredURL }}">Export filtered</a>
        <a class="btn btn-secondary" href="{{ .ExportSelectedURL }}">Export selected</a>
      </div>
      </div>

      <div class="panel-subsection panel-subsection-divider" id="operator-queue">
      <div class="panel-head">
        <h2>Operations Queue</h2>
        <div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
      </div>
      <div class="table-wrap">
        <table class="ui-table">
          <thead>
            <tr>
              <th>Select</th>
              <th>Job ID</th>
              <th>Tool</th>
              <th>Scope</th>
              <th>Mode</th>
              <th>Status</th>
              <th>Owner</th>
              <th>Started</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {{ range .Rows }}
            <tr>
              <td><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
              <td><code>{{ .ID }}</code></td>
              <td>{{ .Tool }}</td>
              <td>{{ .Scope }}</td>
              <td>{{ .Mode }}</td>
              <td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
              <td>{{ .Owner }}</td>
              <td>{{ .StartedAt }}</td>
              <td class="action-cell">
                <a class="text-link" href="{{ .RetryURL }}">Retry</a>
                <a class="text-link" href="{{ .CancelURL }}">Cancel</a>
                <a class="text-link" href="{{ .ExportURL }}">Export</a>
                <a class="text-link" href="{{ .InspectURL }}">Inspect</a>
              </td>
            </tr>
            {{ else }}
            <tr><td colspan="9"><span class="meta">No queued items for this scope/filter combination.</span></td></tr>
            {{ end }}
          </tbody>
        </table>
      </div>
      </div>
    </section>

    <section class="panel" id="operator-safety">
      <div class="panel-head"><h2>Safety Checklist</h2></div>
      <ul class="meta">
        {{ range .SafetyChecklist }}
        <li>{{ . }}</li>
        {{ end }}
      </ul>
      <div class="panel-head" style="margin-top:14px;"><h2>Recent Operator Notes</h2></div>
      <ul class="meta">
        {{ range .RecentActivityNotes }}
        <li>{{ . }}</li>
        {{ end }}
      </ul>
    </section>
{{ template "demo_doc_end" . }}
{{ end }}