{
  "name": "dashboard-chart-recent",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "slots": [],
  "nested": [
    "card-header-with-description"
  ],
  "attrs": {
    "columns": "1 5@md",
    "gap": "4"
  },
  "html": "<grid-ui columns=\"1 5@md\" gap=\"4\">\n            <card-ui span=\"3\">\n              <header><!-- nested: card-header-with-description --></header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n                  <grid-ui columns=\"1 2@sm\" gap=\"3\">\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n                      </section>\n                    </card-ui>\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n                      </section>\n                    </card-ui>\n                  </grid-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n              </footer>\n            </card-ui>\n            <card-ui span=\"2\">\n              <header>\n                <h3>Recent Sales</h3>\n                <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n                          <text-ui strong>+$1,999.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n                          <text-ui strong>+$299.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n                          <text-ui strong>+$99.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">will@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "metadata": {
    "domain": "dashboard",
    "description": "Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.",
    "keywords": [
      "sales",
      "report",
      "bar",
      "chart",
      "chart-ui",
      "revenue",
      "monthly",
      "overview",
      "split",
      "pane",
      "two",
      "column",
      "side",
      "by",
      "side",
      "recent",
      "sales",
      "customer",
      "list",
      "timeseries",
      "graph",
      "trend",
      "responsive",
      "breakpoint"
    ],
    "related": [
      "dashboard-spark-cards",
      "dashboard-overview-panel"
    ],
    "tags": {
      "complexity": "simple",
      "layout": "card"
    }
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Overview"
    },
    {
      "id": "text-2",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "Monthly revenue for 2026"
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "header-2"
      ]
    },
    {
      "id": "dash-overview",
      "component": "Chart",
      "type": "bar",
      "x": "month",
      "y": "revenue"
    },
    {
      "id": "stat",
      "component": "Stat",
      "change": "+12% vs last month",
      "label": "This Month",
      "trend": "up",
      "value": "$5,400"
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "stat"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "stat-2",
      "component": "Stat",
      "change": "On track for $65k target",
      "label": "Yearly Total",
      "trend": "neutral",
      "value": "$59,100"
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "stat-2"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 2@sm",
      "gap": "3",
      "children": [
        "card-2",
        "card-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "dash-overview",
        "grid"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "stretch": true,
      "text": "View Full Report",
      "variant": "outline"
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "button"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "heading",
      "textContent": "Recent Sales"
    },
    {
      "id": "text-4",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "You made 265 sales this month."
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "sm",
      "text": "Olivia Martin"
    },
    {
      "id": "text-5",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Olivia Martin"
    },
    {
      "id": "text-6",
      "component": "Text",
      "strong": true,
      "textContent": "+$1,999.00"
    },
    {
      "id": "row-2",
      "component": "Row",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "textContent": "olivia.martin@email.com"
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "0",
      "grow": true,
      "children": [
        "row-2",
        "text-7"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "grow": true,
      "children": [
        "avatar",
        "column-4"
      ]
    },
    {
      "id": "list-item",
      "component": "ListItem",
      "children": [
        "row"
      ]
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "size": "sm",
      "text": "Jackson Lee"
    },
    {
      "id": "text-8",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Jackson Lee"
    },
    {
      "id": "text-9",
      "component": "Text",
      "strong": true,
      "textContent": "+$39.00"
    },
    {
      "id": "row-4",
      "component": "Row",
      "children": [
        "text-8",
        "text-9"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "textContent": "jackson.lee@email.com"
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "0",
      "grow": true,
      "children": [
        "row-4",
        "text-10"
      ]
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "grow": true,
      "children": [
        "avatar-2",
        "column-5"
      ]
    },
    {
      "id": "list-item-2",
      "component": "ListItem",
      "children": [
        "row-3"
      ]
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "size": "sm",
      "text": "Isabella Nguyen"
    },
    {
      "id": "text-11",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Isabella Nguyen"
    },
    {
      "id": "text-12",
      "component": "Text",
      "strong": true,
      "textContent": "+$299.00"
    },
    {
      "id": "row-6",
      "component": "Row",
      "children": [
        "text-11",
        "text-12"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "color": "subtle",
      "textContent": "isabella.nguyen@email.com"
    },
    {
      "id": "column-6",
      "component": "Column",
      "gap": "0",
      "grow": true,
      "children": [
        "row-6",
        "text-13"
      ]
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "grow": true,
      "children": [
        "avatar-3",
        "column-6"
      ]
    },
    {
      "id": "list-item-3",
      "component": "ListItem",
      "children": [
        "row-5"
      ]
    },
    {
      "id": "avatar-4",
      "component": "Avatar",
      "size": "sm",
      "text": "William Kim"
    },
    {
      "id": "text-14",
      "component": "Text",
      "weight": "semibold",
      "textContent": "William Kim"
    },
    {
      "id": "text-15",
      "component": "Text",
      "strong": true,
      "textContent": "+$99.00"
    },
    {
      "id": "row-8",
      "component": "Row",
      "children": [
        "text-14",
        "text-15"
      ]
    },
    {
      "id": "text-16",
      "component": "Text",
      "color": "subtle",
      "textContent": "will@email.com"
    },
    {
      "id": "column-7",
      "component": "Column",
      "gap": "0",
      "grow": true,
      "children": [
        "row-8",
        "text-16"
      ]
    },
    {
      "id": "row-7",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "grow": true,
      "children": [
        "avatar-4",
        "column-7"
      ]
    },
    {
      "id": "list-item-4",
      "component": "ListItem",
      "children": [
        "row-7"
      ]
    },
    {
      "id": "avatar-5",
      "component": "Avatar",
      "size": "sm",
      "text": "Sofia Davis"
    },
    {
      "id": "text-17",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Sofia Davis"
    },
    {
      "id": "text-18",
      "component": "Text",
      "strong": true,
      "textContent": "+$39.00"
    },
    {
      "id": "row-10",
      "component": "Row",
      "children": [
        "text-17",
        "text-18"
      ]
    },
    {
      "id": "text-19",
      "component": "Text",
      "color": "subtle",
      "textContent": "sofia.davis@email.com"
    },
    {
      "id": "column-8",
      "component": "Column",
      "gap": "0",
      "grow": true,
      "children": [
        "row-10",
        "text-19"
      ]
    },
    {
      "id": "row-9",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "grow": true,
      "children": [
        "avatar-5",
        "column-8"
      ]
    },
    {
      "id": "list-item-5",
      "component": "ListItem",
      "children": [
        "row-9"
      ]
    },
    {
      "id": "list",
      "component": "List",
      "divider": true,
      "children": [
        "list-item",
        "list-item-2",
        "list-item-3",
        "list-item-4",
        "list-item-5"
      ]
    },
    {
      "id": "section-4",
      "component": "Section",
      "children": [
        "column-9"
      ]
    },
    {
      "id": "column-9",
      "component": "Column",
      "children": [
        "list"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "children": [
        "header-3",
        "section-4"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "1 5@md",
      "gap": "4",
      "children": [
        "card",
        "card-4"
      ]
    }
  ]
}