From ae016ebe095af1ad864b27b0a7c44f4bf2993a25 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Thu, 5 Feb 2026 23:18:45 +0700 Subject: [PATCH] feat: Add new Customer Lookup modal and badge components to tPOS UI kit, enhancing user interface and functionality for customer management. --- pencil-design/src/components/tPOS-ui-kit.pen | 4448 +++++++++++++++++ .../src/organisms/pos/customer-lookup.pen | 608 +++ .../src/organisms/pos/order-panel.pen | 561 +++ .../src/organisms/pos/payment-modal.pen | 533 ++ .../src/organisms/pos/product-grid.pen | 597 +++ .../src/organisms/pos/quick-actions.pen | 426 ++ .../src/organisms/pos/receipt-preview.pen | 356 ++ 7 files changed, 7529 insertions(+) create mode 100644 pencil-design/src/organisms/pos/customer-lookup.pen create mode 100644 pencil-design/src/organisms/pos/order-panel.pen create mode 100644 pencil-design/src/organisms/pos/payment-modal.pen create mode 100644 pencil-design/src/organisms/pos/product-grid.pen create mode 100644 pencil-design/src/organisms/pos/quick-actions.pen create mode 100644 pencil-design/src/organisms/pos/receipt-preview.pen diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index bed101f8..72008346 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -3163,6 +3163,4454 @@ } ] }, + { + "type": "frame", + "id": "CustomerLookupBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "CustomerLookupBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "CUSTOMER LOOKUP", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupModal", + "name": "Organism/CustomerLookup/Modal", + "reusable": true, + "width": 480, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CustomerLookupTopBar", + "name": "topBar", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerLookupModalTitle", + "fill": "$text-primary", + "content": "T\u00ecm kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CustomerLookupCloseBtn", + "name": "closeBtn", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerLookupCloseIcon", + "width": 18, + "height": 18, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 20, + "gap": 16, + "children": [ + { + "type": "frame", + "id": "CustomerLookupSearchBox", + "name": "searchBox", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerLookupSearchIcon", + "width": 20, + "height": 20, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CustomerLookupSearchText", + "fill": "$text-primary", + "content": "0912", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "CustomerLookupSearchSpacer", + "width": "fill_container", + "height": 1 + }, + { + "type": "icon_font", + "id": "CustomerLookupClearIcon", + "width": 18, + "height": 18, + "iconFontName": "x-circle", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupResults", + "name": "results", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CustomerResult1", + "name": "customerResult1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "padding": 16, + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerResult1Avatar", + "name": "avatar", + "width": 44, + "height": 44, + "fill": "#3B82F630", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerResult1Initials", + "fill": "#3B82F6", + "content": "NH", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CustomerResult1Info", + "name": "info", + "layout": "vertical", + "gap": 4, + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "CustomerResult1Name", + "fill": "$text-primary", + "content": "Nguy\u1ec5n H\u1ed3ng", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + }, + { + "type": "text", + "id": "CustomerResult1Phone", + "fill": "$text-secondary", + "content": "0912 345 678", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CustomerResult1Points", + "name": "points", + "fill": "#22C55E18", + "cornerRadius": 8, + "padding": [ + 6, + 10 + ], + "children": [ + { + "type": "text", + "id": "CustomerResult1PointsText", + "fill": "$green-success", + "content": "120 \u0111i\u1ec3m", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerResult2", + "name": "customerResult2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": 16, + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerResult2Avatar", + "name": "avatar", + "width": 44, + "height": 44, + "fill": "#8B5CF630", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerResult2Initials", + "fill": "#8B5CF6", + "content": "TL", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CustomerResult2Info", + "name": "info", + "layout": "vertical", + "gap": 4, + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "CustomerResult2Name", + "fill": "$text-primary", + "content": "Tr\u1ea7n Linh", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + }, + { + "type": "text", + "id": "CustomerResult2Phone", + "fill": "$text-secondary", + "content": "0912 888 999", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CustomerResult2Points", + "name": "points", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 10 + ], + "children": [ + { + "type": "text", + "id": "CustomerResult2PointsText", + "fill": "$text-secondary", + "content": "45 \u0111i\u1ec3m", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupAddNew", + "name": "addNewBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default", + "style": "dashed" + }, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerLookupAddIcon", + "width": 18, + "height": 18, + "iconFontName": "user-plus", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CustomerLookupAddText", + "fill": "$text-secondary", + "content": "Th\u00eam kh\u00e1ch h\u00e0ng m\u1edbi", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupActions", + "name": "actions", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CustomerLookupSkipBtn", + "name": "skipBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerLookupSkipText", + "fill": "$text-secondary", + "content": "B\u1ecf qua", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupConfirmBtn", + "name": "confirmBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerLookupConfirmIcon", + "width": 18, + "height": 18, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "CustomerLookupConfirmText", + "fill": "$text-primary", + "content": "Ch\u1ecdn kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "CustomerAddBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "ADD CUSTOMER", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "CustomerAddModal", + "name": "Organism/CustomerLookup/AddForm", + "reusable": true, + "width": 480, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CustomerAddTopBar", + "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": "CustomerAddBackBtn", + "name": "backBtn", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerAddBackIcon", + "width": 20, + "height": 20, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CustomerAddModalTitle", + "fill": "$text-primary", + "content": "Th\u00eam kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CustomerAddCloseBtn2", + "name": "closeBtn", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerAddCloseIcon2", + "width": 18, + "height": 18, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 20, + "gap": 16, + "children": [ + { + "type": "frame", + "id": "CustomerAddFieldName", + "name": "fieldName", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CustomerAddLabelName", + "fill": "$text-secondary", + "content": "H\u1ecd v\u00e0 t\u00ean *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CustomerAddInputName", + "name": "inputName", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerAddInputNameText", + "fill": "$text-tertiary", + "content": "Nh\u1eadp h\u1ecd v\u00e0 t\u00ean kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldPhone", + "name": "fieldPhone", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CustomerAddLabelPhone", + "fill": "$text-secondary", + "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CustomerAddInputPhone", + "name": "inputPhone", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$orange-primary" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerAddInputPhoneText", + "fill": "$text-primary", + "content": "0987 654 321", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldEmail", + "name": "fieldEmail", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CustomerAddLabelEmail", + "fill": "$text-secondary", + "content": "Email (t\u00f9y ch\u1ecdn)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CustomerAddInputEmail", + "name": "inputEmail", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerAddInputEmailText", + "fill": "$text-tertiary", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldNote", + "name": "fieldNote", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CustomerAddLabelNote", + "fill": "$text-secondary", + "content": "Ghi ch\u00fa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CustomerAddInputNote", + "name": "inputNote", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": 16, + "children": [ + { + "type": "text", + "id": "CustomerAddInputNoteText", + "fill": "$text-tertiary", + "content": "Th\u00eam ghi ch\u00fa v\u1ec1 kh\u00e1ch h\u00e0ng...", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddActions", + "name": "actions", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CustomerAddCancelBtn", + "name": "cancelBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerAddCancelText", + "fill": "$text-secondary", + "content": "H\u1ee7y", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CustomerAddSaveBtn", + "name": "saveBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CustomerAddSaveIcon", + "width": 18, + "height": 18, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "CustomerAddSaveText", + "fill": "$text-primary", + "content": "L\u01b0u kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "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": "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": "\u0110\u01a1n #0042", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "OrderPanelTableInfo", + "name": "tableInfo", + "fill": "$text-secondary", + "content": "B\u00e0n 12 \u2022 3 m\u00f3n", + "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\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "OrderPanelItem1Note", + "fill": "$text-tertiary", + "content": "\u00cdt \u0111\u01b0\u1eddng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "OrderPanelItem1Price", + "fill": "$text-primary", + "content": "58,000\u20ab", + "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\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "OrderPanelItem2Price", + "fill": "$text-primary", + "content": "45,000\u20ab", + "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\u00e0 \u0110\u00e0o Cam S\u1ea3", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "OrderPanelItem3Price", + "fill": "$text-primary", + "content": "35,000\u20ab", + "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\u1ea1m t\u00ednh", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderPanelSubtotalValue", + "fill": "$text-secondary", + "content": "138,000\u20ab", + "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\u1ebfn m\u00e3i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderPanelDiscountValue", + "fill": "$green-success", + "content": "-10,000\u20ab", + "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\u1ed5ng c\u1ed9ng", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "text", + "id": "OrderPanelTotalValue", + "fill": "$orange-primary", + "content": "128,000\u20ab", + "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\u00e1n", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + } + ] + } + ] + }, + { + "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": "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\u01b0a c\u00f3 m\u00f3n", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "500" + }, + { + "type": "text", + "id": "OrderPanelEmptyDesc", + "fill": "$text-tertiary", + "content": "Ch\u1ecdn s\u1ea3n ph\u1ea9m \u0111\u1ec3 th\u00eam v\u00e0o \u0111\u01a1n", + "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": "\u0110\u01a1n #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\u00f3n", + "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\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderPanelCompactItem2", + "fill": "$text-secondary", + "content": "1x B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderPanelCompactItem3", + "fill": "$text-secondary", + "content": "2x Tr\u00e0 \u0110\u00e0o Cam S\u1ea3", + "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\u1ed5ng c\u1ed9ng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "OrderPanelCompactTotalValue", + "fill": "$orange-primary", + "content": "198,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "PaymentModalBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "PAYMENT MODAL", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "PaymentModalFull", + "name": "Organism/PaymentModal/Full", + "reusable": true, + "width": 520, + "fill": "$bg-elevated", + "cornerRadius": 24, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PaymentModalTopBar", + "name": "topBar", + "width": "fill_container", + "padding": [ + 20, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentModalTopTitle", + "fill": "$text-primary", + "content": "Thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PaymentModalCloseBtn", + "name": "closeBtn", + "width": 40, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PaymentModalCloseIcon", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 24, + "gap": 24, + "children": [ + { + "type": "frame", + "id": "PaymentModalAmount", + "name": "amountSection", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "padding": 20, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentModalAmountLabel", + "fill": "$text-secondary", + "content": "T\u1ed5ng thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PaymentModalAmountValue", + "fill": "$orange-primary", + "content": "128,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PaymentModalMethods", + "name": "methodsSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "PaymentModalMethodsLabel", + "fill": "$text-secondary", + "content": "Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PaymentModalMethodsGrid", + "name": "methodsGrid", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PayMethodCash", + "name": "cashMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PayMethodCashIcon", + "width": 28, + "height": 28, + "iconFontName": "banknote", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "PayMethodCashText", + "fill": "$text-primary", + "content": "Ti\u1ec1n m\u1eb7t", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PayMethodCard", + "name": "cardMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PayMethodCardIcon", + "width": 28, + "height": 28, + "iconFontName": "credit-card", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PayMethodCardText", + "fill": "$text-secondary", + "content": "Th\u1ebb", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PayMethodQR", + "name": "qrMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PayMethodQRIcon", + "width": 28, + "height": 28, + "iconFontName": "qr-code", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PayMethodQRText", + "fill": "$text-secondary", + "content": "QR Code", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalCashInput", + "name": "cashInputSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "PaymentModalCashLabel", + "fill": "$text-secondary", + "content": "Ti\u1ec1n kh\u00e1ch \u0111\u01b0a", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PaymentModalCashField", + "name": "cashField", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentModalCashValue", + "fill": "$text-primary", + "content": "200,000", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PaymentModalCashCurrency", + "fill": "$text-tertiary", + "content": "\u20ab", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PaymentModalQuickAmounts", + "name": "quickAmounts", + "width": "fill_container", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "QuickAmt50", + "name": "amt50k", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "QuickAmt50Text", + "fill": "$text-secondary", + "content": "50K", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QuickAmt100", + "name": "amt100k", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "QuickAmt100Text", + "fill": "$text-secondary", + "content": "100K", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QuickAmt200", + "name": "amt200k", + "fill": "$orange-primary", + "cornerRadius": 8, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "QuickAmt200Text", + "fill": "$text-primary", + "content": "200K", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "QuickAmt500", + "name": "amt500k", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "QuickAmt500Text", + "fill": "$text-secondary", + "content": "500K", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QuickAmtExact", + "name": "amtExact", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "QuickAmtExactText", + "fill": "$text-secondary", + "content": "\u0110\u1ee7 ti\u1ec1n", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalChange", + "name": "changeSection", + "width": "fill_container", + "fill": "#22C55E18", + "cornerRadius": 12, + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentModalChangeLabel", + "fill": "$green-success", + "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PaymentModalChangeValue", + "fill": "$green-success", + "content": "72,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalActions", + "name": "actions", + "width": "fill_container", + "padding": 24, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentModalCancelBtn", + "name": "cancelBtn", + "width": "fill_container", + "height": 52, + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentModalCancelText", + "fill": "$text-secondary", + "content": "H\u1ee7y", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PaymentModalConfirmBtn", + "name": "confirmBtn", + "width": "fill_container", + "height": 52, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PaymentModalConfirmIcon", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "PaymentModalConfirmText", + "fill": "$text-primary", + "content": "X\u00e1c nh\u1eadn thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "PaymentSuccessBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SUCCESS STATE", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessModal", + "name": "Organism/PaymentModal/Success", + "reusable": true, + "width": 420, + "fill": "$bg-elevated", + "cornerRadius": 24, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "padding": 40, + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PaymentSuccessIconWrapper", + "name": "iconWrapper", + "width": 80, + "height": 80, + "fill": "#22C55E18", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PaymentSuccessIcon", + "width": 40, + "height": 40, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$green-success" + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessContent", + "name": "content", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PaymentSuccessContentTitle", + "fill": "$text-primary", + "content": "Thanh to\u00e1n th\u00e0nh c\u00f4ng!", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "600", + "textAlign": "center" + }, + { + "type": "text", + "id": "PaymentSuccessContentDesc", + "fill": "$text-secondary", + "content": "\u0110\u01a1n h\u00e0ng #0042 \u0111\u00e3 \u0111\u01b0\u1ee3c thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "normal", + "textAlign": "center" + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummary", + "name": "summary", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "padding": 20, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentSuccessSummaryTotal", + "name": "totalRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "PaymentSuccessTotalLabel", + "fill": "$text-secondary", + "content": "T\u1ed5ng thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PaymentSuccessTotalValue", + "fill": "$text-primary", + "content": "128,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummaryMethod", + "name": "methodRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "PaymentSuccessMethodLabel", + "fill": "$text-secondary", + "content": "Ph\u01b0\u01a1ng th\u1ee9c", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PaymentSuccessMethodValue", + "fill": "$text-primary", + "content": "Ti\u1ec1n m\u1eb7t", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummaryChange", + "name": "changeRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "PaymentSuccessChangeLabel", + "fill": "$green-success", + "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PaymentSuccessChangeValue", + "fill": "$green-success", + "content": "72,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessActions", + "name": "actions", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentSuccessPrintBtn", + "name": "printBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PaymentSuccessPrintIcon", + "width": 18, + "height": 18, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PaymentSuccessPrintText", + "fill": "$text-secondary", + "content": "In h\u00f3a \u0111\u01a1n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessNewBtn", + "name": "newOrderBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PaymentSuccessNewIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "PaymentSuccessNewText", + "fill": "$text-primary", + "content": "\u0110\u01a1n m\u1edbi", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ProductGridBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "ProductGridBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "PRODUCT GRID", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "ProductGridFull", + "name": "Organism/ProductGrid/Full", + "reusable": true, + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "ProductGridToolbar", + "name": "toolbar", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ProductGridSearch", + "name": "searchBox", + "width": 320, + "height": 44, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProductGridSearchIcon", + "width": 20, + "height": 20, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ProductGridSearchText", + "fill": "$text-tertiary", + "content": "T\u00ecm s\u1ea3n ph\u1ea9m, m\u00e3 v\u1ea1ch...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ProductGridScanBtn", + "name": "scanButton", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 12, + "padding": [ + 0, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProductGridScanIcon", + "width": 20, + "height": 20, + "iconFontName": "scan-barcode", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ProductGridScanText", + "fill": "$text-secondary", + "content": "Qu\u00e9t m\u00e3", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ProductGridViewToggle", + "name": "viewToggle", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": 4, + "gap": 4, + "children": [ + { + "type": "frame", + "id": "ProductGridViewGrid", + "name": "gridView", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProductGridViewGridIcon", + "width": 18, + "height": 18, + "iconFontName": "grid-2x2", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "ProductGridViewList", + "name": "listView", + "width": 36, + "height": 36, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProductGridViewListIcon", + "width": 18, + "height": 18, + "iconFontName": "list", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ProductGridCategories", + "name": "categoriesBar", + "width": "fill_container", + "padding": [ + 12, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "ProductGridCatAll", + "name": "catAll", + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "ProductGridCatAllText", + "fill": "$text-primary", + "content": "T\u1ea5t c\u1ea3", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ProductGridCatDrinks", + "name": "catDrinks", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "ProductGridCatDrinksText", + "fill": "$text-secondary", + "content": "\u0110\u1ed3 u\u1ed1ng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ProductGridCatFood", + "name": "catFood", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "ProductGridCatFoodText", + "fill": "$text-secondary", + "content": "Th\u1ee9c \u0103n", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ProductGridCatDesserts", + "name": "catDesserts", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "ProductGridCatDessertsText", + "fill": "$text-secondary", + "content": "Tr\u00e1ng mi\u1ec7ng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ProductGridCatCombo", + "name": "catCombo", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "ProductGridCatComboText", + "fill": "$text-secondary", + "content": "Combo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ProductGridContent", + "name": "productsGrid", + "width": "fill_container", + "padding": 20, + "gap": 16, + "wrap": true, + "children": [ + { + "type": "frame", + "id": "PGridCard1", + "name": "productCard1", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PGridCard1Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "#3B82F618" + }, + { + "type": "frame", + "id": "PGridCard1Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard1Name", + "fill": "$text-primary", + "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard1Price", + "fill": "$orange-primary", + "content": "29,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard2", + "name": "productCard2", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PGridCard2Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "#22C55E18" + }, + { + "type": "frame", + "id": "PGridCard2Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard2Name", + "fill": "$text-primary", + "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard2Price", + "fill": "$orange-primary", + "content": "35,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard3", + "name": "productCard3", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PGridCard3Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "#F59E0B18" + }, + { + "type": "frame", + "id": "PGridCard3Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard3Name", + "fill": "$text-primary", + "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard3Price", + "fill": "$orange-primary", + "content": "45,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard4", + "name": "productCard4", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PGridCard4Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "#8B5CF618" + }, + { + "type": "frame", + "id": "PGridCard4Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard4Name", + "fill": "$text-primary", + "content": "Matcha Latte", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard4Price", + "fill": "$orange-primary", + "content": "42,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard5", + "name": "productCard5", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PGridCard5Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "#EC489918" + }, + { + "type": "frame", + "id": "PGridCard5Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard5Name", + "fill": "$text-primary", + "content": "Sinh T\u1ed1 D\u00e2u", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard5Price", + "fill": "$orange-primary", + "content": "38,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard6", + "name": "productCard6", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "clip": true, + "opacity": 0.5, + "children": [ + { + "type": "frame", + "id": "PGridCard6Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "$bg-interactive", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PGridCard6OOS", + "fill": "$text-disabled", + "content": "H\u1ebft h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PGridCard6Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PGridCard6Name", + "fill": "$text-disabled", + "content": "Sinh T\u1ed1 B\u01a1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PGridCard6Price", + "fill": "$text-disabled", + "content": "45,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CategoryTabsBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "CategoryTabsBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "CATEGORY TABS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "CategoryTabsVertical", + "name": "Organism/CategoryTabs/Vertical", + "reusable": true, + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "padding": 12, + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CategoryTabAll", + "name": "tabAll", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CategoryTabAllIcon", + "width": 20, + "height": 20, + "iconFontName": "layout-grid", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "CategoryTabAllText", + "fill": "$text-primary", + "content": "T\u1ea5t c\u1ea3", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabDrinks", + "name": "tabDrinks", + "width": "fill_container", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CategoryTabDrinksIcon", + "width": 20, + "height": 20, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CategoryTabDrinksText", + "fill": "$text-secondary", + "content": "\u0110\u1ed3 u\u1ed1ng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabFood", + "name": "tabFood", + "width": "fill_container", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CategoryTabFoodIcon", + "width": 20, + "height": 20, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CategoryTabFoodText", + "fill": "$text-secondary", + "content": "Th\u1ee9c \u0103n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabDesserts", + "name": "tabDesserts", + "width": "fill_container", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CategoryTabDessertsIcon", + "width": 20, + "height": 20, + "iconFontName": "cake-slice", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CategoryTabDessertsText", + "fill": "$text-secondary", + "content": "Tr\u00e1ng mi\u1ec7ng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabCombo", + "name": "tabCombo", + "width": "fill_container", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CategoryTabComboIcon", + "width": 20, + "height": 20, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CategoryTabComboText", + "fill": "$text-secondary", + "content": "Combo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuickActionsBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "QuickActionsBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "QUICK ACTIONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "QuickActionsBar", + "name": "Organism/QuickActions/Bar", + "reusable": true, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": 16, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "QABtnNewOrder", + "name": "newOrderBtn", + "width": 100, + "height": 90, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnNewOrderIcon", + "width": 28, + "height": 28, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "QABtnNewOrderText", + "fill": "$text-primary", + "content": "\u0110\u01a1n m\u1edbi", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "QABtnHold", + "name": "holdBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnHoldIcon", + "width": 28, + "height": 28, + "iconFontName": "pause", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnHoldText", + "fill": "$text-secondary", + "content": "T\u1ea1m gi\u1eef", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QABtnRecall", + "name": "recallBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QABtnRecallBadge", + "name": "badge", + "fill": "#EF4444", + "cornerRadius": 100, + "padding": [ + 2, + 6 + ], + "position": "absolute", + "x": 70, + "y": 8, + "children": [ + { + "type": "text", + "id": "QABtnRecallBadgeText", + "fill": "#FFFFFF", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "icon_font", + "id": "QABtnRecallIcon", + "width": 28, + "height": 28, + "iconFontName": "clipboard-list", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnRecallText", + "fill": "$text-secondary", + "content": "\u0110\u01a1n ch\u1edd", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QABtnDiscount", + "name": "discountBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnDiscountIcon", + "width": 28, + "height": 28, + "iconFontName": "percent", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnDiscountText", + "fill": "$text-secondary", + "content": "Gi\u1ea3m gi\u00e1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QABtnCustomer", + "name": "customerBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnCustomerIcon", + "width": 28, + "height": 28, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnCustomerText", + "fill": "$text-secondary", + "content": "Kh\u00e1ch h\u00e0ng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QABtnPrint", + "name": "printBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnPrintIcon", + "width": 28, + "height": 28, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnPrintText", + "fill": "$text-secondary", + "content": "In bill", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QABtnMore", + "name": "moreBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QABtnMoreIcon", + "width": 28, + "height": 28, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "QABtnMoreText", + "fill": "$text-secondary", + "content": "Th\u00eam", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QAVerticalBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "QAVerticalBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SIDEBAR ACTIONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "QuickActionsSidebar", + "name": "Organism/QuickActions/Sidebar", + "reusable": true, + "width": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "padding": 12, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QASideNewOrder", + "name": "newOrderBtn", + "width": 48, + "height": 48, + "fill": "$orange-primary", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideNewOrderIcon", + "width": 22, + "height": 22, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "QASideHold", + "name": "holdBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideHoldIcon", + "width": 22, + "height": 22, + "iconFontName": "pause", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "QASideRecall", + "name": "recallBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideRecallIcon", + "width": 22, + "height": 22, + "iconFontName": "clipboard-list", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "QASideDiscount", + "name": "discountBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideDiscountIcon", + "width": 22, + "height": 22, + "iconFontName": "percent", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "QASideCustomer", + "name": "customerBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideCustomerIcon", + "width": 22, + "height": 22, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "QASidePrint", + "name": "printBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASidePrintIcon", + "width": 22, + "height": 22, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "QASideSpacer", + "name": "spacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "QASideSettings", + "name": "settingsBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QASideSettingsIcon", + "width": 22, + "height": 22, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "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": "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\u00e9", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700", + "textAlign": "center" + }, + { + "type": "text", + "id": "ReceiptStoreAddr", + "fill": "#666666", + "content": "123 Nguy\u1ec5n Hu\u1ec7, 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\u1ed1 H\u0110:", + "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\u00e0y:", + "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\u00e0n:", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ReceiptInfoTableValue", + "fill": "#111111", + "content": "B\u00e0n 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\u00e2n:", + "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\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1 x2", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ReceiptItem1Note", + "fill": "#888888", + "content": "\u00cdt \u0111\u01b0\u1eddng", + "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\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i 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\u00e0 \u0110\u00e0o Cam S\u1ea3 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\u1ea1m t\u00ednh:", + "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\u1ea3m gi\u00e1:", + "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\u1ed4NG C\u1ed8NG:", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ReceiptTotalValue", + "fill": "#111111", + "content": "128,000\u20ab", + "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\u00e1n:", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ReceiptPaymentMethodValue", + "fill": "#111111", + "content": "Ti\u1ec1n m\u1eb7t", + "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\u1ec1n kh\u00e1ch:", + "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\u1ec1n th\u1ed1i:", + "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\u1ea3m \u01a1n qu\u00fd kh\u00e1ch!", + "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" + } + ] + } + ] + }, { "type": "frame", "id": "NumpadFullBadge", diff --git a/pencil-design/src/organisms/pos/customer-lookup.pen b/pencil-design/src/organisms/pos/customer-lookup.pen new file mode 100644 index 00000000..59bb20ae --- /dev/null +++ b/pencil-design/src/organisms/pos/customer-lookup.pen @@ -0,0 +1,608 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Customer Lookup Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "CustomerLookupSection", + "name": "Customer Lookup Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "CustomerLookupHeader", + "name": "customerLookupSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerLookupBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "CustomerLookupBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "CUSTOMER LOOKUP", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "CustomerLookupTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "Customer Search & Add", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupExample", + "name": "customerLookupExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "CustomerLookupModal", + "name": "Organism/CustomerLookup/Modal", + "reusable": true, + "width": 480, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CustomerLookupTopBar", + "name": "topBar", + "width": "fill_container", + "padding": [16, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerLookupModalTitle", "fill": "$text-primary", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, + { + "type": "frame", + "id": "CustomerLookupCloseBtn", + "name": "closeBtn", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerLookupCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 20, + "gap": 16, + "children": [ + { + "type": "frame", + "id": "CustomerLookupSearchBox", + "name": "searchBox", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": [0, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerLookupSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "CustomerLookupSearchText", "fill": "$text-primary", "content": "0912", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}, + {"type": "frame", "id": "CustomerLookupSearchSpacer", "width": "fill_container", "height": 1}, + {"type": "icon_font", "id": "CustomerLookupClearIcon", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "CustomerLookupResults", + "name": "results", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CustomerResult1", + "name": "customerResult1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "padding": 16, + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerResult1Avatar", + "name": "avatar", + "width": 44, + "height": 44, + "fill": "#3B82F630", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerResult1Initials", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "CustomerResult1Info", + "name": "info", + "layout": "vertical", + "gap": 4, + "width": "fill_container", + "children": [ + {"type": "text", "id": "CustomerResult1Name", "fill": "$text-primary", "content": "Nguyễn Hồng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, + {"type": "text", "id": "CustomerResult1Phone", "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "CustomerResult1Points", + "name": "points", + "fill": "#22C55E18", + "cornerRadius": 8, + "padding": [6, 10], + "children": [ + {"type": "text", "id": "CustomerResult1PointsText", "fill": "$green-success", "content": "120 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerResult2", + "name": "customerResult2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerResult2Avatar", + "name": "avatar", + "width": 44, + "height": 44, + "fill": "#8B5CF630", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerResult2Initials", "fill": "#8B5CF6", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "CustomerResult2Info", + "name": "info", + "layout": "vertical", + "gap": 4, + "width": "fill_container", + "children": [ + {"type": "text", "id": "CustomerResult2Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, + {"type": "text", "id": "CustomerResult2Phone", "fill": "$text-secondary", "content": "0912 888 999", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "CustomerResult2Points", + "name": "points", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [6, 10], + "children": [ + {"type": "text", "id": "CustomerResult2PointsText", "fill": "$text-secondary", "content": "45 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupAddNew", + "name": "addNewBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerLookupAddIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CustomerLookupAddText", "fill": "$text-secondary", "content": "Thêm khách hàng mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerLookupActions", + "name": "actions", + "width": "fill_container", + "padding": [16, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CustomerLookupSkipBtn", + "name": "skipBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerLookupSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "CustomerLookupConfirmBtn", + "name": "confirmBtn", + "width": "fill_container", + "height": 48, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerLookupConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CustomerLookupConfirmText", "fill": "$text-primary", "content": "Chọn khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddSection", + "name": "Customer Add Form Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "CustomerAddHeader", + "name": "customerAddSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CustomerAddBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "CustomerAddBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "ADD CUSTOMER", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "CustomerAddTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "New Customer Form", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "CustomerAddExample", + "name": "customerAddExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "CustomerAddModal", + "name": "Organism/CustomerLookup/AddForm", + "reusable": true, + "width": 480, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CustomerAddTopBar", + "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": "CustomerAddBackBtn", + "name": "backBtn", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerAddBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CustomerAddModalTitle", "fill": "$text-primary", "content": "Thêm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "CustomerAddCloseBtn2", + "name": "closeBtn", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerAddCloseIcon2", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 20, + "gap": 16, + "children": [ + { + "type": "frame", + "id": "CustomerAddFieldName", + "name": "fieldName", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "text", "id": "CustomerAddLabelName", "fill": "$text-secondary", "content": "Họ và tên *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + { + "type": "frame", + "id": "CustomerAddInputName", + "name": "inputName", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": [0, 16], + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerAddInputNameText", "fill": "$text-tertiary", "content": "Nhập họ và tên khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldPhone", + "name": "fieldPhone", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "text", "id": "CustomerAddLabelPhone", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + { + "type": "frame", + "id": "CustomerAddInputPhone", + "name": "inputPhone", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$orange-primary"}, + "padding": [0, 16], + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerAddInputPhoneText", "fill": "$text-primary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldEmail", + "name": "fieldEmail", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "text", "id": "CustomerAddLabelEmail", "fill": "$text-secondary", "content": "Email (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + { + "type": "frame", + "id": "CustomerAddInputEmail", + "name": "inputEmail", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": [0, 16], + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerAddInputEmailText", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddFieldNote", + "name": "fieldNote", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "text", "id": "CustomerAddLabelNote", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + { + "type": "frame", + "id": "CustomerAddInputNote", + "name": "inputNote", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "children": [ + {"type": "text", "id": "CustomerAddInputNoteText", "fill": "$text-tertiary", "content": "Thêm ghi chú về khách hàng...", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CustomerAddActions", + "name": "actions", + "width": "fill_container", + "padding": [16, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CustomerAddCancelBtn", + "name": "cancelBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "CustomerAddCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "CustomerAddSaveBtn", + "name": "saveBtn", + "width": "fill_container", + "height": 48, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CustomerAddSaveIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CustomerAddSaveText", "fill": "$text-primary", "content": "Lưu khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "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-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/organisms/pos/order-panel.pen b/pencil-design/src/organisms/pos/order-panel.pen new file mode 100644 index 00000000..12dc3527 --- /dev/null +++ b/pencil-design/src/organisms/pos/order-panel.pen @@ -0,0 +1,561 @@ +{ + "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"} + } +} diff --git a/pencil-design/src/organisms/pos/payment-modal.pen b/pencil-design/src/organisms/pos/payment-modal.pen new file mode 100644 index 00000000..6dbe5545 --- /dev/null +++ b/pencil-design/src/organisms/pos/payment-modal.pen @@ -0,0 +1,533 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Payment Modal Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "PaymentModalSection", + "name": "Payment Modal Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "PaymentModalHeader", + "name": "paymentModalSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PaymentModalBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "PaymentModalBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "PAYMENT MODAL", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "PaymentModalTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "Payment Flow Dialog", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "PaymentModalExample", + "name": "paymentModalExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "PaymentModalFull", + "name": "Organism/PaymentModal/Full", + "reusable": true, + "width": 520, + "fill": "$bg-elevated", + "cornerRadius": 24, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PaymentModalTopBar", + "name": "topBar", + "width": "fill_container", + "padding": [20, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentModalTopTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, + { + "type": "frame", + "id": "PaymentModalCloseBtn", + "name": "closeBtn", + "width": 40, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PaymentModalCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalBody", + "name": "body", + "width": "fill_container", + "layout": "vertical", + "padding": 24, + "gap": 24, + "children": [ + { + "type": "frame", + "id": "PaymentModalAmount", + "name": "amountSection", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "padding": 20, + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentModalAmountLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "PaymentModalAmountValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "PaymentModalMethods", + "name": "methodsSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + {"type": "text", "id": "PaymentModalMethodsLabel", "fill": "$text-secondary", "content": "Phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + { + "type": "frame", + "id": "PaymentModalMethodsGrid", + "name": "methodsGrid", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PayMethodCash", + "name": "cashMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PayMethodCashIcon", "width": 28, "height": 28, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "PayMethodCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "PayMethodCard", + "name": "cardMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PayMethodCardIcon", "width": 28, "height": 28, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "PayMethodCardText", "fill": "$text-secondary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "PayMethodQR", + "name": "qrMethod", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PayMethodQRIcon", "width": 28, "height": 28, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "PayMethodQRText", "fill": "$text-secondary", "content": "QR Code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalCashInput", + "name": "cashInputSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + {"type": "text", "id": "PaymentModalCashLabel", "fill": "$text-secondary", "content": "Tiền khách đưa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + { + "type": "frame", + "id": "PaymentModalCashField", + "name": "cashField", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": [0, 20], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentModalCashValue", "fill": "$text-primary", "content": "200,000", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}, + {"type": "text", "id": "PaymentModalCashCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "PaymentModalQuickAmounts", + "name": "quickAmounts", + "width": "fill_container", + "gap": 8, + "children": [ + {"type": "frame", "id": "QuickAmt50", "name": "amt50k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt50Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "QuickAmt100", "name": "amt100k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt100Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "QuickAmt200", "name": "amt200k", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt200Text", "fill": "$text-primary", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "QuickAmt500", "name": "amt500k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt500Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "QuickAmtExact", "name": "amtExact", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmtExactText", "fill": "$text-secondary", "content": "Đủ tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalChange", + "name": "changeSection", + "width": "fill_container", + "fill": "#22C55E18", + "cornerRadius": 12, + "padding": [16, 20], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentModalChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, + {"type": "text", "id": "PaymentModalChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentModalActions", + "name": "actions", + "width": "fill_container", + "padding": 24, + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentModalCancelBtn", + "name": "cancelBtn", + "width": "fill_container", + "height": 52, + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentModalCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "PaymentModalConfirmBtn", + "name": "confirmBtn", + "width": "fill_container", + "height": 52, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PaymentModalConfirmIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "PaymentModalConfirmText", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSection", + "name": "Payment Success Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "PaymentSuccessHeader", + "name": "paymentSuccessSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PaymentSuccessBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "PaymentSuccessBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SUCCESS STATE", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "PaymentSuccessTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "Payment Confirmation", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessExample", + "name": "paymentSuccessExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "PaymentSuccessModal", + "name": "Organism/PaymentModal/Success", + "reusable": true, + "width": 420, + "fill": "$bg-elevated", + "cornerRadius": 24, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "padding": 40, + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PaymentSuccessIconWrapper", + "name": "iconWrapper", + "width": 80, + "height": 80, + "fill": "#22C55E18", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PaymentSuccessIcon", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$green-success"} + ] + }, + { + "type": "frame", + "id": "PaymentSuccessContent", + "name": "content", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "text", "id": "PaymentSuccessContentTitle", "fill": "$text-primary", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600", "textAlign": "center"}, + {"type": "text", "id": "PaymentSuccessContentDesc", "fill": "$text-secondary", "content": "Đơn hàng #0042 đã được thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal", "textAlign": "center"} + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummary", + "name": "summary", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "padding": 20, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentSuccessSummaryTotal", + "name": "totalRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "PaymentSuccessTotalLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "PaymentSuccessTotalValue", "fill": "$text-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummaryMethod", + "name": "methodRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "PaymentSuccessMethodLabel", "fill": "$text-secondary", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "PaymentSuccessMethodValue", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "PaymentSuccessSummaryChange", + "name": "changeRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "PaymentSuccessChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "PaymentSuccessChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentSuccessActions", + "name": "actions", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PaymentSuccessPrintBtn", + "name": "printBtn", + "width": "fill_container", + "height": 48, + "cornerRadius": 10, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PaymentSuccessPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "PaymentSuccessPrintText", "fill": "$text-secondary", "content": "In hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "PaymentSuccessNewBtn", + "name": "newOrderBtn", + "width": "fill_container", + "height": 48, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "PaymentSuccessNewIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "PaymentSuccessNewText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "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"} + } +} diff --git a/pencil-design/src/organisms/pos/product-grid.pen b/pencil-design/src/organisms/pos/product-grid.pen new file mode 100644 index 00000000..3ece7973 --- /dev/null +++ b/pencil-design/src/organisms/pos/product-grid.pen @@ -0,0 +1,597 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Product Grid Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "ProductGridSection", + "name": "Product Grid Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "ProductGridHeader", + "name": "productGridSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ProductGridBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "ProductGridBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "PRODUCT GRID", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "ProductGridTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "POS Product Selection Area", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "ProductGridExample", + "name": "productGridExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 24, + "children": [ + { + "type": "frame", + "id": "ProductGridFull", + "name": "Organism/ProductGrid/Full", + "reusable": true, + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "ProductGridToolbar", + "name": "toolbar", + "width": "fill_container", + "padding": [16, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ProductGridSearch", + "name": "searchBox", + "width": 320, + "height": 44, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": [0, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "ProductGridSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "ProductGridSearchText", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "ProductGridScanBtn", + "name": "scanButton", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 12, + "padding": [0, 16], + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "ProductGridScanIcon", "width": 20, "height": 20, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "ProductGridScanText", "fill": "$text-secondary", "content": "Quét mã", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "ProductGridViewToggle", + "name": "viewToggle", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 4, + "gap": 4, + "children": [ + { + "type": "frame", + "id": "ProductGridViewGrid", + "name": "gridView", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "ProductGridViewGridIcon", "width": 18, "height": 18, "iconFontName": "grid-2x2", "iconFontFamily": "lucide", "fill": "$text-primary"} + ] + }, + { + "type": "frame", + "id": "ProductGridViewList", + "name": "listView", + "width": 36, + "height": 36, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "ProductGridViewListIcon", "width": 18, "height": 18, "iconFontName": "list", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ProductGridCategories", + "name": "categoriesBar", + "width": "fill_container", + "padding": [12, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "ProductGridCatAll", + "name": "catAll", + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "ProductGridCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "ProductGridCatDrinks", + "name": "catDrinks", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "ProductGridCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "ProductGridCatFood", + "name": "catFood", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "ProductGridCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "ProductGridCatDesserts", + "name": "catDesserts", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "ProductGridCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "ProductGridCatCombo", + "name": "catCombo", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "ProductGridCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + } + ] + }, + { + "type": "frame", + "id": "ProductGridContent", + "name": "productsGrid", + "width": "fill_container", + "padding": 20, + "gap": 16, + "wrap": true, + "children": [ + { + "type": "frame", + "id": "PGridCard1", + "name": "productCard1", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "PGridCard1Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#3B82F618"}, + { + "type": "frame", + "id": "PGridCard1Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard2", + "name": "productCard2", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "PGridCard2Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#22C55E18"}, + { + "type": "frame", + "id": "PGridCard2Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard3", + "name": "productCard3", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "PGridCard3Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#F59E0B18"}, + { + "type": "frame", + "id": "PGridCard3Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard4", + "name": "productCard4", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "PGridCard4Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#8B5CF618"}, + { + "type": "frame", + "id": "PGridCard4Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard5", + "name": "productCard5", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "PGridCard5Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#EC489918"}, + { + "type": "frame", + "id": "PGridCard5Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "PGridCard6", + "name": "productCard6", + "width": 160, + "fill": "$bg-surface", + "cornerRadius": 14, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "opacity": 0.5, + "children": [ + { + "type": "frame", + "id": "PGridCard6Img", + "name": "img", + "width": "fill_container", + "height": 110, + "fill": "$bg-interactive", + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PGridCard6OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "PGridCard6Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "PGridCard6Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "PGridCard6Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ]} + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CategoryTabsSection", + "name": "Category Tabs Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "CategoryTabsHeader", + "name": "categoryTabsSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CategoryTabsBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "CategoryTabsBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "CATEGORY TABS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "CategoryTabsTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "Vertical Category Navigation", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "CategoryTabsExample", + "name": "categoryTabsExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "CategoryTabsVertical", + "name": "Organism/CategoryTabs/Vertical", + "reusable": true, + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "padding": 12, + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CategoryTabAll", + "name": "tabAll", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 12, + "padding": [14, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CategoryTabAllIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CategoryTabAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "CategoryTabDrinks", + "name": "tabDrinks", + "width": "fill_container", + "cornerRadius": 12, + "padding": [14, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CategoryTabDrinksIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CategoryTabDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "CategoryTabFood", + "name": "tabFood", + "width": "fill_container", + "cornerRadius": 12, + "padding": [14, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CategoryTabFoodIcon", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CategoryTabFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "CategoryTabDesserts", + "name": "tabDesserts", + "width": "fill_container", + "cornerRadius": 12, + "padding": [14, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CategoryTabDessertsIcon", "width": 20, "height": 20, "iconFontName": "cake-slice", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CategoryTabDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "CategoryTabCombo", + "name": "tabCombo", + "width": "fill_container", + "cornerRadius": 12, + "padding": [14, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "CategoryTabComboIcon", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "CategoryTabComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "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"} + } +} diff --git a/pencil-design/src/organisms/pos/quick-actions.pen b/pencil-design/src/organisms/pos/quick-actions.pen new file mode 100644 index 00000000..50b932cb --- /dev/null +++ b/pencil-design/src/organisms/pos/quick-actions.pen @@ -0,0 +1,426 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Quick Actions Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "QuickActionsSection", + "name": "Quick Actions Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "QuickActionsHeader", + "name": "quickActionsSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QuickActionsBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "QuickActionsBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "QUICK ACTIONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "QuickActionsTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "POS Action Toolbar", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "QuickActionsExample", + "name": "quickActionsExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "QuickActionsBar", + "name": "Organism/QuickActions/Bar", + "reusable": true, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "QABtnNewOrder", + "name": "newOrderBtn", + "width": 100, + "height": 90, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnNewOrderIcon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "QABtnNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "QABtnHold", + "name": "holdBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnHoldIcon", "width": 28, "height": 28, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnHoldText", "fill": "$text-secondary", "content": "Tạm giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "QABtnRecall", + "name": "recallBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QABtnRecallBadge", + "name": "badge", + "fill": "#EF4444", + "cornerRadius": 100, + "padding": [2, 6], + "position": "absolute", + "x": 70, + "y": 8, + "children": [ + {"type": "text", "id": "QABtnRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} + ] + }, + {"type": "icon_font", "id": "QABtnRecallIcon", "width": 28, "height": 28, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnRecallText", "fill": "$text-secondary", "content": "Đơn chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "QABtnDiscount", + "name": "discountBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnDiscountIcon", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnDiscountText", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "QABtnCustomer", + "name": "customerBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnCustomerIcon", "width": 28, "height": 28, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnCustomerText", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "QABtnPrint", + "name": "printBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnPrintIcon", "width": 28, "height": 28, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnPrintText", "fill": "$text-secondary", "content": "In bill", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "QABtnMore", + "name": "moreBtn", + "width": 100, + "height": 90, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QABtnMoreIcon", "width": 28, "height": 28, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "QABtnMoreText", "fill": "$text-secondary", "content": "Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuickActionsVerticalSection", + "name": "Quick Actions Vertical Section", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "QAVerticalHeader", + "name": "qaVerticalSectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QAVerticalBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "id": "QAVerticalBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SIDEBAR ACTIONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "id": "QAVerticalTitle", + "name": "shTitle", + "fill": "$text-primary", + "content": "Vertical Action Sidebar", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + } + ] + }, + { + "type": "frame", + "id": "QAVerticalExample", + "name": "qaVerticalExample", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": 40, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "QuickActionsSidebar", + "name": "Organism/QuickActions/Sidebar", + "reusable": true, + "width": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "padding": 12, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QASideNewOrder", + "name": "newOrderBtn", + "width": 48, + "height": 48, + "fill": "$orange-primary", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideNewOrderIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"} + ] + }, + { + "type": "frame", + "id": "QASideHold", + "name": "holdBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "QASideRecall", + "name": "recallBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "QASideDiscount", + "name": "discountBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "QASideCustomer", + "name": "customerBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "QASidePrint", + "name": "printBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASidePrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "QASideSpacer", + "name": "spacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "QASideSettings", + "name": "settingsBtn", + "width": 48, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "QASideSettingsIcon", "width": 22, "height": 22, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "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"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"} + } +} diff --git a/pencil-design/src/organisms/pos/receipt-preview.pen b/pencil-design/src/organisms/pos/receipt-preview.pen new file mode 100644 index 00000000..4574fc1b --- /dev/null +++ b/pencil-design/src/organisms/pos/receipt-preview.pen @@ -0,0 +1,356 @@ +{ + "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"} + } +}