@adia-ai/a2ui-corpus 0.0.1

package/patterns/data/admin-dashboard-with-charts.json

@@ -0,0 +1,755 @@
+{
+  "$schema": "../_schema.json",
+  "name": "admin-dashboard-with-charts",
+  "version": 2,
+  "domain": "data",
+  "description": "Admin dashboard layout with KPI stat cards, multiple analytics charts (bar, line, pie), a recent activity feed, and export controls.",
+  "tags": {
+    "purpose": [
+      "administration",
+      "analytics",
+      "visualization",
+      "data-display"
+    ],
+    "complexity": "complex",
+    "layout": "grid",
+    "interaction": [
+      "export",
+      "filter"
+    ]
+  },
+  "keywords": [
+    "admin",
+    "dashboard",
+    "analytics",
+    "charts",
+    "graphs",
+    "metrics",
+    "kpi",
+    "reports",
+    "insights",
+    "statistics",
+    "overview",
+    "monitoring",
+    "operations",
+    "business-intelligence",
+    "revenue",
+    "users",
+    "performance",
+    "backoffice",
+    "console"
+  ],
+  "related": [
+    "chart-dashboard",
+    "dashboard",
+    "stat-cards",
+    "metrics",
+    "team-activity"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Column",
+      "gap": "5",
+      "children": [
+        "header",
+        "kpis",
+        "charts",
+        "bottom"
+      ]
+    },
+    {
+      "id": "header",
+      "component": "Row",
+      "justify": "between",
+      "align": "center",
+      "children": [
+        "header-text",
+        "header-actions"
+      ]
+    },
+    {
+      "id": "header-text",
+      "component": "Column",
+      "gap": "1",
+      "children": [
+        "h-title",
+        "h-sub"
+      ]
+    },
+    {
+      "id": "h-title",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "Admin Dashboard"
+    },
+    {
+      "id": "h-sub",
+      "component": "Text",
+      "color": "muted",
+      "variant": "caption",
+      "textContent": "Overview of system performance and activity"
+    },
+    {
+      "id": "header-actions",
+      "component": "Row",
+      "gap": "2",
+      "children": [
+        "range-select-field",
+        "export-btn",
+        "refresh-btn"
+      ]
+    },
+    {
+      "id": "range-select-field",
+      "component": "Field",
+      "label": "Range",
+      "children": [
+        "range-select"
+      ]
+    },
+    {
+      "id": "range-select",
+      "component": "Select",
+      "name": "range",
+      "placeholder": "Last 30 days"
+    },
+    {
+      "id": "export-btn",
+      "component": "Button",
+      "text": "Export",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "download"
+    },
+    {
+      "id": "refresh-btn",
+      "component": "Button",
+      "text": "Refresh",
+      "variant": "ghost",
+      "size": "sm",
+      "icon": "refresh"
+    },
+    {
+      "id": "kpis",
+      "component": "Grid",
+      "columns": "4",
+      "gap": "4",
+      "children": [
+        "kpi1",
+        "kpi2",
+        "kpi3",
+        "kpi4"
+      ]
+    },
+    {
+      "id": "kpi1",
+      "component": "Card",
+      "children": [
+        "kpi1-h",
+        "kpi1-s"
+      ]
+    },
+    {
+      "id": "kpi1-h",
+      "component": "Header",
+      "children": [
+        "kpi1-l"
+      ]
+    },
+    {
+      "id": "kpi1-l",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "label",
+      "textContent": "Total Revenue"
+    },
+    {
+      "id": "kpi1-s",
+      "component": "Section",
+      "children": [
+        "kpi1-v",
+        "kpi1-b"
+      ]
+    },
+    {
+      "id": "kpi1-v",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "$128,420"
+    },
+    {
+      "id": "kpi1-b",
+      "component": "Badge",
+      "text": "+18.2%",
+      "variant": "success",
+      "size": "sm"
+    },
+    {
+      "id": "kpi2",
+      "component": "Card",
+      "children": [
+        "kpi2-h",
+        "kpi2-s"
+      ]
+    },
+    {
+      "id": "kpi2-h",
+      "component": "Header",
+      "children": [
+        "kpi2-l"
+      ]
+    },
+    {
+      "id": "kpi2-l",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "label",
+      "textContent": "Active Users"
+    },
+    {
+      "id": "kpi2-s",
+      "component": "Section",
+      "children": [
+        "kpi2-v",
+        "kpi2-b"
+      ]
+    },
+    {
+      "id": "kpi2-v",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "9,482"
+    },
+    {
+      "id": "kpi2-b",
+      "component": "Badge",
+      "text": "+6.4%",
+      "variant": "success",
+      "size": "sm"
+    },
+    {
+      "id": "kpi3",
+      "component": "Card",
+      "children": [
+        "kpi3-h",
+        "kpi3-s"
+      ]
+    },
+    {
+      "id": "kpi3-h",
+      "component": "Header",
+      "children": [
+        "kpi3-l"
+      ]
+    },
+    {
+      "id": "kpi3-l",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "label",
+      "textContent": "Conversion"
+    },
+    {
+      "id": "kpi3-s",
+      "component": "Section",
+      "children": [
+        "kpi3-v",
+        "kpi3-b"
+      ]
+    },
+    {
+      "id": "kpi3-v",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "3.82%"
+    },
+    {
+      "id": "kpi3-b",
+      "component": "Badge",
+      "text": "-0.4%",
+      "variant": "danger",
+      "size": "sm"
+    },
+    {
+      "id": "kpi4",
+      "component": "Card",
+      "children": [
+        "kpi4-h",
+        "kpi4-s"
+      ]
+    },
+    {
+      "id": "kpi4-h",
+      "component": "Header",
+      "children": [
+        "kpi4-l"
+      ]
+    },
+    {
+      "id": "kpi4-l",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "label",
+      "textContent": "Support Tickets"
+    },
+    {
+      "id": "kpi4-s",
+      "component": "Section",
+      "children": [
+        "kpi4-v",
+        "kpi4-b"
+      ]
+    },
+    {
+      "id": "kpi4-v",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "142"
+    },
+    {
+      "id": "kpi4-b",
+      "component": "Badge",
+      "text": "12 open",
+      "variant": "warning",
+      "size": "sm"
+    },
+    {
+      "id": "charts",
+      "component": "Grid",
+      "columns": "3",
+      "gap": "4",
+      "children": [
+        "chart-revenue",
+        "chart-users",
+        "chart-breakdown"
+      ]
+    },
+    {
+      "id": "chart-revenue",
+      "component": "Card",
+      "children": [
+        "cr-h",
+        "cr-s"
+      ]
+    },
+    {
+      "id": "cr-h",
+      "component": "Header",
+      "children": [
+        "cr-t"
+      ]
+    },
+    {
+      "id": "cr-t",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "Revenue by Month"
+    },
+    {
+      "id": "cr-s",
+      "component": "Section",
+      "children": [
+        "cr-chart"
+      ]
+    },
+    {
+      "id": "cr-chart",
+      "component": "Chart",
+      "type": "bar",
+      "x": "month",
+      "y": "revenue"
+    },
+    {
+      "id": "chart-users",
+      "component": "Card",
+      "children": [
+        "cu-h",
+        "cu-s"
+      ]
+    },
+    {
+      "id": "cu-h",
+      "component": "Header",
+      "children": [
+        "cu-t"
+      ]
+    },
+    {
+      "id": "cu-t",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "Active Users Trend"
+    },
+    {
+      "id": "cu-s",
+      "component": "Section",
+      "children": [
+        "cu-chart"
+      ]
+    },
+    {
+      "id": "cu-chart",
+      "component": "Chart",
+      "type": "line",
+      "x": "date",
+      "y": "users"
+    },
+    {
+      "id": "chart-breakdown",
+      "component": "Card",
+      "children": [
+        "cb-h",
+        "cb-s"
+      ]
+    },
+    {
+      "id": "cb-h",
+      "component": "Header",
+      "children": [
+        "cb-t"
+      ]
+    },
+    {
+      "id": "cb-t",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "Traffic Source"
+    },
+    {
+      "id": "cb-s",
+      "component": "Section",
+      "children": [
+        "cb-chart"
+      ]
+    },
+    {
+      "id": "cb-chart",
+      "component": "Chart",
+      "type": "pie",
+      "x": "source",
+      "y": "count"
+    },
+    {
+      "id": "bottom",
+      "component": "Grid",
+      "columns": "2",
+      "gap": "4",
+      "children": [
+        "activity-card",
+        "status-card"
+      ]
+    },
+    {
+      "id": "activity-card",
+      "component": "Card",
+      "children": [
+        "ac-h",
+        "ac-s"
+      ]
+    },
+    {
+      "id": "ac-h",
+      "component": "Header",
+      "children": [
+        "ac-t"
+      ]
+    },
+    {
+      "id": "ac-t",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "Recent Activity"
+    },
+    {
+      "id": "ac-s",
+      "component": "Section",
+      "children": [
+        "ac-list"
+      ]
+    },
+    {
+      "id": "ac-list",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "act1",
+        "act2",
+        "act3"
+      ]
+    },
+    {
+      "id": "act1",
+      "component": "Row",
+      "gap": "3",
+      "align": "center",
+      "children": [
+        "act1-av",
+        "act1-info",
+        "act1-time"
+      ]
+    },
+    {
+      "id": "act1-av",
+      "component": "Avatar",
+      "text": "Jordan P.",
+      "size": "sm"
+    },
+    {
+      "id": "act1-info",
+      "component": "Column",
+      "gap": "0",
+      "grow": true,
+      "children": [
+        "act1-msg"
+      ]
+    },
+    {
+      "id": "act1-msg",
+      "component": "Text",
+      "textContent": "Jordan P. approved invoice #4823"
+    },
+    {
+      "id": "act1-time",
+      "component": "Text",
+      "color": "muted",
+      "variant": "caption",
+      "textContent": "2m ago"
+    },
+    {
+      "id": "act2",
+      "component": "Row",
+      "gap": "3",
+      "align": "center",
+      "children": [
+        "act2-av",
+        "act2-info",
+        "act2-time"
+      ]
+    },
+    {
+      "id": "act2-av",
+      "component": "Avatar",
+      "text": "Mei L.",
+      "size": "sm"
+    },
+    {
+      "id": "act2-info",
+      "component": "Column",
+      "gap": "0",
+      "grow": true,
+      "children": [
+        "act2-msg"
+      ]
+    },
+    {
+      "id": "act2-msg",
+      "component": "Text",
+      "textContent": "Mei L. added 3 new users to the team"
+    },
+    {
+      "id": "act2-time",
+      "component": "Text",
+      "color": "muted",
+      "variant": "caption",
+      "textContent": "14m ago"
+    },
+    {
+      "id": "act3",
+      "component": "Row",
+      "gap": "3",
+      "align": "center",
+      "children": [
+        "act3-av",
+        "act3-info",
+        "act3-time"
+      ]
+    },
+    {
+      "id": "act3-av",
+      "component": "Avatar",
+      "text": "System",
+      "size": "sm"
+    },
+    {
+      "id": "act3-info",
+      "component": "Column",
+      "gap": "0",
+      "grow": true,
+      "children": [
+        "act3-msg"
+      ]
+    },
+    {
+      "id": "act3-msg",
+      "component": "Text",
+      "textContent": "Scheduled backup completed successfully"
+    },
+    {
+      "id": "act3-time",
+      "component": "Text",
+      "color": "muted",
+      "variant": "caption",
+      "textContent": "1h ago"
+    },
+    {
+      "id": "status-card",
+      "component": "Card",
+      "children": [
+        "sc-h",
+        "sc-s"
+      ]
+    },
+    {
+      "id": "sc-h",
+      "component": "Header",
+      "children": [
+        "sc-t"
+      ]
+    },
+    {
+      "id": "sc-t",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "System Status"
+    },
+    {
+      "id": "sc-s",
+      "component": "Section",
+      "children": [
+        "sc-list"
+      ]
+    },
+    {
+      "id": "sc-list",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "st1",
+        "st2",
+        "st3"
+      ]
+    },
+    {
+      "id": "st1",
+      "component": "Row",
+      "justify": "between",
+      "align": "center",
+      "children": [
+        "st1-l",
+        "st1-b"
+      ]
+    },
+    {
+      "id": "st1-l",
+      "component": "Text",
+      "textContent": "API"
+    },
+    {
+      "id": "st1-b",
+      "component": "Badge",
+      "text": "Operational",
+      "variant": "success",
+      "size": "sm"
+    },
+    {
+      "id": "st2",
+      "component": "Row",
+      "justify": "between",
+      "align": "center",
+      "children": [
+        "st2-l",
+        "st2-b"
+      ]
+    },
+    {
+      "id": "st2-l",
+      "component": "Text",
+      "textContent": "Database"
+    },
+    {
+      "id": "st2-b",
+      "component": "Badge",
+      "text": "Operational",
+      "variant": "success",
+      "size": "sm"
+    },
+    {
+      "id": "st3",
+      "component": "Row",
+      "justify": "between",
+      "align": "center",
+      "children": [
+        "st3-l",
+        "st3-b"
+      ]
+    },
+    {
+      "id": "st3-l",
+      "component": "Text",
+      "textContent": "CDN"
+    },
+    {
+      "id": "st3-b",
+      "component": "Badge",
+      "text": "Degraded",
+      "variant": "warning",
+      "size": "sm"
+    }
+  ],
+  "wiring": {
+    "actions": [
+      {
+        "event": {
+          "event": "press",
+          "target": "refresh-btn"
+        },
+        "handler": "refresh-source",
+        "config": {
+          "source": "dashboard-metrics"
+        }
+      },
+      {
+        "event": {
+          "event": "press",
+          "target": "export-btn"
+        },
+        "handler": "submit-resource",
+        "config": {
+          "uri": "api://dashboard/export",
+          "method": "POST"
+        },
+        "onSuccess": [
+          {
+            "handler": "notify",
+            "config": {
+              "message": "Report exported.",
+              "variant": "success"
+            }
+          }
+        ]
+      },
+      {
+        "event": {
+          "event": "change",
+          "target": "range-select"
+        },
+        "handler": "refresh-source",
+        "config": {
+          "source": "dashboard-metrics"
+        }
+      }
+    ],
+    "data": [
+      {
+        "uri": "api://dashboard/metrics",
+        "refresh": "on-focus"
+      }
+    ]
+  }
+}