feat: refine tPOS UI by adding new customer feedback features and enhancing existing dialog components, improving user interaction and overall experience across workflows.
This commit is contained in:
Ho Ngoc Hai
126
pencil-design/src/pages/tPOS/pos/cafe/workflow/loyalty-stamp.pen
Normal file
126
pencil-design/src/pages/tPOS/pos/cafe/workflow/loyalty-stamp.pen
Normal file
@@ -0,0 +1,126 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyStampDialog",
|
||||
"name": "Dialog/LoyaltyStamp",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 500,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyStampHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LoyaltyStampHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LoyaltyStampIconBg", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LoyaltyStampIcon", "width": 20, "height": 20, "iconFontName": "stamp", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "text", "id": "LoyaltyStampTitle", "fill": "$text-primary", "content": "Thẻ tích điểm", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "LoyaltyStampCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LoyaltyStampCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyStampContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LoyaltyStampCustomer", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LoyaltyStampAvatar", "width": 44, "height": 44, "fill": "#D4A37430", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LoyaltyStampInitial", "fill": "#D4A374", "content": "HN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "LoyaltyStampCustomerInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "LoyaltyStampCustomerName", "fill": "$text-primary", "content": "Hoàng Nam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LoyaltyStampCustomerPhone", "fill": "$text-tertiary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LoyaltyStampCard", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#D4A374", "position": 0}, {"color": "#B8956A", "position": 1}]}, "cornerRadius": 18, "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "LoyaltyStampCardHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LoyaltyStampCardTitle", "fill": "$text-primary", "content": "☕ Coffee Loyalty", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LoyaltyStampCardCount", "fill": "$text-primary", "content": "7/10", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LoyaltyStampGrid", "width": "fill_container", "gap": 10, "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "Stamp1", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp1Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp2", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp2Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp3", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp3Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp4", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp4Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp5", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp5Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp6", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp6Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp7", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp7Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "Stamp8", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}},
|
||||
{"type": "frame", "id": "Stamp9", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}},
|
||||
{"type": "frame", "id": "Stamp10", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Stamp10Gift", "width": 16, "height": 16, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#FFFFFF80"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "LoyaltyStampReward", "fill": "#FFFFFFCC", "content": "Còn 3 stamp nữa - Nhận 1 ly FREE!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500", "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "LoyaltyStampAddInfo", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": [12, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LoyaltyStampAddIcon", "width": 18, "height": 18, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "frame", "id": "LoyaltyStampAddText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "LoyaltyStampAddTitle", "fill": "#22C55E", "content": "+1 stamp từ đơn hàng này", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LoyaltyStampAddDesc", "fill": "$text-tertiary", "content": "Mua 1 Latte - 55,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyStampFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "LoyaltyStampConfirmBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LoyaltyStampConfirmIcon", "width": 20, "height": 20, "iconFontName": "stamp", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "LoyaltyStampConfirmText", "fill": "$text-primary", "content": "Tích điểm", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MilkFoamOptionsDialog",
|
||||
"name": "Dialog/MilkFoamOptions",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 540,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MilkFoamHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MilkFoamHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MilkFoamIconBg", "width": 40, "height": 40, "fill": "#D4A37420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MilkFoamIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#D4A374"}
|
||||
]},
|
||||
{"type": "text", "id": "MilkFoamTitle", "fill": "$text-primary", "content": "Tùy chỉnh đồ uống", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkFoamCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MilkFoamCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MilkFoamContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "MilkFoamProductInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MilkFoamProductImg", "width": 48, "height": 48, "fill": "#D4A37420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MilkFoamProductIcon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#D4A374"}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkFoamProductText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MilkFoamProductName", "fill": "$text-primary", "content": "Latte - Size L", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "MilkFoamProductPrice", "fill": "$orange-primary", "content": "55,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkTypeSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "MilkTypeLabel", "fill": "$text-secondary", "content": "Loại sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "MilkTypeOptions", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MilkType1", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MilkType1Text", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkType2", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MilkType2Text", "fill": "$text-secondary", "content": "Sữa yến mạch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkType3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MilkType3Text", "fill": "$text-secondary", "content": "Sữa hạnh nhân", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FoamSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "FoamLabel", "fill": "$text-secondary", "content": "Foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "FoamOptions", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "Foam1", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Foam1Text", "fill": "$text-secondary", "content": "Không foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Foam2", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Foam2Text", "fill": "$text-primary", "content": "Foam thường", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Foam3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Foam3Text", "fill": "$text-secondary", "content": "Extra foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtraSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ExtraLabel", "fill": "$text-secondary", "content": "Thêm topping (+10,000₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ExtraOptions", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "Extra1", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "stroke": {"thickness": 2, "fill": "#22C55E"}, "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "Extra1Check", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "Extra1Text", "fill": "$text-primary", "content": "Shot espresso", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Extra2", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "children": [
|
||||
{"type": "text", "id": "Extra2Text", "fill": "$text-secondary", "content": "Caramel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Extra3", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "children": [
|
||||
{"type": "text", "id": "Extra3Text", "fill": "$text-secondary", "content": "Vanilla", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MilkFoamFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MilkFoamTotal", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MilkFoamTotalLabel", "fill": "$text-tertiary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "MilkFoamTotalValue", "fill": "$orange-primary", "content": "65,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MilkFoamAddBtn", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MilkFoamAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "MilkFoamAddText", "fill": "$text-primary", "content": "Thêm vào đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardDialog",
|
||||
"name": "Dialog/MemberCard",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 540,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MemberCardHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MemberCardIconBg", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberCardIcon", "width": 20, "height": 20, "iconFontName": "id-card", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "text", "id": "MemberCardTitle", "fill": "$text-primary", "content": "Thẻ thành viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberCardCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "MemberKaraokeCard", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#8B5CF6", "position": 0}, {"color": "#6D28D9", "position": 1}]}, "cornerRadius": 18, "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "MemberCardTop", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "MemberCardTopLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "MemberCardBrand", "fill": "#FFFFFFCC", "content": "🎤 KARAOKE VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "MemberCardTier", "fill": "$text-primary", "content": "Gold Member", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardBadge", "fill": "#FFD70060", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "MemberCardBadgeText", "fill": "#FFD700", "content": "⭐ VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardCustomer", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MemberCardName", "fill": "$text-primary", "content": "TRẦN MINH KHÔI", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "MemberCardId", "fill": "#FFFFFFAA", "content": "ID: MBR-2024-08765", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardStats", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "MemberCardStat1", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MemberCardStat1Label", "fill": "#FFFFFF80", "content": "Điểm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "MemberCardStat1Value", "fill": "$text-primary", "content": "4,850", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardStat2", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MemberCardStat2Label", "fill": "#FFFFFF80", "content": "Giờ hát", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "MemberCardStat2Value", "fill": "$text-primary", "content": "156h", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardStat3", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MemberCardStat3Label", "fill": "#FFFFFF80", "content": "Hạn thẻ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "MemberCardStat3Value", "fill": "$text-primary", "content": "12/2025", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberBenefits", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "MemberBenefitsLabel", "fill": "$text-secondary", "content": "Quyền lợi thành viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "MemberBenefit1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberBenefit1Icon", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "MemberBenefit1Text", "fill": "$text-primary", "content": "Giảm 20% giá phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberBenefit2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberBenefit2Icon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "MemberBenefit2Text", "fill": "$text-primary", "content": "Tặng 30 phút mỗi 2 giờ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberBenefit3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberBenefit3Icon", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#EC4899"},
|
||||
{"type": "text", "id": "MemberBenefit3Text", "fill": "$text-primary", "content": "Sinh nhật: 2h miễn phí", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "MemberCardTopUpBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberCardTopUpIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MemberCardTopUpText", "fill": "$text-secondary", "content": "Nạp điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MemberCardApplyBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MemberCardApplyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "MemberCardApplyText", "fill": "$text-primary", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AllergenWarningDialog",
|
||||
"name": "Dialog/AllergenWarning",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 560,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AllergenHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "AllergenHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AllergenIconBg", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenIcon", "width": 20, "height": 20, "iconFontName": "triangle-alert", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "text", "id": "AllergenTitle", "fill": "$text-primary", "content": "Cảnh báo dị ứng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AllergenContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "AllergenWarningBanner", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenWarningIcon", "width": 36, "height": 36, "iconFontName": "octagon-alert", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "AllergenWarningText", "fill": "#EF4444", "content": "Khách hàng có dị ứng!", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700", "textAlign": "center"},
|
||||
{"type": "text", "id": "AllergenWarningDesc", "fill": "$text-secondary", "content": "Vui lòng kiểm tra kỹ trước khi phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal", "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenCustomerInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AllergenCustomerAvatar", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AllergenCustomerInitial", "fill": "#8B5CF6", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenCustomerText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "AllergenCustomerName", "fill": "$text-primary", "content": "Trần Lan", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "AllergenCustomerTable", "fill": "$text-tertiary", "content": "Bàn 12 • Đơn #1847", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "AllergenListLabel", "fill": "$text-secondary", "content": "Thành phần dị ứng:", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "AllergenTags", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "AllergenTag1", "fill": "#EF444420", "cornerRadius": 10, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenTag1Icon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "AllergenTag1Text", "fill": "#EF4444", "content": "Đậu phộng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenTag2", "fill": "#EF444420", "cornerRadius": 10, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenTag2Icon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "AllergenTag2Text", "fill": "#EF4444", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenAffectedItems", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "AllergenAffectedLabel", "fill": "$text-secondary", "content": "Món có thể bị ảnh hưởng:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "AllergenAffected1", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AllergenAffected1Dot", "width": 6, "height": 6, "fill": "#EF4444", "cornerRadius": 3},
|
||||
{"type": "text", "id": "AllergenAffected1Text", "fill": "$text-primary", "content": "Pad Thái (có đậu phộng)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "AllergenAffected2", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AllergenAffected2Dot", "width": 6, "height": 6, "fill": "#EF4444", "cornerRadius": 3},
|
||||
{"type": "text", "id": "AllergenAffected2Text", "fill": "$text-primary", "content": "Gỏi cuốn tôm (có hải sản)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AllergenFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "AllergenAckBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#EF4444", "position": 0}, {"color": "#DC2626", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AllergenAckIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "AllergenAckText", "fill": "$text-primary", "content": "Đã hiểu, tiếp tục", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CourseTimingDialog",
|
||||
"name": "Dialog/CourseTiming",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 500,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CourseTimingHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CourseTimingHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CourseTimingIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CourseTimingIcon", "width": 20, "height": 20, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "CourseTimingTitle", "fill": "$text-primary", "content": "Thời gian lên món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CourseTimingCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CourseTimingCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CourseTimingContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CourseTimingTableInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CourseTimingTableLeft", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CourseTimingTableIcon", "width": 36, "height": 36, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CourseTimingTableNum", "fill": "#3B82F6", "content": "08", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CourseTimingTableText", "fill": "$text-primary", "content": "Bàn 08 • 6 khách", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CourseTimingTableOrder", "fill": "$text-tertiary", "content": "Đơn #1852", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "CourseTimingList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "CourseTimingListLabel", "fill": "$text-secondary", "content": "Thứ tự lên món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Course1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Course1Num", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Course1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "Course1Name", "fill": "$text-primary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "Course1Items", "fill": "$text-tertiary", "content": "Gỏi cuốn, Súp hải sản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course1Status", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Course1StatusText", "fill": "#22C55E", "content": "Đã lên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Course2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "children": [
|
||||
{"type": "frame", "id": "Course2Num", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Course2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "Course2Name", "fill": "$text-primary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "Course2Items", "fill": "$text-tertiary", "content": "Bò lúc lắc, Cá nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course2Status", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Course2StatusText", "fill": "#F59E0B", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Course3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Course3Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Course3NumText", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "Course3Name", "fill": "$text-primary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "Course3Items", "fill": "$text-tertiary", "content": "Chè, Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "Course3Status", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Course3StatusText", "fill": "$text-tertiary", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CourseTimingFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "CourseTimingFireBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#F59E0B", "position": 0}, {"color": "#D97706", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CourseTimingFireIcon", "width": 18, "height": 18, "iconFontName": "flame", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CourseTimingFireText", "fill": "$text-primary", "content": "Fire món tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CourseTimingDoneBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CourseTimingDoneIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CourseTimingDoneText", "fill": "$text-primary", "content": "Đánh dấu đã lên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableMergeSplitDialog",
|
||||
"name": "Dialog/TableMergeSplit",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 440,
|
||||
"height": 520,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableMSHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableMSHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TableMSIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableMSIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "text", "id": "TableMSTitle", "fill": "$text-primary", "content": "Gộp / Tách bàn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableMSCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableMSContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableMSTabs", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 4, "gap": 4, "children": [
|
||||
{"type": "frame", "id": "TableMSTabMerge", "width": "fill_container", "height": 40, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMSTabMergeText", "fill": "$text-primary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSTabSplit", "width": "fill_container", "height": 40, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMSTabSplitText", "fill": "$text-tertiary", "content": "Tách bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSSelectedTable", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TableMSSelectedIcon", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMSSelectedNumber", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSSelectedInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TableMSSelectedName", "fill": "$text-primary", "content": "Bàn 05 - Đang gộp", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TableMSSelectedSub", "fill": "$text-tertiary", "content": "4 khách • 285,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSTargetSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "TableMSTargetLabel", "fill": "$text-secondary", "content": "Chọn bàn để gộp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "TableMSGrid", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "TableMSRow1", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "TableMS06", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS06Num", "fill": "#22C55E", "content": "06", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS06Sub", "fill": "$text-tertiary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS07", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS07Num", "fill": "$text-primary", "content": "07", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS07Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS08", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS08Num", "fill": "$text-primary", "content": "08", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS08Sub", "fill": "$text-tertiary", "content": "3 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS09", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS09Num", "fill": "$text-tertiary", "content": "09", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS09Sub", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSRow2", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "TableMS10", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS10Num", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS10Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS11", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS11Num", "fill": "$text-primary", "content": "11", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS11Sub", "fill": "$text-tertiary", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS12", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS12Num", "fill": "#22C55E", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS12Sub", "fill": "$text-tertiary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMS13", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TableMS13Num", "fill": "$text-primary", "content": "13", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TableMS13Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableMSSummary", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": [10, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableMSSummaryIcon", "width": 16, "height": 16, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "TableMSSummaryText", "fill": "#22C55E", "content": "Đã chọn 2 bàn để gộp: 06, 12", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableMSFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableMSMergeBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableMSMergeIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "TableMSMergeText", "fill": "$text-primary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ChangeCalculatorDialog",
|
||||
"name": "Dialog/ChangeCalculator",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ChangeCalcHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ChangeCalcHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ChangeCalcIconBg", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ChangeCalcIcon", "width": 20, "height": 20, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "text", "id": "ChangeCalcTitle", "fill": "$text-primary", "content": "Tính tiền thối", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeCalcCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ChangeCalcCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ChangeCalcContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ChangeCalcAmounts", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ChangeCalcTotal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeCalcTotalLabel", "fill": "$text-secondary", "content": "Tổng tiền:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ChangeCalcTotalValue", "fill": "$text-primary", "content": "387,500₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeCalcReceived", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeCalcReceivedLabel", "fill": "$text-secondary", "content": "Tiền nhận:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ChangeCalcReceivedValue", "fill": "#3B82F6", "content": "500,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeCalcDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ChangeCalcChange", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeCalcChangeLabel", "fill": "$text-primary", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ChangeCalcChangeValue", "fill": "#22C55E", "content": "112,500₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeCalcBreakdown", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "ChangeCalcBreakdownLabel", "fill": "$text-secondary", "content": "Gợi ý thối tiền:", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "ChangeCalcBreakdownRow1", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "ChangeBreak1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeBreak1Denom", "fill": "$text-primary", "content": "100,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ChangeBreak1Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeBreak2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeBreak2Denom", "fill": "$text-primary", "content": "10,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ChangeBreak2Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeCalcBreakdownRow2", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "ChangeBreak3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeBreak3Denom", "fill": "$text-primary", "content": "2,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ChangeBreak3Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ChangeBreak4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ChangeBreak4Denom", "fill": "$text-primary", "content": "500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ChangeBreak4Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ChangeCalcFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "ChangeCalcDoneBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ChangeCalcDoneIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ChangeCalcDoneText", "fill": "$text-primary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNoteDialog",
|
||||
"name": "Dialog/CustomerNote",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 440,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNoteHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomerNoteHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerNoteIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerNoteIcon", "width": 20, "height": 20, "iconFontName": "notepad-text", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "CustomerNoteTitle", "fill": "$text-primary", "content": "Ghi chú khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerNoteCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerNoteCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNoteContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomerNoteInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerNoteAvatar", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomerNoteAvatarText", "fill": "#8B5CF6", "content": "NV", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerNoteInfoText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CustomerNoteName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomerNotePhone", "fill": "$text-tertiary", "content": "0912 345 678 • VIP Gold", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerNoteInputSection", "width": "fill_container", "layout": "vertical", "gap": 8, "height": "fill_container", "children": [
|
||||
{"type": "text", "id": "CustomerNoteInputLabel", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomerNoteTextarea", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [
|
||||
{"type": "text", "id": "CustomerNoteText", "fill": "$text-primary", "content": "Khách thích uống ít đá, không đường. Thường gọi Americano size L. Dị ứng với đậu phộng.", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "lineHeight": 1.5}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerNoteQuickTags", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "QuickTag1", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "QuickTag1Text", "fill": "$text-secondary", "content": "🧊 Ít đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "QuickTag2", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "QuickTag2Text", "fill": "$text-secondary", "content": "🍬 Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "QuickTag3", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "QuickTag3Text", "fill": "$text-secondary", "content": "⚠️ Dị ứng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNoteFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomerNoteCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomerNoteCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerNoteSaveBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerNoteSaveIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CustomerNoteSaveText", "fill": "$text-primary", "content": "Lưu ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
108
pencil-design/src/pages/tPOS/pos/shared/dialogs/help-support.pen
Normal file
108
pencil-design/src/pages/tPOS/pos/shared/dialogs/help-support.pen
Normal file
@@ -0,0 +1,108 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HelpSupportDialog",
|
||||
"name": "Dialog/HelpSupport",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 520,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HelpSupportHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "HelpSupportHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HelpSupportIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpSupportIcon", "width": 20, "height": 20, "iconFontName": "circle-help", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "text", "id": "HelpSupportTitle", "fill": "$text-primary", "content": "Hỗ trợ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpSupportCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpSupportCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HelpSupportContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "HelpSearchBar", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "HelpSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm kiếm hướng dẫn...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategories", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "HelpCategoriesLabel", "fill": "$text-secondary", "content": "Danh mục hướng dẫn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "HelpCategory1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HelpCategory1Icon", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpCategory1IconInner", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategory1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "HelpCategory1Name", "fill": "$text-primary", "content": "Bán hàng & Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "HelpCategory1Desc", "fill": "$text-tertiary", "content": "12 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "icon_font", "id": "HelpCategory1Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategory2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HelpCategory2Icon", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpCategory2IconInner", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategory2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "HelpCategory2Name", "fill": "$text-primary", "content": "Quản lý khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "HelpCategory2Desc", "fill": "$text-tertiary", "content": "8 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "icon_font", "id": "HelpCategory2Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategory3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HelpCategory3Icon", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpCategory3IconInner", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpCategory3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "HelpCategory3Name", "fill": "$text-primary", "content": "Cài đặt & Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "HelpCategory3Desc", "fill": "$text-tertiary", "content": "6 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "icon_font", "id": "HelpCategory3Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpContact", "width": "fill_container", "fill": "#FF5C0015", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HelpContactIcon", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HelpContactIconInner", "width": 20, "height": 20, "iconFontName": "headphones", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "HelpContactInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "HelpContactName", "fill": "$text-primary", "content": "Liên hệ hỗ trợ 24/7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "HelpContactDesc", "fill": "$orange-primary", "content": "1900 1234 • support@goodgo.vn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "icon_font", "id": "HelpContactArrow", "width": 18, "height": 18, "iconFontName": "external-link", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
131
pencil-design/src/pages/tPOS/pos/shared/dialogs/hold-recall.pen
Normal file
131
pencil-design/src/pages/tPOS/pos/shared/dialogs/hold-recall.pen
Normal file
@@ -0,0 +1,131 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HoldRecallDialog",
|
||||
"name": "Dialog/HoldRecall",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 440,
|
||||
"height": 560,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HoldRecallHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "HoldRecallHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HoldRecallIconBg", "width": 40, "height": 40, "fill": "#FF5C0020", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HoldRecallIcon", "width": 20, "height": 20, "iconFontName": "pause-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]},
|
||||
{"type": "text", "id": "HoldRecallTitle", "fill": "$text-primary", "content": "Đơn hàng tạm lưu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldRecallCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HoldRecallCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HoldRecallContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "HoldRecallStats", "width": "fill_container", "padding": [12, 16], "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "HoldRecallStatLeft", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "HoldRecallStatLabel1", "fill": "$text-tertiary", "content": "Đơn đang giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "HoldRecallStatValue1", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldRecallStatRight", "layout": "vertical", "gap": 2, "alignItems": "end", "children": [
|
||||
{"type": "text", "id": "HoldRecallStatLabel2", "fill": "$text-tertiary", "content": "Tổng giá trị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "HoldRecallStatValue2", "fill": "$orange-primary", "content": "485,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldRecallList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "HoldOrder1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [
|
||||
{"type": "frame", "id": "HoldOrder1Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "HoldOrder1Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "HoldOrder1Name", "fill": "$text-primary", "content": "Bàn 05 - Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "HoldOrder1Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "HoldOrder1BadgeText", "fill": "#22C55E", "content": "Mới", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldOrder1Meta", "gap": 12, "children": [
|
||||
{"type": "text", "id": "HoldOrder1Time", "fill": "$text-tertiary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "HoldOrder1Items", "fill": "$text-secondary", "content": "4 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "HoldOrder1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldOrder2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HoldOrder2Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "HoldOrder2Name", "fill": "$text-primary", "content": "Khách lẻ #42", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "HoldOrder2Meta", "gap": 12, "children": [
|
||||
{"type": "text", "id": "HoldOrder2Time", "fill": "$text-tertiary", "content": "25 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "HoldOrder2Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "HoldOrder2Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldOrder3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "HoldOrder3Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "HoldOrder3Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "HoldOrder3Name", "fill": "$text-primary", "content": "Bàn 12 - Trần B", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "HoldOrder3Badge", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "HoldOrder3BadgeText", "fill": "#F59E0B", "content": "30p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "HoldOrder3Meta", "gap": 12, "children": [
|
||||
{"type": "text", "id": "HoldOrder3Time", "fill": "$text-tertiary", "content": "30 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "HoldOrder3Items", "fill": "$text-secondary", "content": "6 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "HoldOrder3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HoldRecallFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "HoldCurrentBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HoldCurrentIcon", "width": 18, "height": 18, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "HoldCurrentText", "fill": "$text-secondary", "content": "Lưu đơn hiện tại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RecallSelectedBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RecallSelectedIcon", "width": 18, "height": 18, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "RecallSelectedText", "fill": "$text-primary", "content": "Gọi lại đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KeyboardShortcutsDialog",
|
||||
"name": "Dialog/KeyboardShortcuts",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 480,
|
||||
"height": 560,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShortcutsHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ShortcutsHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ShortcutsIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ShortcutsIcon", "width": 20, "height": 20, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "ShortcutsTitle", "fill": "$text-primary", "content": "Phím tắt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ShortcutsCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ShortcutsCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShortcutsContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ShortcutsSection1", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ShortcutsSection1Label", "fill": "$text-secondary", "content": "Bán hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Shortcut1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut1Desc", "fill": "$text-primary", "content": "Thanh toán nhanh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut1Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut1Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut1Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut1Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut1Key2Text", "fill": "$text-primary", "content": "Enter", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut2Desc", "fill": "$text-primary", "content": "Tìm sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut2Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut2Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut2Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut2Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut2Key2Text", "fill": "$text-primary", "content": "K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut3Desc", "fill": "$text-primary", "content": "Lưu đơn tạm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut3Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut3Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut3Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut3Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut3Key2Text", "fill": "$text-primary", "content": "H", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ShortcutsDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ShortcutsSection2", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ShortcutsSection2Label", "fill": "$text-secondary", "content": "Điều hướng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Shortcut4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut4Desc", "fill": "$text-primary", "content": "Mở menu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut4Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut4Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut4Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut4Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut4Key2Text", "fill": "$text-primary", "content": "M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut5Desc", "fill": "$text-primary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut5Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut5Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut5Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut5Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut5Key2Text", "fill": "$text-primary", "content": ",", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut6", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut6Desc", "fill": "$text-primary", "content": "Hiện phím tắt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut6Keys", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Shortcut6Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut6Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut6Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut6Key2Text", "fill": "$text-primary", "content": "/", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ShortcutsDivider2", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ShortcutsSection3", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ShortcutsSection3Label", "fill": "$text-secondary", "content": "Số lượng nhanh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Shortcut7", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut7Desc", "fill": "$text-primary", "content": "Tăng số lượng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut7Key", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut7KeyText", "fill": "$text-primary", "content": "+", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Shortcut8", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Shortcut8Desc", "fill": "$text-primary", "content": "Giảm số lượng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "Shortcut8Key", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [
|
||||
{"type": "text", "id": "Shortcut8KeyText", "fill": "$text-primary", "content": "-", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,571 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/MultiDiscount",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 634,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#EC489920",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MultiDiscountIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "percent",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EC4899"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MultiDiscountTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Áp dụng giảm giá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MultiDiscountCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountOrderTotal",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountOrderLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng đơn hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountOrderValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "485,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountListLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Giảm giá áp dụng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "#22C55E"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem1Check",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DiscountItem1CheckIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem1Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giảm 10% Thành viên VIP",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem1Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tự động áp dụng cho KH VIP",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem1Value",
|
||||
"fill": "#22C55E",
|
||||
"content": "-48,500₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "#22C55E"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem2Check",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DiscountItem2CheckIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem2Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mã: SALE50K",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem2Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Giảm 50K cho đơn từ 400K",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem2Value",
|
||||
"fill": "#22C55E",
|
||||
"content": "-50,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem3Check",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountItem3Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Sinh nhật -20%",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem3Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Không thỏa điều kiện",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountItem3Value",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "N/A",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountCodeInput",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountCodeLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhập mã giảm giá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountCodeRow",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountCodeField",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
0,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountCodePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "VD: SUMMER2024",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountCodeApplyBtn",
|
||||
"width": 80,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountCodeApplyText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Áp dụng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountSummary",
|
||||
"width": "fill_container",
|
||||
"fill": "#FF5C0015",
|
||||
"cornerRadius": 14,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountSummaryLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tổng giảm:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DiscountSummaryValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "-98,500₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MultiDiscountApplyBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MultiDiscountApplyIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MultiDiscountApplyText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xác nhận giảm giá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
107
pencil-design/src/pages/tPOS/pos/shared/dialogs/open-price.pen
Normal file
107
pencil-design/src/pages/tPOS/pos/shared/dialogs/open-price.pen
Normal file
@@ -0,0 +1,107 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OpenPriceDialog",
|
||||
"name": "Dialog/OpenPrice",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 360,
|
||||
"height": 420,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OpenPriceHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "OpenPriceHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OpenPriceIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OpenPriceIcon", "width": 20, "height": 20, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "OpenPriceTitle", "fill": "$text-primary", "content": "Nhập giá", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OpenPriceCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OpenPriceContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OpenPriceProductInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OpenPriceProductImg", "width": 48, "height": 48, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OpenPriceProductIcon", "width": 24, "height": 24, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceProductText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OpenPriceProductName", "fill": "$text-primary", "content": "Sản phẩm tùy chỉnh", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "OpenPriceProductSKU", "fill": "$text-tertiary", "content": "Giá linh hoạt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceInputSection", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OpenPriceInputLabel", "fill": "$text-secondary", "content": "Nhập giá bán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OpenPriceInput", "width": "fill_container", "height": 60, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceInputValue", "fill": "$orange-primary", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceQuickBtns", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "OpenPriceQuick1", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceQuick1Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceQuick2", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceQuick2Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceQuick3", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceQuick3Text", "fill": "$text-secondary", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceQuick4", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceQuick4Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OpenPriceFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "OpenPriceCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OpenPriceCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OpenPriceConfirmBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OpenPriceConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "OpenPriceConfirmText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
457
pencil-design/src/pages/tPOS/pos/shared/dialogs/price-check.pen
Normal file
457
pencil-design/src/pages/tPOS/pos/shared/dialogs/price-check.pen
Normal file
@@ -0,0 +1,457 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/PriceCheck",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 523,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "search",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Kiểm tra giá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckInputRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckInput",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckInputIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "barcode",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckInputValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "8936075400128",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckScanBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckScanIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "scan-line",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckResult",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckProduct",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckProductImg",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "#8B5CF620",
|
||||
"cornerRadius": 14,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckProductIcon",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"iconFontName": "package",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckProductInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckProductName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cà phê sữa đá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckProductSKU",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "SKU: CF001 • Size M",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckPriceRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckPriceLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Giá bán lẻ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckPriceValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "35,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckPromoRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckPromoLabel",
|
||||
"gap": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckPromoIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "tag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckPromoText",
|
||||
"fill": "#22C55E",
|
||||
"content": "Khuyến mãi 10%",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckPromoValue",
|
||||
"fill": "#22C55E",
|
||||
"content": "-3,500₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckStock",
|
||||
"width": "fill_container",
|
||||
"fill": "#22C55E15",
|
||||
"cornerRadius": 10,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckStockIcon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "circle-check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckStockText",
|
||||
"fill": "#22C55E",
|
||||
"content": "Còn hàng: 45 sản phẩm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PriceCheckAddBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PriceCheckAddIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PriceCheckAddText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thêm vào đơn hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
596
pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-status.pen
Normal file
596
pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-status.pen
Normal file
@@ -0,0 +1,596 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/SyncStatus",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 549,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncStatusIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "refresh-cw",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncStatusTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trạng thái đồng bộ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncStatusCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncOverview",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncOverviewIcon",
|
||||
"width": 56,
|
||||
"height": 56,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 28,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncOverviewIconInner",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "cloud",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncOverviewText",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncOverviewStatus",
|
||||
"fill": "#22C55E",
|
||||
"content": "Đã đồng bộ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncOverviewTime",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Cập nhật lúc 14:32 hôm nay",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncDetailList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem1Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncItem1Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "package",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Sản phẩm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem1Right",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem1Count",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "245 mục",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem1Badge",
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem1BadgeText",
|
||||
"fill": "#22C55E",
|
||||
"content": "OK",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem2Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncItem2Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "users",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Khách hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem2Right",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem2Count",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "1,203 mục",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem2Badge",
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem2BadgeText",
|
||||
"fill": "#22C55E",
|
||||
"content": "OK",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem3Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncItem3Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "receipt",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đơn hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem3Right",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem3Count",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "42 pending",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem3Badge",
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem3BadgeText",
|
||||
"fill": "#F59E0B",
|
||||
"content": "Đang đồng bộ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem4",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem4Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncItem4Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "percent",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem4Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Khuyến mãi",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem4Right",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem4Count",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "12 mục",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncItem4Badge",
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncItem4BadgeText",
|
||||
"fill": "#22C55E",
|
||||
"content": "OK",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncStatusFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SyncNowBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SyncNowIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "refresh-cw",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SyncNowText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đồng bộ ngay",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
477
pencil-design/src/pages/tPOS/pos/shared/dialogs/weight-entry.pen
Normal file
477
pencil-design/src/pages/tPOS/pos/shared/dialogs/weight-entry.pen
Normal file
@@ -0,0 +1,477 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/WeightEntry",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 555,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "WeightEntryIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "scale",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nhập cân nặng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "WeightEntryCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryProductInfo",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryProductImg",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "WeightEntryProductIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "apple",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryProductText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryProductName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Táo Fuji nhập khẩu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryProductPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "85,000₫/kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryInputSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryDisplay",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
24,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "1.25",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryUnit",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryTotal",
|
||||
"width": "fill_container",
|
||||
"fill": "#FF5C0015",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryTotalLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thành tiền:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryTotalValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "106,250₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryQuickBtns",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightQuick1",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightQuick1Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "0.5 kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightQuick2",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightQuick2Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "1 kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightQuick3",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightQuick3Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "2 kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightQuick4",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightQuick4Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "5 kg",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryScaleBtn",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "WeightEntryScaleIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "scale",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryScaleText",
|
||||
"fill": "#3B82F6",
|
||||
"content": "Đọc từ cân điện tử",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WeightEntryAddBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "WeightEntryAddIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "WeightEntryAddText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thêm vào đơn hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,585 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/Accessibility",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 584,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "accessibility",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trợ năng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilitySection1",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilitySection1Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Hiển thị",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem1Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem1Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "a-large-small",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem1Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cỡ chữ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem1Control",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FontSizeMinus",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "FontSizeMinusText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "A",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "FontSizeValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "110%",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FontSizePlus",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "FontSizePlusText",
|
||||
"fill": "$text-primary",
|
||||
"content": "A",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem2Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem2Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "contrast",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem2Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Độ tương phản cao",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem2Toggle",
|
||||
"width": 48,
|
||||
"height": 28,
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 14,
|
||||
"padding": 2,
|
||||
"justifyContent": "end",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem2ToggleKnob",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$text-primary",
|
||||
"cornerRadius": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilitySection2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilitySection2Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Âm thanh & Rung",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem3Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem3Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "volume-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem3Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Âm thanh thao tác",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem3Toggle",
|
||||
"width": 48,
|
||||
"height": 28,
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 14,
|
||||
"padding": 2,
|
||||
"justifyContent": "end",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem3ToggleKnob",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$text-primary",
|
||||
"cornerRadius": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem4",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem4Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem4Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "vibrate",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem4Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Rung khi chạm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem4Toggle",
|
||||
"width": 48,
|
||||
"height": 28,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"padding": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem4ToggleKnob",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$text-tertiary",
|
||||
"cornerRadius": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilitySection3",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilitySection3Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thao tác",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem5",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem5Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem5Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mouse-pointer-click",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem5Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Vùng chạm lớn hơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem5Toggle",
|
||||
"width": 48,
|
||||
"height": 28,
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 14,
|
||||
"padding": 2,
|
||||
"justifyContent": "end",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem5ToggleKnob",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$text-primary",
|
||||
"cornerRadius": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem6",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem6Left",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AccessibilityItem6Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "timer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AccessibilityItem6Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thời gian xác nhận dài hơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem6Toggle",
|
||||
"width": 48,
|
||||
"height": 28,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"padding": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AccessibilityItem6ToggleKnob",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$text-tertiary",
|
||||
"cornerRadius": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
773
pencil-design/src/pages/tPOS/pos/shared/screens/device-setup.pen
Normal file
773
pencil-design/src/pages/tPOS/pos/shared/screens/device-setup.pen
Normal file
@@ -0,0 +1,773 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/DeviceSetup",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 480,
|
||||
"height": 831,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#8B5CF620",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DeviceSetupIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "settings",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DeviceSetupTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cài đặt thiết bị",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DeviceSetupCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceSetupContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterHeaderLeft",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterHeaderIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterHeaderText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Máy in",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterAddBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterAddIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterAddText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thêm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem1Icon",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterItem1IconInner",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem1Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "EPSON TM-T82III",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterItem1Status",
|
||||
"fill": "#22C55E",
|
||||
"content": "Đã kết nối • Hóa đơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterItem1Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem2Icon",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterItem2IconInner",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterItem2Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Star TSP143III",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterItem2Status",
|
||||
"fill": "#22C55E",
|
||||
"content": "Đã kết nối • Bếp",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterItem2Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerHeaderLeft",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ScannerHeaderIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "scan-barcode",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ScannerHeaderText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Máy quét mã vạch",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerAddBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ScannerAddIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ScannerAddText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thêm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerItem1Icon",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ScannerItem1IconInner",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "scan-barcode",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScannerItem1Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ScannerItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Honeywell Voyager 1250G",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ScannerItem1Status",
|
||||
"fill": "#22C55E",
|
||||
"content": "Đã kết nối • USB",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ScannerItem1Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerHeaderLeft",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CashDrawerHeaderIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "wallet",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CashDrawerHeaderText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ngăn kéo tiền",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerTestBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CashDrawerTestIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "play",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CashDrawerTestText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Test",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerItem1Icon",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CashDrawerItem1IconInner",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "wallet",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerItem1Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CashDrawerItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "APG Vasario Series",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CashDrawerItem1Status",
|
||||
"fill": "#22C55E",
|
||||
"content": "Đã kết nối qua máy in",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CashDrawerItem1Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardReaderSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardReaderHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardReaderHeaderLeft",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CardReaderHeaderIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "credit-card",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardReaderHeaderText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đầu đọc thẻ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardReaderAddBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CardReaderAddIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardReaderAddText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thêm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardReaderEmpty",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
20,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CardReaderEmptyIcon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "credit-card",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardReaderEmptyText",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Chưa có thiết bị",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
546
pencil-design/src/pages/tPOS/pos/shared/screens/quick-sale.pen
Normal file
546
pencil-design/src/pages/tPOS/pos/shared/screens/quick-sale.pen
Normal file
@@ -0,0 +1,546 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/QuickSale",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 569,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QuickSaleIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "zap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickSaleTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bán nhanh",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QuickSaleCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleAmountSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickSaleLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhập số tiền",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleAmountDisplay",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 16,
|
||||
"padding": [
|
||||
20,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickSaleAmount",
|
||||
"fill": "$orange-primary",
|
||||
"content": "150,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 36,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleNumpad",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow1",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad1",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad1Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad2",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad2Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad3",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad3Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "3",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow2",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad4",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad4Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "4",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad5",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad5Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "5",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad6",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad6Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "6",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow3",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad7",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad7Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "7",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad8",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad8Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "8",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad9",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad9Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "9",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow4",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadClear",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadClearText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "C",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad0",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Numpad0Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "0",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadBack",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "NumpadBackIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "delete",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSaleFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickSalePayBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QuickSalePayIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "credit-card",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickSalePayText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thanh toán",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ThemeCustomizationScreen",
|
||||
"name": "Screen/ThemeCustomization",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 540,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ThemeHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ThemeHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ThemeIconBg", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeIcon", "width": 20, "height": 20, "iconFontName": "palette", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "text", "id": "ThemeTitle", "fill": "$text-primary", "content": "Giao diện", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ThemeContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ThemeModeSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ThemeModeLabel", "fill": "$text-secondary", "content": "Chế độ hiển thị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ThemeModeOptions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "ThemeModeDark", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [
|
||||
{"type": "frame", "id": "ThemeModeDarkPreview", "width": "fill_container", "height": 56, "fill": "#0A0A0B", "cornerRadius": 10, "padding": 8, "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "ThemeModeDarkHeader", "width": "fill_container", "height": 8, "fill": "#2A2A2E", "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ThemeModeDarkBody", "width": 48, "height": 6, "fill": "#1A1A1D", "cornerRadius": 3}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeModeDarkLabelRow", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeModeDarkCheck", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "ThemeModeDarkText", "fill": "$text-primary", "content": "Tối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeModeLight", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ThemeModeLightPreview", "width": "fill_container", "height": 56, "fill": "#F5F5F5", "cornerRadius": 10, "padding": 8, "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "ThemeModeLightHeader", "width": "fill_container", "height": 8, "fill": "#E0E0E0", "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ThemeModeLightBody", "width": 48, "height": 6, "fill": "#FFFFFF", "cornerRadius": 3}
|
||||
]},
|
||||
{"type": "text", "id": "ThemeModeLightText", "fill": "$text-secondary", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeModeAuto", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ThemeModeAutoPreview", "width": "fill_container", "height": 56, "cornerRadius": 10, "children": [
|
||||
{"type": "frame", "id": "ThemeModeAutoLeft", "width": "50%", "height": 56, "fill": "#0A0A0B", "cornerRadius": [10, 0, 0, 10]},
|
||||
{"type": "frame", "id": "ThemeModeAutoRight", "width": "50%", "height": 56, "fill": "#F5F5F5", "cornerRadius": [0, 10, 10, 0], "x": 50}
|
||||
]},
|
||||
{"type": "text", "id": "ThemeModeAutoText", "fill": "$text-secondary", "content": "Tự động", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeColorSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ThemeColorLabel", "fill": "$text-secondary", "content": "Màu chủ đạo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ThemeColorOptions", "width": "fill_container", "gap": 12, "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "ThemeColor1", "width": 44, "height": 44, "fill": "#FF5C00", "cornerRadius": 22, "stroke": {"thickness": 3, "fill": "$text-primary"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeColor1Check", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeColor2", "width": 44, "height": 44, "fill": "#3B82F6", "cornerRadius": 22},
|
||||
{"type": "frame", "id": "ThemeColor3", "width": 44, "height": 44, "fill": "#22C55E", "cornerRadius": 22},
|
||||
{"type": "frame", "id": "ThemeColor4", "width": 44, "height": 44, "fill": "#8B5CF6", "cornerRadius": 22},
|
||||
{"type": "frame", "id": "ThemeColor5", "width": 44, "height": 44, "fill": "#EC4899", "cornerRadius": 22},
|
||||
{"type": "frame", "id": "ThemeColor6", "width": 44, "height": 44, "fill": "#F59E0B", "cornerRadius": 22}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeLayoutSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ThemeLayoutLabel", "fill": "$text-secondary", "content": "Bố cục", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ThemeLayoutItem", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ThemeLayoutItemLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeLayoutIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ThemeLayoutText", "fill": "$text-primary", "content": "Chế độ compact", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ThemeLayoutToggle", "width": 48, "height": 28, "fill": "$bg-interactive", "cornerRadius": 14, "padding": [2, 2], "justifyContent": "start", "children": [
|
||||
{"type": "frame", "id": "ThemeLayoutToggleKnob", "width": 24, "height": 24, "fill": "$text-tertiary", "cornerRadius": 12}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ThemeFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "ThemeSaveBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ThemeSaveIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ThemeSaveText", "fill": "$text-primary", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,462 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/TrainingMode",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 440,
|
||||
"height": 597,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#8B5CF620",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "graduation-cap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chế độ huấn luyện",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeBanner",
|
||||
"width": "fill_container",
|
||||
"fill": "#8B5CF615",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeBannerIcon",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#8B5CF630",
|
||||
"cornerRadius": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeBannerIconInner",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "graduation-cap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeBannerTitle",
|
||||
"fill": "#8B5CF6",
|
||||
"content": "Training Mode Active",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeBannerDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Các giao dịch không ảnh hưởng đến dữ liệu thật",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOptions",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption1Icon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption1IconInner",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "shopping-cart",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption1Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Luyện tập bán hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption1Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thực hành tạo đơn, thanh toán",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption1Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption2Icon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption2IconInner",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "undo-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption2Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Luyện hoàn tiền/hủy đơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption2Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Xử lý các tình huống đặc biệt",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption2Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption3Icon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption3IconInner",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "bar-chart-3",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeOption3Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xem báo cáo mẫu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeOption3Desc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Làm quen với dashboard",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeOption3Arrow",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrainingModeExitBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrainingModeExitIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "log-out",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrainingModeExitText",
|
||||
"fill": "#EF4444",
|
||||
"content": "Thoát chế độ huấn luyện",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,533 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/ServicePackage",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 568,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#EC489920",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ServicePackageIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "package",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EC4899"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Gói dịch vụ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ServicePackageCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageCustomer",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageAvatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#14B8A630",
|
||||
"cornerRadius": 22,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageInitial",
|
||||
"fill": "#14B8A6",
|
||||
"content": "LT",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageCustomerInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageCustomerName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lê Thu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageCustomerPhone",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "0901 234 567",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageListLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Gói đã mua",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "#14B8A6"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1Header",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Gói Massage VIP",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1Badge",
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
4,
|
||||
10
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package1BadgeText",
|
||||
"fill": "#22C55E",
|
||||
"content": "Còn hạn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1Progress",
|
||||
"width": "fill_container",
|
||||
"height": 8,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1ProgressFill",
|
||||
"width": "fit_content(0)",
|
||||
"height": 8,
|
||||
"fill": "#14B8A6",
|
||||
"cornerRadius": 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package1Stats",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package1StatsUsed",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã dùng: 6/10 buổi",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package1StatsExpiry",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "HSD: 30/06/2025",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2Header",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Gói Chăm sóc da",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2Badge",
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
4,
|
||||
10
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package2BadgeText",
|
||||
"fill": "#F59E0B",
|
||||
"content": "Sắp hết",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2Progress",
|
||||
"width": "fill_container",
|
||||
"height": 8,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2ProgressFill",
|
||||
"width": "fit_content(0)",
|
||||
"height": 8,
|
||||
"fill": "#F59E0B",
|
||||
"cornerRadius": 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Package2Stats",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package2StatsUsed",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã dùng: 9/10 buổi",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Package2StatsExpiry",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "HSD: 15/03/2025",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageSelected",
|
||||
"width": "fill_container",
|
||||
"fill": "#14B8A615",
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ServicePackageSelectedIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "check-circle",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#14B8A6"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageSelectedInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageSelectedTitle",
|
||||
"fill": "#14B8A6",
|
||||
"content": "Sử dụng 1 buổi từ gói VIP",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageSelectedDesc",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tiết kiệm 200,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServicePackageApplyBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FF8533",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ServicePackageApplyIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ServicePackageApplyText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Sử dụng gói",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TherapistScheduleScreen",
|
||||
"name": "Screen/TherapistSchedule",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 480,
|
||||
"height": 560,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TherapistScheduleHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TherapistScheduleHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TherapistScheduleIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TherapistScheduleIcon", "width": 20, "height": 20, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "text", "id": "TherapistScheduleTitle", "fill": "$text-primary", "content": "Lịch kỹ thuật viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TherapistScheduleCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TherapistScheduleCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TherapistScheduleContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TherapistScheduleDateRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TherapistSchedulePrevBtn", "width": 36, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TherapistSchedulePrevIcon", "width": 18, "height": 18, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "TherapistScheduleDate", "fill": "$text-primary", "content": "Thứ Năm, 06/02/2025", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TherapistScheduleNextBtn", "width": 36, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TherapistScheduleNextIcon", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TherapistScheduleList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "Therapist1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "Therapist1Avatar", "width": 48, "height": 48, "fill": "#14B8A630", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist1Initial", "fill": "#14B8A6", "content": "TH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist1Name", "fill": "$text-primary", "content": "Nguyễn Thị Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Therapist1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist1StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist1Slots", "width": "fill_container", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist1Slot1", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist1Slot1Text", "fill": "$text-tertiary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist1Slot2", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist1Slot2Text", "fill": "$text-tertiary", "content": "10:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist1Slot3", "fill": "#FF5C0030", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist1Slot3Text", "fill": "$orange-primary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist1Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist1Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "Therapist2Avatar", "width": 48, "height": 48, "fill": "#EC489930", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist2Initial", "fill": "#EC4899", "content": "ML", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist2Name", "fill": "$text-primary", "content": "Trần Mai Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Therapist2Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist2StatusText", "fill": "#F59E0B", "content": "Đang bận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2Slots", "width": "fill_container", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist2Slot1", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist2Slot1Text", "fill": "#EF4444", "content": "09:00 ✗", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2Slot2", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist2Slot2Text", "fill": "#EF4444", "content": "10:30 ✗", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2Slot3", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist2Slot3Text", "fill": "$text-tertiary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist2Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist2Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "Therapist3Avatar", "width": 48, "height": 48, "fill": "#3B82F630", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist3Initial", "fill": "#3B82F6", "content": "HN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Therapist3Name", "fill": "$text-primary", "content": "Lê Hoàng Nam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Therapist3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist3StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3Slots", "width": "fill_container", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Therapist3Slot1", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist3Slot1Text", "fill": "$text-tertiary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3Slot2", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist3Slot2Text", "fill": "$text-tertiary", "content": "10:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3Slot3", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist3Slot3Text", "fill": "$text-tertiary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "Therapist3Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "Therapist3Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TherapistScheduleFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [16, 20],
|
||||
"children": [
|
||||
{"type": "frame", "id": "TherapistScheduleBookBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TherapistScheduleBookIcon", "width": 20, "height": 20, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "TherapistScheduleBookText", "fill": "$text-primary", "content": "Đặt lịch", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,395 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/TreatmentTimer",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 529,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerIconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#14B8A620",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TreatmentTimerIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "timer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#14B8A6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thời gian liệu trình",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TreatmentTimerCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerDisplay",
|
||||
"width": 200,
|
||||
"height": 200,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 100,
|
||||
"stroke": {
|
||||
"thickness": 8,
|
||||
"fill": "#14B8A6"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerTime",
|
||||
"fill": "$text-primary",
|
||||
"content": "45:23",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 48,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerRemaining",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "còn lại",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerInfo",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerService",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerServiceLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Dịch vụ:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerServiceValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Massage body 90 phút",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerRoom",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerRoomLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Phòng:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerRoomValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "VIP 03",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerTherapist",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerTherapistLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "KTV:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerTherapistValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Thị Hoa",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerStart",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerStartLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Bắt đầu:",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerStartValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "14:30 - Kết thúc: 16:00",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerExtendBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TreatmentTimerExtendIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerExtendText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+15 phút",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TreatmentTimerCompleteBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#14B8A6",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#0D9488",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TreatmentTimerCompleteIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TreatmentTimerCompleteText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hoàn thành",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user