From 77df15d074b54def5e91a0e47ed8d65ac4d46032 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Thu, 5 Feb 2026 23:41:26 +0700 Subject: [PATCH] feat: Implement new Customer Lookup modal and badge components in tPOS UI kit, improving user interface and functionality for customer management. --- pencil-design/src/pages/tPOS-main-cafe.pen | 782 ++++++++++++++++++ pencil-design/src/pages/tPOS-main-karaoke.pen | 135 +++ .../src/pages/tPOS-main-restaurant.pen | 226 +++++ pencil-design/src/pages/tPOS-main-spa.pen | 132 +++ 4 files changed, 1275 insertions(+) create mode 100644 pencil-design/src/pages/tPOS-main-cafe.pen create mode 100644 pencil-design/src/pages/tPOS-main-karaoke.pen create mode 100644 pencil-design/src/pages/tPOS-main-restaurant.pen create mode 100644 pencil-design/src/pages/tPOS-main-spa.pen diff --git a/pencil-design/src/pages/tPOS-main-cafe.pen b/pencil-design/src/pages/tPOS-main-cafe.pen new file mode 100644 index 00000000..94544156 --- /dev/null +++ b/pencil-design/src/pages/tPOS-main-cafe.pen @@ -0,0 +1,782 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSMainScreen", + "name": "POS Main Screen", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "POSLeftPanel", + "name": "leftPanel", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "POSHeader", + "name": "header", + "width": "fill_container", + "height": 64, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 24], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSHeaderLeft", + "name": "headerLeft", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSLogo", + "name": "logo", + "width": 40, + "height": 40, + "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "POSLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "POSStoreInfo", + "name": "storeInfo", + "layout": "vertical", + "gap": 2, + "children": [ + {"type": "text", "id": "POSStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "POSStoreLocation", "fill": "$text-secondary", "content": "Chi nhánh Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSHeaderCenter", + "name": "headerCenter", + "width": 400, + "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": "POSSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "POSSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "frame", "id": "POSSearchSpacer", "width": "fill_container", "height": 1}, + { + "type": "frame", + "id": "POSScanBtn", + "name": "scanBtn", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [6, 10], + "gap": 6, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSScanIcon", "width": 16, "height": 16, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "POSScanText", "fill": "$text-secondary", "content": "F2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSHeaderRight", + "name": "headerRight", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSDateTime", + "name": "dateTime", + "layout": "vertical", + "gap": 2, + "alignItems": "flex_end", + "children": [ + {"type": "text", "id": "POSTime", "fill": "$text-primary", "content": "23:19", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "POSDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "POSUserAvatar", + "name": "userAvatar", + "width": 40, + "height": 40, + "fill": "#3B82F630", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "POSUserInitials", "fill": "#3B82F6", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "POSCategoryBar", + "name": "categoryBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [12, 24], + "gap": 12, + "children": [ + { + "type": "frame", + "id": "POSCatAll", + "name": "catAll", + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "POSCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "POSCatDrinks", + "name": "catDrinks", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "POSCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "POSCatFood", + "name": "catFood", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "POSCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "POSCatDesserts", + "name": "catDesserts", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "POSCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "POSCatCombo", + "name": "catCombo", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [10, 20], + "children": [ + {"type": "text", "id": "POSCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProductArea", + "name": "productArea", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "gap": 20, + "wrap": true, + "alignContent": "flex_start", + "children": [ + { + "type": "frame", + "id": "POSProduct1", + "name": "product1", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct1Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, + { + "type": "frame", + "id": "POSProduct1Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct2", + "name": "product2", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct2Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, + { + "type": "frame", + "id": "POSProduct2Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct3", + "name": "product3", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct3Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, + { + "type": "frame", + "id": "POSProduct3Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct4", + "name": "product4", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct4Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, + { + "type": "frame", + "id": "POSProduct4Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct5", + "name": "product5", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct5Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#EC489918"}, + { + "type": "frame", + "id": "POSProduct5Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct6", + "name": "product6", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct6Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#06B6D418"}, + { + "type": "frame", + "id": "POSProduct6Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct6Name", "fill": "$text-primary", "content": "Nước Ép Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct6Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct7", + "name": "product7", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "POSProduct7Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F4393918"}, + { + "type": "frame", + "id": "POSProduct7Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct7Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct7Price", "fill": "$orange-primary", "content": "39,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSProduct8", + "name": "product8", + "width": 180, + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "layout": "vertical", + "clip": true, + "opacity": 0.5, + "children": [ + { + "type": "frame", + "id": "POSProduct8Img", + "name": "img", + "width": "fill_container", + "height": 120, + "fill": "$bg-interactive", + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "POSProduct8OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "POSProduct8Content", + "name": "content", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "padding": 14, + "children": [ + {"type": "text", "id": "POSProduct8Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSProduct8Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "POSBottomBar", + "name": "bottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 24], + "gap": 12, + "children": [ + { + "type": "frame", + "id": "POSQuickNewOrder", + "name": "newOrderBtn", + "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, + "padding": [0, 20], + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickNewOrderIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "POSQuickNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "POSQuickHold", + "name": "holdBtn", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "POSQuickRecall", + "name": "recallBtn", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + { + "type": "frame", + "id": "POSQuickRecallBadge", + "name": "badge", + "fill": "#EF4444", + "cornerRadius": 100, + "padding": [2, 5], + "position": "absolute", + "x": 34, + "y": 6, + "children": [ + {"type": "text", "id": "POSQuickRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSQuickDiscount", + "name": "discountBtn", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "POSQuickCustomer", + "name": "customerBtn", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + }, + { + "type": "frame", + "id": "POSQuickPrint", + "name": "printBtn", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSQuickPrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "POSRightPanel", + "name": "rightPanel", + "width": 420, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "POSOrderHeader", + "name": "orderHeader", + "width": "fill_container", + "padding": [16, 20], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSOrderInfo", + "name": "orderInfo", + "layout": "vertical", + "gap": 4, + "children": [ + {"type": "text", "id": "POSOrderNum", "fill": "$text-primary", "content": "Đơn #0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, + {"type": "text", "id": "POSOrderTable", "fill": "$text-secondary", "content": "Bàn 12 • 3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "POSOrderActions", + "name": "orderActions", + "gap": 8, + "children": [ + {"type": "frame", "id": "POSOrderHoldBtn", "name": "holdBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, + {"type": "frame", "id": "POSOrderMoreBtn", "name": "moreBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]} + ] + } + ] + }, + { + "type": "frame", + "id": "POSOrderItems", + "name": "orderItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "POSOrderItem1", + "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": "POSOrderItem1Left", + "name": "leftContent", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "POSOrderItem1Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + { + "type": "frame", + "id": "POSOrderItem1Info", + "name": "itemInfo", + "layout": "vertical", + "gap": 2, + "children": [ + {"type": "text", "id": "POSOrderItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "POSOrderItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ] + } + ] + }, + {"type": "text", "id": "POSOrderItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "POSOrderItem2", + "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": "POSOrderItem2Left", + "name": "leftContent", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "POSOrderItem2Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "text", "id": "POSOrderItem2Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + {"type": "text", "id": "POSOrderItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + }, + { + "type": "frame", + "id": "POSOrderItem3", + "name": "orderItem3", + "width": "fill_container", + "padding": [14, 20], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSOrderItem3Left", + "name": "leftContent", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "POSOrderItem3Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "text", "id": "POSOrderItem3Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + {"type": "text", "id": "POSOrderItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSOrderSummary", + "name": "orderSummary", + "width": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "padding": 20, + "gap": 12, + "children": [ + { + "type": "frame", + "id": "POSSummarySubtotal", + "name": "subtotalRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "POSSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "POSSubtotalValue", "fill": "$text-primary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "POSSummaryDiscount", + "name": "discountRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "POSDiscountLabel", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, + {"type": "text", "id": "POSDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "POSSummaryDivider", + "name": "divider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "POSSummaryTotal", + "name": "totalRow", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + {"type": "text", "id": "POSTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, + {"type": "text", "id": "POSTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} + ] + } + ] + }, + { + "type": "frame", + "id": "POSPaymentBtn", + "name": "paymentBtn", + "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}]}, + "gap": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "POSPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "POSPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "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-primary": {"type": "color", "value": "#FF5C00"}, + "text-disabled": {"type": "color", "value": "#6B6B70"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS-main-karaoke.pen b/pencil-design/src/pages/tPOS-main-karaoke.pen new file mode 100644 index 00000000..17623131 --- /dev/null +++ b/pencil-design/src/pages/tPOS-main-karaoke.pen @@ -0,0 +1,135 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSKaraokeScreen", + "name": "POS Karaoke Screen", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "KtvSidebar", + "name": "sidebar", + "width": 300, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "KtvSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvStoreName", "fill": "$text-primary", "content": "GoodGo Karaoke", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvBranch", "fill": "$text-secondary", "content": "Chi nhánh Hai Bà Trưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + { + "type": "frame", + "id": "KtvRoomArea", + "name": "roomArea", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": 16, + "gap": 12, + "children": [ + {"type": "frame", "id": "KtvRoomFilter", "width": "fill_container", "gap": 8, "children": [{"type": "frame", "id": "KtvFilterAll", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvFilterVIP", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvFilterNormal", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterNormalText", "fill": "$text-secondary", "content": "Thường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, + { + "type": "frame", + "id": "KtvRoomGrid", + "name": "roomGrid", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + {"type": "frame", "id": "KtvRoom1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Icon", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom1IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvRoom1Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom1Name", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom1Time", "fill": "$orange-primary", "content": "02:45 • 6 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom1Price", "fill": "$text-primary", "content": "450K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "frame", "id": "KtvRoom2", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom2IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom2Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom2Name", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom2Time", "fill": "#EF4444", "content": "01:30 • 8 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom2Price", "fill": "$text-primary", "content": "380K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "frame", "id": "KtvRoom3", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Icon", "width": 44, "height": 44, "fill": "#22C55E30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom3IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, {"type": "frame", "id": "KtvRoom3Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom3Name", "fill": "$text-primary", "content": "VIP 03", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom3Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom3Rate", "fill": "$text-secondary", "content": "150K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "KtvRoom4", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Icon", "width": 44, "height": 44, "fill": "#F59E0B30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom4IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#F59E0B"}]}, {"type": "frame", "id": "KtvRoom4Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom4Name", "fill": "$text-primary", "content": "Phòng 04", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom4Status", "fill": "#F59E0B", "content": "Đặt trước 20:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom4Rate", "fill": "$text-secondary", "content": "80K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "KtvRoom5", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom5IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom5Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom5Name", "fill": "$text-primary", "content": "Phòng 05", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom5Time", "fill": "#EF4444", "content": "00:45 • 4 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom5Price", "fill": "$text-primary", "content": "120K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} + ] + }, + {"type": "frame", "id": "KtvRoomLegend", "width": "fill_container", "gap": 12, "wrap": true, "children": [{"type": "frame", "id": "KtvLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "KtvLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "KtvLegOccText", "fill": "$text-tertiary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "KtvLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]} + ] + } + ] + }, + { + "type": "frame", + "id": "KtvMainContent", + "name": "mainContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "KtvHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvHeaderRoomInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvRoomBadgeText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvRoomInfoDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvRoomGuest", "fill": "$text-primary", "content": "6 khách • Từ 19:15", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "KtvRoomTimer", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvTimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "KtvTimerText", "fill": "$orange-primary", "content": "02:45:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "KtvSearchBox", "width": 360, "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": "KtvSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "KtvSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "KtvDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "KtvTime", "fill": "$text-primary", "content": "22:00", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvUserAvatar", "width": 40, "height": 40, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvUserInit", "fill": "#8B5CF6", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "KtvCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCatBeerIcon", "width": 14, "height": 14, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSoftDrink", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSoftDrinkText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatFruit", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatFruitText", "fill": "$text-secondary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatCombo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]}, + { + "type": "frame", + "id": "KtvProductArea", + "name": "productArea", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "gap": 20, + "wrap": true, + "alignContent": "flex_start", + "children": [ + {"type": "frame", "id": "KtvProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd1Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "KtvProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd1Price", "fill": "$orange-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KtvProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd2Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "KtvProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KtvProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd3Img", "width": "fill_container", "height": 120, "fill": "#EC489918"}, {"type": "frame", "id": "KtvProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KtvProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "KtvProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd4Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KtvProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd5Img", "width": "fill_container", "height": 120, "fill": "#06B6D418"}, {"type": "frame", "id": "KtvProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd5Name", "fill": "$text-primary", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd5Price", "fill": "$orange-primary", "content": "15,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KtvProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd6Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "KtvProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd6Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd6Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]} + ] + }, + {"type": "frame", "id": "KtvBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvQuickExtend", "height": 52, "fill": "#8B5CF6", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickExtendIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvQuickExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "arrow-right-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickMoveText", "fill": "$text-secondary", "content": "Đổi phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickService", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickServiceIcon", "width": 20, "height": 20, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickServiceText", "fill": "$text-secondary", "content": "Gọi phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]} + ] + }, + { + "type": "frame", + "id": "KtvOrderPanel", + "name": "orderPanel", + "width": 380, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "KtvOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvOrderTitle", "fill": "$text-primary", "content": "VIP 01 - Bill", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvOrderSub", "fill": "$text-secondary", "content": "Giờ phòng: 02:45 × 150K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, + { + "type": "frame", + "id": "KtvOrderItems", + "name": "orderItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + {"type": "frame", "id": "KtvOrdRoomFee", "width": "fill_container", "fill": "#8B5CF610", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeLeft", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeIcon", "width": 32, "height": 32, "fill": "#8B5CF630", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrdRoomFeeIconFont", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvOrdRoomFeeInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvOrdRoomFeeName", "fill": "#8B5CF6", "content": "Giờ phòng VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KtvOrdRoomFeeDetail", "fill": "$text-tertiary", "content": "02:45 × 150,000₫/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "KtvOrdRoomFeePrice", "fill": "#8B5CF6", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "frame", "id": "KtvOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem1Price", "fill": "$text-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "KtvOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "KtvOrdItem3", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem3Price", "fill": "$text-primary", "content": "240,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ] + }, + {"type": "frame", "id": "KtvOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "KtvSummRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvRoomValue", "fill": "$text-primary", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvFoodLabel", "fill": "$text-secondary", "content": "Đồ uống/Snack", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvFoodValue", "fill": "$text-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "KtvSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "KtvTotalValue", "fill": "$orange-primary", "content": "1,242,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]}, + {"type": "frame", "id": "KtvPaymentBtn", "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}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvPaymentText", "fill": "$text-primary", "content": "Tất toán", "fontFamily": "Roboto", "fontSize": 18, "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"}, + "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/pages/tPOS-main-restaurant.pen b/pencil-design/src/pages/tPOS-main-restaurant.pen new file mode 100644 index 00000000..4e632a05 --- /dev/null +++ b/pencil-design/src/pages/tPOS-main-restaurant.pen @@ -0,0 +1,226 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSRestaurantScreen", + "name": "POS Restaurant Screen", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "RestSidebar", + "name": "sidebar", + "width": 280, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "RestSideHeader", + "name": "sideHeader", + "width": "fill_container", + "padding": 20, + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RestLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, + {"type": "frame", "id": "RestStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestStoreName", "fill": "$text-primary", "content": "Nhà Hàng GoodGo", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "RestBranch", "fill": "$text-secondary", "content": "Chi nhánh Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} + ] + }, + { + "type": "frame", + "id": "RestTableMapArea", + "name": "tableMapArea", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": 16, + "gap": 12, + "clip": true, + "children": [ + { + "type": "frame", + "id": "RestFloorTabs", + "name": "floorTabs", + "width": "fill_container", + "gap": 8, + "children": [ + {"type": "frame", "id": "RestFloor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestFloor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "RestTableGrid", + "name": "tableGrid", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 8, + "clip": true, + "children": [ + {"type": "frame", "id": "RestTableRow1", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [ + {"type": "frame", "id": "RestTable1", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable1Num", "fill": "$text-primary", "content": "01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable1Info", "fill": "$orange-primary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTable2", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable2Num", "fill": "#EF4444", "content": "02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable2Info", "fill": "#EF4444", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTable3", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable3Num", "fill": "#22C55E", "content": "03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable3Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "RestTableRow2", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [ + {"type": "frame", "id": "RestTable4", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable4Num", "fill": "#22C55E", "content": "04", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable4Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTable5", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable5Num", "fill": "#EF4444", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable5Info", "fill": "#EF4444", "content": "6 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTable6", "width": 72, "height": 72, "fill": "#F59E0B20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable6Num", "fill": "#F59E0B", "content": "06", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable6Info", "fill": "#F59E0B", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} + ]} + ] + }, + { + "type": "frame", + "id": "RestTableLegend", + "name": "tableLegend", + "width": "fill_container", + "gap": 12, + "wrap": true, + "children": [ + {"type": "frame", "id": "RestLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "RestLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, + {"type": "frame", "id": "RestLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "RestLegOccText", "fill": "$text-tertiary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, + {"type": "frame", "id": "RestLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "RestLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]} + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RestMainContent", + "name": "mainContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "RestHeader", + "name": "header", + "width": "fill_container", + "height": 64, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 24], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RestHeaderTableInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestTableBadgeText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "RestGuestInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestGuestCount", "fill": "$text-primary", "content": "2 khách • 45 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestWaiter", "fill": "$text-secondary", "content": "Phục vụ: Minh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + {"type": "frame", "id": "RestSearchBox", "width": 360, "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": "RestSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "RestSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm món ăn, đồ uống...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, + {"type": "frame", "id": "RestHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "RestDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "RestTime", "fill": "$text-primary", "content": "23:26", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestUserAvatar", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestUserInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]} + ] + }, + { + "type": "frame", + "id": "RestCategoryBar", + "name": "categoryBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [12, 24], + "gap": 12, + "children": [ + {"type": "frame", "id": "RestCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestCatAppetizer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAppetizerText", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestCatSeafood", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatSeafoodText", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestCatWine", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCatWineIcon", "width": 14, "height": 14, "iconFontName": "wine", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestCatWineText", "fill": "$text-secondary", "content": "Rượu/Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "RestProductArea", + "name": "productArea", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "gap": 20, + "wrap": true, + "alignContent": "flex_start", + "children": [ + {"type": "frame", "id": "RestProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd1Img", "width": "fill_container", "height": 120, "fill": "#EF444418"}, {"type": "frame", "id": "RestProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd2Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd3Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "RestProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "RestProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd5Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd5Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd6Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]} + ] + }, + { + "type": "frame", + "id": "RestBottomBar", + "name": "bottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 24], + "gap": 12, + "children": [ + {"type": "frame", "id": "RestQuickSplit", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickSplitIcon", "width": 20, "height": 20, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickSplitText", "fill": "$text-secondary", "content": "Tách bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestQuickMerge", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMergeIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMergeText", "fill": "$text-secondary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "move", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMoveText", "fill": "$text-secondary", "content": "Chuyển bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestQuickKitchen", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickKitchenIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestQuickKitchenText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ] + } + ] + }, + { + "type": "frame", + "id": "RestOrderPanel", + "name": "orderPanel", + "width": 380, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "RestOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "RestOrderNum", "fill": "$text-primary", "content": "Bàn 01 - Đơn #0089", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestOrderItemsCount", "fill": "$text-secondary", "content": "4 món • 2 đang chờ bếp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, + { + "type": "frame", + "id": "RestOrderItems", + "name": "orderItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + {"type": "frame", "id": "RestOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem1StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem2StatusText", "fill": "#F59E0B", "content": "Đang chờ bếp", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestOrdItem3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem3Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem3StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem3Price", "fill": "$text-primary", "content": "70,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestOrdItem4", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem4QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem4Status", "fill": "#3B82F620", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem4StatusText", "fill": "#3B82F6", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem4Price", "fill": "$text-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ] + }, + {"type": "frame", "id": "RestOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "RestSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "RestSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "RestTotalValue", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]}, + {"type": "frame", "id": "RestPaymentBtn", "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}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "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"}, + "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/pages/tPOS-main-spa.pen b/pencil-design/src/pages/tPOS-main-spa.pen new file mode 100644 index 00000000..ada58cab --- /dev/null +++ b/pencil-design/src/pages/tPOS-main-spa.pen @@ -0,0 +1,132 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSSpaScreen", + "name": "POS Spa Screen", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SpaSidebar", + "name": "sidebar", + "width": 320, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "SpaSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaStoreName", "fill": "$text-primary", "content": "GoodGo Beauty Spa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SpaBranch", "fill": "$text-secondary", "content": "Chi nhánh Phú Mỹ Hưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + { + "type": "frame", + "id": "SpaAppointmentArea", + "name": "appointmentArea", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": 16, + "gap": 12, + "children": [ + {"type": "frame", "id": "SpaDatePicker", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCalendarIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaDateText", "fill": "$text-primary", "content": "Hôm nay, 05/02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "icon_font", "id": "SpaDateChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, + {"type": "text", "id": "SpaApptLabel", "fill": "$text-secondary", "content": "Lịch hẹn hôm nay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + { + "type": "frame", + "id": "SpaApptList", + "name": "appointmentList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + {"type": "frame", "id": "SpaAppt1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Time", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt1TimeText", "fill": "#22C55E", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt1Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Avatar", "width": 36, "height": 36, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt1Init", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt1Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt1Service", "fill": "$text-secondary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt1Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt1StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt1StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + {"type": "frame", "id": "SpaAppt2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Time", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt2TimeText", "fill": "#F59E0B", "content": "11:30 - 12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt2StatusText", "fill": "#F59E0B", "content": "Chờ đến", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt2Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Avatar", "width": 36, "height": 36, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt2Init", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt2Name", "fill": "$text-primary", "content": "Nguyễn Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt2Service", "fill": "$text-secondary", "content": "Nail Art", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt2Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt2StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt2StaffName", "fill": "$text-tertiary", "content": "NV: Mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + {"type": "frame", "id": "SpaAppt3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt3TimeText", "fill": "$text-secondary", "content": "14:00 - 15:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt3StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt3Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Avatar", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt3Init", "fill": "#8B5CF6", "content": "PT", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt3Name", "fill": "$text-primary", "content": "Phạm Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt3Service", "fill": "$text-secondary", "content": "Triệt lông", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt3Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt3StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt3StaffName", "fill": "$text-tertiary", "content": "NV: Lan", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, + {"type": "frame", "id": "SpaAppt4", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt4TimeText", "fill": "$text-secondary", "content": "15:30 - 17:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt4StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt4Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Avatar", "width": 36, "height": 36, "fill": "#06B6D430", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt4Init", "fill": "#06B6D4", "content": "LM", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt4Name", "fill": "$text-primary", "content": "Lê My", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt4Service", "fill": "$text-secondary", "content": "Full Body Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt4Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt4StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt4StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]} + ] + }, + {"type": "frame", "id": "SpaAddApptBtn", "width": "fill_container", "height": 44, "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAddApptIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaAddApptText", "fill": "$text-secondary", "content": "Thêm lịch hẹn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + } + ] + }, + { + "type": "frame", + "id": "SpaMainContent", + "name": "mainContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "SpaHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaHeaderCustomerInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaCustomerAvatar", "width": 44, "height": 44, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaCustomerInit", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCustomerDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaCustomerName", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "frame", "id": "SpaCustomerPoints", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPointsIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "SpaPointsText", "fill": "#F59E0B", "content": "VIP Gold • 2,500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SpaSearchBox", "width": 360, "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": "SpaSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm dịch vụ, sản phẩm...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "SpaTime", "fill": "$text-primary", "content": "10:45", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaUserAvatar", "width": 40, "height": 40, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaUserInit", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCatFacial", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCatFacialIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaCatFacialText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatProducts", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatProductsText", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]}, + { + "type": "frame", + "id": "SpaProductArea", + "name": "productArea", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "gap": 20, + "wrap": true, + "alignContent": "flex_start", + "children": [ + {"type": "frame", "id": "SpaProd1", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd1Img", "width": "fill_container", "height": 130, "fill": "#EC489918"}, {"type": "frame", "id": "SpaProd1Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd1Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd1DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd1DurationText", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd1Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "SpaProd2", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd2Img", "width": "fill_container", "height": 130, "fill": "#8B5CF618"}, {"type": "frame", "id": "SpaProd2Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd2Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd2DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd2DurationText", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd2Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "SpaProd3", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd3Img", "width": "fill_container", "height": 130, "fill": "#F59E0B18"}, {"type": "frame", "id": "SpaProd3Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd3Name", "fill": "$text-primary", "content": "Sơn gel cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd3Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd3DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd3DurationText", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "SpaProd4", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd4Img", "width": "fill_container", "height": 130, "fill": "#22C55E18"}, {"type": "frame", "id": "SpaProd4Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd4Name", "fill": "$text-primary", "content": "Triệt lông vĩnh viễn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd4Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd4DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd4DurationText", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd4Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "SpaProd5", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd5Img", "width": "fill_container", "height": 130, "fill": "#3B82F618"}, {"type": "frame", "id": "SpaProd5Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd5Name", "fill": "$text-primary", "content": "Uốn/Duỗi tóc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd5Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd5DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd5DurationText", "fill": "$text-tertiary", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd5Price", "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]} + ] + }, + {"type": "frame", "id": "SpaBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaQuickStaff", "height": 52, "fill": "#EC4899", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickStaffIcon", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaQuickStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaQuickHistory", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickHistoryIcon", "width": 20, "height": 20, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickPackage", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickPackageIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickPackageText", "fill": "$text-secondary", "content": "Gói dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]} + ] + }, + { + "type": "frame", + "id": "SpaOrderPanel", + "name": "orderPanel", + "width": 380, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "SpaOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "SpaOrderTitle", "fill": "$text-primary", "content": "Hóa đơn - Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaOrderSub", "fill": "$text-secondary", "content": "Lịch hẹn 10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, + { + "type": "frame", + "id": "SpaOrderItems", + "name": "orderItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + {"type": "frame", "id": "SpaOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem1Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem1Price", "fill": "$text-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaOrdItem2", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem2Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ] + }, + {"type": "frame", "id": "SpaOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "SpaSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaSubtotalValue", "fill": "$text-primary", "content": "1,100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaPointsLabel", "fill": "$text-secondary", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "SpaSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "SpaTotalValue", "fill": "$orange-primary", "content": "1,050,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaSummEarn", "width": "fill_container", "justifyContent": "flex_end", "children": [{"type": "text", "id": "SpaEarnText", "fill": "#F59E0B", "content": "+105 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, + {"type": "frame", "id": "SpaPaymentBtn", "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}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "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"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +}