{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Order Panel Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "OrderPanelSection",
          "name": "Order Panel Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "OrderPanelHeader",
              "name": "orderPanelSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "ORDER PANEL",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "OrderPanelTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "POS Order Management Panel",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelExamples",
              "name": "orderPanelExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelFull",
                  "name": "Organism/OrderPanel/Full",
                  "reusable": true,
                  "width": 420,
                  "height": 720,
                  "fill": "$bg-elevated",
                  "cornerRadius": 20,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelTopBar",
                      "name": "topBar",
                      "width": "fill_container",
                      "padding": [16, 20],
                      "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelOrderInfo",
                          "name": "orderInfo",
                          "layout": "vertical",
                          "gap": 4,
                          "children": [
                            {
                              "type": "text",
                              "id": "OrderPanelOrderNum",
                              "name": "orderNumber",
                              "fill": "$text-primary",
                              "content": "Đơn #0042",
                              "fontFamily": "Roboto",
                              "fontSize": 18,
                              "fontWeight": "600"
                            },
                            {
                              "type": "text",
                              "id": "OrderPanelTableInfo",
                              "name": "tableInfo",
                              "fill": "$text-secondary",
                              "content": "Bàn 12 • 3 món",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelActions",
                          "name": "actions",
                          "gap": 8,
                          "children": [
                            {
                              "type": "frame",
                              "id": "OrderPanelBtnHold",
                              "name": "holdBtn",
                              "width": 40,
                              "height": 40,
                              "fill": "$bg-interactive",
                              "cornerRadius": 10,
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                {"type": "icon_font", "id": "OrderPanelHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                              ]
                            },
                            {
                              "type": "frame",
                              "id": "OrderPanelBtnMore",
                              "name": "moreBtn",
                              "width": 40,
                              "height": 40,
                              "fill": "$bg-interactive",
                              "cornerRadius": 10,
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                {"type": "icon_font", "id": "OrderPanelMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelItemsList",
                      "name": "itemsList",
                      "width": "fill_container",
                      "height": "fill_container",
                      "layout": "vertical",
                      "gap": 0,
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelItem1",
                          "name": "orderItem1",
                          "width": "fill_container",
                          "padding": [14, 20],
                          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "OrderPanelItem1Left",
                              "name": "leftContent",
                              "gap": 12,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "OrderPanelItem1Qty",
                                  "name": "qtyBadge",
                                  "width": 32,
                                  "height": 32,
                                  "fill": "$bg-interactive",
                                  "cornerRadius": 8,
                                  "justifyContent": "center",
                                  "alignItems": "center",
                                  "children": [
                                    {"type": "text", "id": "OrderPanelItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                                  ]
                                },
                                {
                                  "type": "frame",
                                  "id": "OrderPanelItem1Info",
                                  "name": "itemInfo",
                                  "layout": "vertical",
                                  "gap": 2,
                                  "children": [
                                    {"type": "text", "id": "OrderPanelItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                    {"type": "text", "id": "OrderPanelItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                                  ]
                                }
                              ]
                            },
                            {"type": "text", "id": "OrderPanelItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelItem2",
                          "name": "orderItem2",
                          "width": "fill_container",
                          "padding": [14, 20],
                          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "OrderPanelItem2Left",
                              "name": "leftContent",
                              "gap": 12,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "OrderPanelItem2Qty",
                                  "name": "qtyBadge",
                                  "width": 32,
                                  "height": 32,
                                  "fill": "$bg-interactive",
                                  "cornerRadius": 8,
                                  "justifyContent": "center",
                                  "alignItems": "center",
                                  "children": [
                                    {"type": "text", "id": "OrderPanelItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                                  ]
                                },
                                {
                                  "type": "text",
                                  "id": "OrderPanelItem2Name",
                                  "fill": "$text-primary",
                                  "content": "Bánh Mì Thịt Nguội",
                                  "fontFamily": "Roboto",
                                  "fontSize": 14,
                                  "fontWeight": "500"
                                }
                              ]
                            },
                            {"type": "text", "id": "OrderPanelItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelItem3",
                          "name": "orderItem3",
                          "width": "fill_container",
                          "padding": [14, 20],
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "OrderPanelItem3Left",
                              "name": "leftContent",
                              "gap": 12,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "OrderPanelItem3Qty",
                                  "name": "qtyBadge",
                                  "width": 32,
                                  "height": 32,
                                  "fill": "$bg-interactive",
                                  "cornerRadius": 8,
                                  "justifyContent": "center",
                                  "alignItems": "center",
                                  "children": [
                                    {"type": "text", "id": "OrderPanelItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                                  ]
                                },
                                {
                                  "type": "text",
                                  "id": "OrderPanelItem3Name",
                                  "fill": "$text-primary",
                                  "content": "Trà Đào Cam Sả",
                                  "fontFamily": "Roboto",
                                  "fontSize": 14,
                                  "fontWeight": "500"
                                }
                              ]
                            },
                            {"type": "text", "id": "OrderPanelItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelSummary",
                      "name": "summarySection",
                      "width": "fill_container",
                      "fill": "$bg-surface",
                      "layout": "vertical",
                      "padding": 20,
                      "gap": 12,
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelSubtotal",
                          "name": "subtotalRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "OrderPanelSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                            {"type": "text", "id": "OrderPanelSubtotalValue", "fill": "$text-secondary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelDiscount",
                          "name": "discountRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "OrderPanelDiscountLabel", "fill": "$green-success", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                            {"type": "text", "id": "OrderPanelDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelDivider",
                          "name": "divider",
                          "width": "fill_container",
                          "height": 1,
                          "fill": "$border-subtle"
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelTotal",
                          "name": "totalRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {"type": "text", "id": "OrderPanelTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                            {"type": "text", "id": "OrderPanelTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelPayBtn",
                      "name": "payButton",
                      "width": "fill_container",
                      "height": 64,
                      "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
                      "justifyContent": "center",
                      "alignItems": "center",
                      "gap": 10,
                      "children": [
                        {"type": "icon_font", "id": "OrderPanelPayIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"},
                        {"type": "text", "id": "OrderPanelPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelVariantsSection",
          "name": "Order Panel Variants Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "OrderPanelVariantsHeader",
              "name": "variantsSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelVariantsBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelVariantsBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "STATES",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "OrderPanelVariantsTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Order Panel States",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelVariantsExamples",
              "name": "variantsExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "gap": 32,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelEmpty",
                  "name": "Organism/OrderPanel/Empty",
                  "reusable": true,
                  "width": 360,
                  "height": 400,
                  "fill": "$bg-elevated",
                  "cornerRadius": 20,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "gap": 16,
                  "children": [
                    {"type": "icon_font", "id": "OrderPanelEmptyIcon", "width": 64, "height": 64, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
                    {"type": "text", "id": "OrderPanelEmptyTitle", "fill": "$text-secondary", "content": "Chưa có món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "500"},
                    {"type": "text", "id": "OrderPanelEmptyDesc", "fill": "$text-tertiary", "content": "Chọn sản phẩm để thêm vào đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelCompact",
                  "name": "Organism/OrderPanel/Compact",
                  "reusable": true,
                  "width": 360,
                  "height": 400,
                  "fill": "$bg-elevated",
                  "cornerRadius": 20,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelCompactHeader",
                      "name": "header",
                      "width": "fill_container",
                      "padding": [14, 20],
                      "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "OrderPanelCompactTitle", "fill": "$text-primary", "content": "Đơn #0043", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {
                          "type": "frame",
                          "id": "OrderPanelCompactBadge",
                          "name": "itemCount",
                          "fill": "$orange-primary",
                          "cornerRadius": 100,
                          "padding": [4, 10],
                          "children": [
                            {"type": "text", "id": "OrderPanelCompactCount", "fill": "$text-primary", "content": "5 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelCompactItems",
                      "name": "itemsList",
                      "width": "fill_container",
                      "height": "fill_container",
                      "layout": "vertical",
                      "padding": [12, 20],
                      "gap": 8,
                      "children": [
                        {"type": "text", "id": "OrderPanelCompactItem1", "fill": "$text-secondary", "content": "2x Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
                        {"type": "text", "id": "OrderPanelCompactItem2", "fill": "$text-secondary", "content": "1x Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
                        {"type": "text", "id": "OrderPanelCompactItem3", "fill": "$text-secondary", "content": "2x Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelCompactFooter",
                      "name": "footer",
                      "width": "fill_container",
                      "fill": "$bg-surface",
                      "padding": [16, 20],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "OrderPanelCompactTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "OrderPanelCompactTotalValue", "fill": "$orange-primary", "content": "198,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "green-success": {"type": "color", "value": "#22C55E"},
    "orange-light": {"type": "color", "value": "#FF8A4C"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-disabled": {"type": "color", "value": "#6B6B70"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
