{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Receipt Preview Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "ReceiptPreviewSection",
          "name": "Receipt Preview Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "ReceiptPreviewHeader",
              "name": "receiptPreviewSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptPreviewBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptPreviewBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "RECEIPT PREVIEW",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "ReceiptPreviewTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Bill Receipt Preview",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptPreviewExample",
              "name": "receiptPreviewExample",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptPreviewFull",
                  "name": "Organism/ReceiptPreview/Full",
                  "reusable": true,
                  "width": 340,
                  "fill": "#FFFFFF",
                  "cornerRadius": 4,
                  "layout": "vertical",
                  "padding": [24, 20],
                  "gap": 16,
                  "children": [
                    {
                      "type": "frame",
                      "id": "ReceiptHeader",
                      "name": "receiptHeader",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 4,
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "ReceiptStoreName", "fill": "#111111", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"},
                        {"type": "text", "id": "ReceiptStoreAddr", "fill": "#666666", "content": "123 Nguyễn Huệ, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"},
                        {"type": "text", "id": "ReceiptStorePhone", "fill": "#666666", "content": "Tel: 1900 1234", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptDivider1",
                      "name": "divider1",
                      "width": "fill_container",
                      "height": 1,
                      "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptInfo",
                      "name": "receiptInfo",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 4,
                      "children": [
                        {
                          "type": "frame",
                          "id": "ReceiptInfoOrder",
                          "name": "orderRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptInfoOrderLabel", "fill": "#666666", "content": "Số HĐ:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptInfoOrderValue", "fill": "#111111", "content": "#0042", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptInfoDate",
                          "name": "dateRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptInfoDateLabel", "fill": "#666666", "content": "Ngày:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptInfoDateValue", "fill": "#111111", "content": "05/02/2026 23:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptInfoTable",
                          "name": "tableRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptInfoTableLabel", "fill": "#666666", "content": "Bàn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptInfoTableValue", "fill": "#111111", "content": "Bàn 12", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptInfoCashier",
                          "name": "cashierRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptInfoCashierLabel", "fill": "#666666", "content": "Thu ngân:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptInfoCashierValue", "fill": "#111111", "content": "Minh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptDivider2",
                      "name": "divider2",
                      "width": "fill_container",
                      "height": 1,
                      "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptItems",
                      "name": "receiptItems",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 8,
                      "children": [
                        {
                          "type": "frame",
                          "id": "ReceiptItem1",
                          "name": "receiptItem1",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {
                              "type": "frame",
                              "id": "ReceiptItem1Left",
                              "name": "leftContent",
                              "layout": "vertical",
                              "gap": 2,
                              "children": [
                                {"type": "text", "id": "ReceiptItem1Name", "fill": "#111111", "content": "Cà Phê Sữa Đá x2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                                {"type": "text", "id": "ReceiptItem1Note", "fill": "#888888", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}
                              ]
                            },
                            {"type": "text", "id": "ReceiptItem1Price", "fill": "#111111", "content": "58,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptItem2",
                          "name": "receiptItem2",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptItem2Name", "fill": "#111111", "content": "Bánh Mì Thịt Nguội x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                            {"type": "text", "id": "ReceiptItem2Price", "fill": "#111111", "content": "45,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptItem3",
                          "name": "receiptItem3",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptItem3Name", "fill": "#111111", "content": "Trà Đào Cam Sả x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                            {"type": "text", "id": "ReceiptItem3Price", "fill": "#111111", "content": "35,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptDivider3",
                      "name": "divider3",
                      "width": "fill_container",
                      "height": 1,
                      "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptSummary",
                      "name": "receiptSummary",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "children": [
                        {
                          "type": "frame",
                          "id": "ReceiptSummarySubtotal",
                          "name": "subtotalRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptSubtotalLabel", "fill": "#666666", "content": "Tạm tính:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptSubtotalValue", "fill": "#111111", "content": "138,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptSummaryDiscount",
                          "name": "discountRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptDiscountLabel", "fill": "#666666", "content": "Giảm giá:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptDiscountValue", "fill": "#22C55E", "content": "-10,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptSummaryTotal",
                          "name": "totalRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptTotalLabel", "fill": "#111111", "content": "TỔNG CỘNG:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"},
                            {"type": "text", "id": "ReceiptTotalValue", "fill": "#111111", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptDivider4",
                      "name": "divider4",
                      "width": "fill_container",
                      "height": 1,
                      "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptPayment",
                      "name": "receiptPayment",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 4,
                      "children": [
                        {
                          "type": "frame",
                          "id": "ReceiptPaymentMethod",
                          "name": "methodRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptPaymentMethodLabel", "fill": "#666666", "content": "Thanh toán:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptPaymentMethodValue", "fill": "#111111", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptPaymentCash",
                          "name": "cashRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptPaymentCashLabel", "fill": "#666666", "content": "Tiền khách:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptPaymentCashValue", "fill": "#111111", "content": "200,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ReceiptPaymentChange",
                          "name": "changeRow",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "children": [
                            {"type": "text", "id": "ReceiptPaymentChangeLabel", "fill": "#666666", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
                            {"type": "text", "id": "ReceiptPaymentChangeValue", "fill": "#111111", "content": "72,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ReceiptFooter",
                      "name": "receiptFooter",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "ReceiptThanks", "fill": "#666666", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500", "textAlign": "center"},
                        {"type": "text", "id": "ReceiptWifi", "fill": "#888888", "content": "WiFi: GoodGo_Guest | Pass: goodgo123", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal", "textAlign": "center"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-primary": {"type": "color", "value": "#FFFFFF"}
  }
}
