{
  "name": "drawer-report",
  "kind": "block",
  "primary": "drawer-ui",
  "page": "/apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "side": "right",
    "size": "md"
  },
  "html": "<drawer-ui id=\"drawer-report\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chart-line\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong data-report-name>Report</text-ui>\n      <badge-ui data-report-status text=\"Active\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\" data-report-meta>Scheduled delivery configuration.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"1 2@sm\" gap=\"3\">\n        <card-ui\n          ><section><stat-ui label=\"Last run\" data-report-last value=\"—\"></stat-ui></section\n        ></card-ui>\n        <card-ui\n          ><section><stat-ui label=\"Recipients\" data-report-recipients value=\"—\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Schedule</text-ui>\n        <field-ui label=\"Frequency\">\n          <select-ui value=\"weekly\">\n            <option value=\"hourly\">Hourly</option>\n            <option value=\"daily\">Daily</option>\n            <option value=\"weekly\">Weekly</option>\n            <option value=\"monthly\">Monthly</option>\n            <option value=\"realtime\">Real-time (triggered)</option>\n          </select-ui>\n        </field-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"Day\">\n            <select-ui value=\"mon\" grow>\n              <option value=\"mon\">Monday</option>\n              <option value=\"tue\">Tuesday</option>\n              <option value=\"wed\">Wednesday</option>\n              <option value=\"thu\">Thursday</option>\n              <option value=\"fri\">Friday</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Time\">\n            <input-ui value=\"09:00\" type=\"time\" grow></input-ui>\n          </field-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui value=\"utc\" grow>\n              <option value=\"utc\">UTC</option>\n              <option value=\"pst\">PST</option>\n              <option value=\"est\">EST</option>\n              <option value=\"cet\">CET</option>\n            </select-ui>\n          </field-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Delivery</text-ui>\n        <field-ui label=\"Recipients\">\n          <textarea-ui rows=\"2\" value=\"alex@acme.com, sarah@acme.com, finance@acme.com\" hint=\"Comma-separated email addresses.\"></textarea-ui>\n        </field-ui>\n        <field-ui label=\"Format\">\n          <select-ui value=\"pdf\">\n            <option value=\"pdf\">PDF</option>\n            <option value=\"csv\">CSV</option>\n            <option value=\"xlsx\">Excel (xlsx)</option>\n            <option value=\"slack\">Post to Slack</option>\n          </select-ui>\n        </field-ui>\n        <field-ui label=\"Attach raw data export\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include AI summary\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Scope</text-ui>\n        <field-ui label=\"Date range\">\n          <select-ui value=\"last-7-days\">\n            <option value=\"last-24h\">Last 24 hours</option>\n            <option value=\"last-7-days\">Last 7 days</option>\n            <option value=\"last-30-days\">Last 30 days</option>\n            <option value=\"mtd\">Month-to-date</option>\n            <option value=\"custom\">Custom range</option>\n          </select-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Pause\" icon=\"pause\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Run now\" icon=\"play\" variant=\"outline\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Create or edit report drawer — report name, date range, metric selection, schedule.",
    "keywords": [
      "drawer",
      "report",
      "create",
      "edit",
      "schedule",
      "metrics",
      "analytics"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "avatar",
      "component": "Avatar",
      "icon": "chart-line"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "avatar"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Report",
      "data-report-name": ""
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "Active",
      "variant": "success",
      "data-report-status": ""
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-3",
        "badge"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "slot": "action"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2",
        "text-4"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Scheduled delivery configuration.",
      "data-report-meta": ""
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "stat",
      "component": "Stat",
      "label": "Last run",
      "value": "—",
      "data-report-last": ""
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "stat"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "stat-2",
      "component": "Stat",
      "label": "Recipients",
      "value": "—",
      "data-report-recipients": ""
    },
    {
      "id": "section-4",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "stat-2"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-4"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 2@sm",
      "gap": "3",
      "children": [
        "card",
        "card-2"
      ]
    },
    {
      "id": "divider",
      "component": "Divider"
    },
    {
      "id": "text-6",
      "component": "Text",
      "strong": true,
      "textContent": "Schedule"
    },
    {
      "id": "choice-picker",
      "component": "ChoicePicker",
      "value": "weekly",
      "options": [
        {
          "value": "hourly",
          "label": "Hourly"
        },
        {
          "value": "daily",
          "label": "Daily"
        },
        {
          "value": "weekly",
          "label": "Weekly"
        },
        {
          "value": "monthly",
          "label": "Monthly"
        },
        {
          "value": "realtime",
          "label": "Real-time (triggered)"
        }
      ]
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Frequency",
      "children": [
        "choice-picker"
      ]
    },
    {
      "id": "choice-picker-2",
      "component": "ChoicePicker",
      "value": "mon",
      "options": [
        {
          "value": "mon",
          "label": "Monday"
        },
        {
          "value": "tue",
          "label": "Tuesday"
        },
        {
          "value": "wed",
          "label": "Wednesday"
        },
        {
          "value": "thu",
          "label": "Thursday"
        },
        {
          "value": "fri",
          "label": "Friday"
        }
      ]
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Day",
      "children": [
        "choice-picker-2"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "type": "time",
      "value": "09:00"
    },
    {
      "id": "field-3",
      "component": "Field",
      "label": "Time",
      "children": [
        "input"
      ]
    },
    {
      "id": "choice-picker-3",
      "component": "ChoicePicker",
      "value": "utc",
      "options": [
        {
          "value": "utc",
          "label": "UTC"
        },
        {
          "value": "pst",
          "label": "PST"
        },
        {
          "value": "est",
          "label": "EST"
        },
        {
          "value": "cet",
          "label": "CET"
        }
      ]
    },
    {
      "id": "field-4",
      "component": "Field",
      "label": "Timezone",
      "children": [
        "choice-picker-3"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "children": [
        "field-2",
        "field-3",
        "field-4"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-6",
        "field",
        "row"
      ]
    },
    {
      "id": "divider-2",
      "component": "Divider"
    },
    {
      "id": "text-7",
      "component": "Text",
      "strong": true,
      "textContent": "Delivery"
    },
    {
      "id": "text-area",
      "component": "TextArea",
      "hint": "Comma-separated email addresses.",
      "rows": "2",
      "value": "alex@acme.com, sarah@acme.com, finance@acme.com"
    },
    {
      "id": "field-5",
      "component": "Field",
      "label": "Recipients",
      "children": [
        "text-area"
      ]
    },
    {
      "id": "choice-picker-4",
      "component": "ChoicePicker",
      "value": "pdf",
      "options": [
        {
          "value": "pdf",
          "label": "PDF"
        },
        {
          "value": "csv",
          "label": "CSV"
        },
        {
          "value": "xlsx",
          "label": "Excel (xlsx)"
        },
        {
          "value": "slack",
          "label": "Post to Slack"
        }
      ]
    },
    {
      "id": "field-6",
      "component": "Field",
      "label": "Format",
      "children": [
        "choice-picker-4"
      ]
    },
    {
      "id": "toggle",
      "component": "Toggle",
      "checked": true
    },
    {
      "id": "field-7",
      "component": "Field",
      "inline": true,
      "label": "Attach raw data export",
      "children": [
        "toggle"
      ]
    },
    {
      "id": "toggle-2",
      "component": "Toggle"
    },
    {
      "id": "field-8",
      "component": "Field",
      "inline": true,
      "label": "Include AI summary",
      "children": [
        "toggle-2"
      ]
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-7",
        "field-5",
        "field-6",
        "field-7",
        "field-8"
      ]
    },
    {
      "id": "divider-3",
      "component": "Divider"
    },
    {
      "id": "text-8",
      "component": "Text",
      "strong": true,
      "textContent": "Scope"
    },
    {
      "id": "choice-picker-5",
      "component": "ChoicePicker",
      "value": "last-7-days",
      "options": [
        {
          "value": "last-24h",
          "label": "Last 24 hours"
        },
        {
          "value": "last-7-days",
          "label": "Last 7 days"
        },
        {
          "value": "last-30-days",
          "label": "Last 30 days"
        },
        {
          "value": "mtd",
          "label": "Month-to-date"
        },
        {
          "value": "custom",
          "label": "Custom range"
        }
      ]
    },
    {
      "id": "field-9",
      "component": "Field",
      "label": "Date range",
      "children": [
        "choice-picker-5"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-8",
        "field-9"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "grid",
        "divider",
        "column-4",
        "divider-2",
        "column-5",
        "divider-3",
        "column-6"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "pause",
      "text": "Pause",
      "variant": "ghost"
    },
    {
      "id": "button-2",
      "component": "Button",
      "icon": "play",
      "text": "Run now",
      "variant": "outline"
    },
    {
      "id": "button-3",
      "component": "Button",
      "text": "Save changes",
      "variant": "primary"
    },
    {
      "id": "grid-2",
      "component": "Grid",
      "children": [
        "button",
        "button-2",
        "button-3"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "slot": "footer",
      "children": [
        "grid-2"
      ]
    },
    {
      "id": "root",
      "component": "Drawer",
      "side": "right",
      "size": "md",
      "children": [
        "header",
        "section",
        "section-2",
        "footer"
      ]
    }
  ]
}