feat: Add initial UI screens and workflows for tPOS system across various modules.
This commit is contained in:
Ho Ngoc Hai
174
pencil-design/src/pages/tPOS/pos/cafe/customer-display.pen
Normal file
174
pencil-design/src/pages/tPOS/pos/cafe/customer-display.pen
Normal file
@@ -0,0 +1,174 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerDisplay",
|
||||
"name": "Customer Display",
|
||||
"width": 800,
|
||||
"height": 480,
|
||||
"fill": "#0A0A0B",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDHeader",
|
||||
"width": "fill_container",
|
||||
"height": 60,
|
||||
"fill": "#111113",
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"padding": [0, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDLogo", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDLogoI", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"},
|
||||
{"type": "text", "id": "CDLogoT", "fill": "#FFFFFF", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTime", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDTimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "CDTimeT", "fill": "#8B8B90", "content": "19:05 • 06/02/2026", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDBody",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDOrderList",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDListHeader", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": [16, 16, 0, 0], "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDListTitle", "fill": "#FFFFFF", "content": "Đơn hàng của bạn", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDListCount", "fill": "#8B8B90", "content": "4 món", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CDItems", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CDItem1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI1Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI1QtyT", "fill": "#FF5C00", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "CDI1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CDI1N", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CDI1D", "fill": "#6B6B70", "content": "Size L, Ít đường", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDI1P", "fill": "#FFFFFF", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDItem2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI2Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI2QtyT", "fill": "#FF5C00", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "CDI2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CDI2N", "fill": "#FFFFFF", "content": "Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CDI2D", "fill": "#6B6B70", "content": "Size M", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDI2P", "fill": "#FFFFFF", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDItem3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI3L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDI3Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI3QtyT", "fill": "#FF5C00", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "CDI3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CDI3N", "fill": "#FFFFFF", "content": "Bánh mì thịt nguội", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CDI3D", "fill": "#6B6B70", "content": "Thêm pate", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDI3P", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDTotalPanel",
|
||||
"width": 280,
|
||||
"height": "fill_container",
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDTotalTop", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "CDSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CDSubtotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "CDSubtotalV", "fill": "#FFFFFF", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14}]},
|
||||
{"type": "frame", "id": "CDLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "CDLoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "CDLoyaltyI", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "CDLoyaltyT", "fill": "#22C55E", "content": "Gold -5%", "fontFamily": "Roboto", "fontSize": 14}]},
|
||||
{"type": "text", "id": "CDLoyaltyV", "fill": "#22C55E", "content": "-6,900₫", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CDDiv", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTotalBottom", "width": "fill_container", "fill": "#FF5C00", "cornerRadius": [0, 0, 16, 16], "padding": 20, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDTotalL", "fill": "#FFFFFF99", "content": "TỔNG THANH TOÁN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CDTotalV", "fill": "#FFFFFF", "content": "131,100₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerDisplayWaiting",
|
||||
"name": "Customer Display/Waiting",
|
||||
"x": 900,
|
||||
"width": 800,
|
||||
"height": 480,
|
||||
"fill": "#0A0A0B",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDW_Header",
|
||||
"width": "fill_container",
|
||||
"height": 60,
|
||||
"fill": "#111113",
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"padding": [0, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDW_Logo", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDW_LogoI", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"},
|
||||
{"type": "text", "id": "CDW_LogoT", "fill": "#FFFFFF", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDW_Time", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDW_TimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "CDW_TimeT", "fill": "#8B8B90", "content": "19:05 • 06/02/2026", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CDW_Body",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDW_Content", "layout": "vertical", "gap": 24, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDW_Promo", "fill": "#FF5C0010", "cornerRadius": 20, "padding": [16, 32], "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDW_PromoI", "width": 48, "height": 48, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#FF5C00"},
|
||||
{"type": "text", "id": "CDW_PromoT", "fill": "#FF5C00", "content": "Giảm 20% cho thành viên mới", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "CDW_Welcome", "fill": "#FFFFFF", "content": "Chào mừng quý khách!", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDW_Desc", "fill": "#8B8B90", "content": "Scan QR để tích điểm và nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 16},
|
||||
{"type": "frame", "id": "CDW_QR", "width": 120, "height": 120, "fill": "#FFFFFF", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDW_QRI", "width": 80, "height": 80, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#0A0A0B"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DailyReport",
|
||||
"name": "Daily Report",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DRModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "DRHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DRTitle", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DRTitleI", "width": 22, "height": 22, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "DRTitleT", "fill": "#FFFFFF", "content": "Báo cáo ngày", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "DRDate", "fill": "#8B8B90", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "DRStats", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "DRS1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DRS1V", "fill": "#22C55E", "content": "8.5M", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "DRS1L", "fill": "#8B8B90", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "DRS2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DRS2V", "fill": "#3B82F6", "content": "124", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "DRS2L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DRPayments", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "DRPayL", "fill": "#8B8B90", "content": "Theo phương thức", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "DRP1", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "DRP1L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP1I", "width": 14, "height": 14, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "DRP1T", "fill": "#ADADB0", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "DRP1V", "fill": "#FFFFFF", "content": "3,250,000₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "DRP2", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "DRP2L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP2I", "width": 14, "height": 14, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "DRP2T", "fill": "#ADADB0", "content": "QR/Chuyển khoản", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "DRP2V", "fill": "#FFFFFF", "content": "4,850,000₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "DRP3", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "DRP3L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP3I", "width": 14, "height": 14, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "DRP3T", "fill": "#ADADB0", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "DRP3V", "fill": "#FFFFFF", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DRTopItems", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "DRTopL", "fill": "#8B8B90", "content": "Top bán chạy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "DRT1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT1L", "fill": "#ADADB0", "content": "1. Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT1V", "fill": "#FF5C00", "content": "45 ly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "DRT2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT2L", "fill": "#ADADB0", "content": "2. Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT2V", "fill": "#FFFFFF", "content": "32 ly", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "DRT3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT3L", "fill": "#ADADB0", "content": "3. Bạc xỉu", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT3V", "fill": "#FFFFFF", "content": "28 ly", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]},
|
||||
{"type": "frame", "id": "DRActions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "DRExport", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DRExportI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "DRExportT", "fill": "#ADADB0", "content": "Xuất Excel", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "DRPrint", "width": "fill_container", "height": 44, "fill": "#3B82F6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DRPrintI", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "DRPrintT", "fill": "#FFFFFF", "content": "In báo cáo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MenuManagement",
|
||||
"name": "Menu Management",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MMModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "MMHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMTitle", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MMTitleI", "width": 22, "height": 22, "iconFontName": "book-open", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "MMTitleT", "fill": "#FFFFFF", "content": "Quản lý menu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "MMSearch", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#8B8B90"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMCategories", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MMCat1", "fill": "#8B5CF6", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat1T", "fill": "#FFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "MMCat2", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat2T", "fill": "#8B8B90", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "MMCat3", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat3T", "fill": "#8B8B90", "content": "Trà", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "MMCat4", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat4T", "fill": "#8B8B90", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 11}]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMItems", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MMI1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI1Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI1ImgI", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#6B6B70"}]},
|
||||
{"type": "frame", "id": "MMI1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MMI1N", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "MMI1P", "fill": "#22C55E", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI1Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI1Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI2Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI2ImgI", "width": 20, "height": 20, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#6B6B70"}]},
|
||||
{"type": "frame", "id": "MMI2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MMI2N", "fill": "#FFFFFF", "content": "Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "MMI2P", "fill": "#22C55E", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI2Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI3", "width": "fill_container", "fill": "#EF444410", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI3L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI3Img", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI3ImgI", "width": 20, "height": 20, "iconFontName": "cookie", "iconFontFamily": "lucide", "fill": "#EF4444"}]},
|
||||
{"type": "frame", "id": "MMI3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "MMI3NH", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MMI3N", "fill": "#FFFFFF", "content": "Bánh mì pate", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "MMI3Badge", "fill": "#EF4444", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "MMI3BadgeT", "fill": "#FFF", "content": "HẾT", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "text", "id": "MMI3P", "fill": "#6B6B70", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI3Toggle", "width": 44, "height": 24, "fill": "#3A3A3E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_start", "alignItems": "center", "children": [{"type": "frame", "id": "MMI3Ball", "width": 20, "height": 20, "fill": "#8B8B90", "cornerRadius": 10}]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI4", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI4L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MMI4Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI4ImgI", "width": 20, "height": 20, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#6B6B70"}]},
|
||||
{"type": "frame", "id": "MMI4Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MMI4N", "fill": "#FFFFFF", "content": "Bạc xỉu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "MMI4P", "fill": "#22C55E", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMI4Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI4Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MMBatch", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MMBatchI", "width": 16, "height": 16, "iconFontName": "settings-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "MMBatchT", "fill": "#FFFFFF", "content": "Cập nhật giá hàng loạt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditPrice",
|
||||
"name": "Edit Price Dialog",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EPModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#8B5CF6"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{"type": "frame", "id": "EPHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EPTitle", "fill": "#FFFFFF", "content": "Chỉnh sửa món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "EPClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EPCloseI", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "EPItem", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "EPItemImg", "width": 56, "height": 56, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EPItemImgI", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#6B6B70"}]},
|
||||
{"type": "frame", "id": "EPItemInfo", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "EPItemN", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "EPItemC", "fill": "#8B8B90", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EPPrice", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "EPPriceL", "fill": "#8B8B90", "content": "Giá bán", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "EPPriceInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "padding": [14, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EPPriceV", "fill": "#FFFFFF", "content": "29,000", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "EPPriceU", "fill": "#8B8B90", "content": "₫", "fontFamily": "Roboto", "fontSize": 16}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EPQuick", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "EPQ1", "width": "fill_container", "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ1T", "fill": "#22C55E", "content": "+5,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "EPQ2", "width": "fill_container", "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ2T", "fill": "#22C55E", "content": "+10,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "EPQ3", "width": "fill_container", "height": 36, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ3T", "fill": "#EF4444", "content": "-5,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "EPStatus", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "EPStatusL", "fill": "#8B8B90", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "EPStatusOpts", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EPSO1", "width": "fill_container", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 10, "padding": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPSO1T", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "EPSO2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPSO2T", "fill": "#8B8B90", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EPActions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EPCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "EPSave", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EPSaveI", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "EPSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
111
pencil-design/src/pages/tPOS/pos/karaoke/workflow/happy-hour.pen
Normal file
111
pencil-design/src/pages/tPOS/pos/karaoke/workflow/happy-hour.pen
Normal file
@@ -0,0 +1,111 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HappyHourDialog",
|
||||
"name": "Happy Hour Dialog",
|
||||
"width": 480,
|
||||
"height": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HHCloseRow",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"justifyContent": "flex_end",
|
||||
"children": [
|
||||
{"type": "frame", "id": "HHCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HHCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HHContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 40, 32, 40],
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "text", "id": "HHTitleEmoji", "fill": "#22C55E", "content": "🎉 HAPPY HOUR 🎉", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HHTimeBox",
|
||||
"fill": "#22C55E15",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "#22C55E50"},
|
||||
"padding": [16, 32],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{"type": "text", "id": "HHTimeRange", "fill": "#22C55E", "content": "14:00 - 17:00", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "HHDayRange", "fill": "$text-secondary", "content": "Thứ 2 - Thứ 5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HHDiscountBox",
|
||||
"fill": "#22C55E",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 28],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "HHDiscountValue", "fill": "$text-primary", "content": "GIẢM 30%", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "800"},
|
||||
{"type": "text", "id": "HHDiscountLabel", "fill": "#FFFFFF90", "content": "GIÁ PHÒNG", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HHPriceCompare",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "HHPriceVIP", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "HHPriceVIPLabel", "fill": "$text-secondary", "content": "VIP Room:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "HHPriceVIPOld", "fill": "$text-tertiary", "content": "150K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "textDecoration": "line-through"},
|
||||
{"type": "icon_font", "id": "HHPriceVIPArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "HHPriceVIPNew", "fill": "#22C55E", "content": "105K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "HHPriceStd", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "HHPriceStdLabel", "fill": "$text-secondary", "content": "Standard:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "HHPriceStdOld", "fill": "$text-tertiary", "content": "80K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "textDecoration": "line-through"},
|
||||
{"type": "icon_font", "id": "HHPriceStdArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "HHPriceStdNew", "fill": "#22C55E", "content": "56K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "HHApplyBtn", "width": "fill_container", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HHApplyIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "HHApplyText", "fill": "$text-primary", "content": "Áp dụng Happy Hour", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
244
pencil-design/src/pages/tPOS/pos/karaoke/workflow/order-fnb.pen
Normal file
244
pencil-design/src/pages/tPOS/pos/karaoke/workflow/order-fnb.pen
Normal file
@@ -0,0 +1,244 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderFnbScreen",
|
||||
"name": "Order F&B Screen",
|
||||
"width": 800,
|
||||
"height": 600,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbHeader",
|
||||
"width": "fill_container",
|
||||
"height": 60,
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [0, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbRoomIcon", "width": 16, "height": 16, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "FnbRoomText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbSearchBox", "width": 280, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "FnbSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbCategoryBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [10, 20],
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbCatCombo", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbCatComboIcon", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "FnbCatComboText", "fill": "$text-primary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbCatBeerIcon", "width": 14, "height": 14, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "FnbCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbCatSoda", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "FnbCatSodaText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "FnbCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbCatFruit", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "FnbCatFruitText", "fill": "$text-secondary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbBody",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbProductGrid",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 16,
|
||||
"gap": 14,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd1Img", "width": "fill_container", "height": 90, "fill": "#F59E0B18"},
|
||||
{"type": "frame", "id": "FnbProd1Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd1Name", "fill": "$text-primary", "content": "Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd1Price", "fill": "$orange-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd2Img", "width": "fill_container", "height": 90, "fill": "#3B82F618"},
|
||||
{"type": "frame", "id": "FnbProd2Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd3Img", "width": "fill_container", "height": 90, "fill": "#EC489918"},
|
||||
{"type": "frame", "id": "FnbProd3Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd4Img", "width": "fill_container", "height": 90, "fill": "#22C55E18"},
|
||||
{"type": "frame", "id": "FnbProd4Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd4Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd5Img", "width": "fill_container", "height": 90, "fill": "#06B6D418"},
|
||||
{"type": "frame", "id": "FnbProd5Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd5Name", "fill": "$text-primary", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd5Price", "fill": "$orange-primary", "content": "15,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd6Img", "width": "fill_container", "height": 90, "fill": "#8B5CF618"},
|
||||
{"type": "frame", "id": "FnbProd6Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd6Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd6Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd7", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd7Img", "width": "fill_container", "height": 90, "fill": "#EF444418"},
|
||||
{"type": "frame", "id": "FnbProd7Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd7Name", "fill": "$text-primary", "content": "Đậu phộng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd7Price", "fill": "$orange-primary", "content": "40,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbProd8", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FnbProd8Img", "width": "fill_container", "height": 90, "fill": "#A855F718"},
|
||||
{"type": "frame", "id": "FnbProd8Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [
|
||||
{"type": "text", "id": "FnbProd8Name", "fill": "$text-primary", "content": "Bắp rang", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbProd8Price", "fill": "$orange-primary", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbOrderPanel",
|
||||
"width": 260,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbOrderHeader", "width": "fill_container", "padding": [14, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbOrderTitle", "fill": "$text-primary", "content": "Order mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "FnbOrderCount", "fill": "$orange-primary", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "FnbOrderCountText", "fill": "$text-primary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbOrderItems",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbOrdItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem1Name", "fill": "$text-primary", "content": "Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem1Price", "fill": "$text-secondary", "content": "380K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbOrdItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbOrdItem2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem2Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem2Price", "fill": "$text-secondary", "content": "240K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbOrdItem3", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem3Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FnbOrdItem3Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbOrdItem3QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem3Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "FnbOrdItem3Price", "fill": "$text-secondary", "content": "210K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "FnbOrderTotal", "width": "fill_container", "fill": "$bg-surface", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "FnbTotalValue", "fill": "$orange-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbSubmitBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FnbSubmitText", "fill": "$text-primary", "content": "Gửi Order", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "FnbSubmitIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FnbQuickCombos",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [12, 20],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "FnbQuickCombo1", "fill": "#8B5CF620", "stroke": {"thickness": 1, "fill": "#8B5CF6"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbQuickCombo1Icon", "width": 16, "height": 16, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "FnbQuickCombo1Text", "fill": "#8B5CF6", "content": "Combo VIP 650K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbQuickCombo2", "fill": "#22C55E20", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbQuickCombo2Icon", "width": 16, "height": 16, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "FnbQuickCombo2Text", "fill": "#22C55E", "content": "Combo Party 1.2M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FnbQuickCombo3", "fill": "#F59E0B20", "stroke": {"thickness": 1, "fill": "#F59E0B"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FnbQuickCombo3Icon", "width": 16, "height": 16, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "FnbQuickCombo3Text", "fill": "#F59E0B", "content": "Beer Set 500K", "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"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PeakWarningDialog",
|
||||
"name": "Peak Warning Dialog",
|
||||
"width": 480,
|
||||
"height": 420,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PWCloseRow",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"justifyContent": "flex_end",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PWCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PWCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PWContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 40, 32, 40],
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "text", "id": "PWTitleEmoji", "fill": "#F59E0B", "content": "⚠️ KHUNG GIỜ CAO ĐIỂM", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PWTimeBox",
|
||||
"fill": "#F59E0B15",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "#F59E0B50"},
|
||||
"padding": [16, 32],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{"type": "text", "id": "PWTimeRange", "fill": "#F59E0B", "content": "18:00 - 22:00", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PWDayRange", "fill": "$text-secondary", "content": "Thứ 6 - Chủ Nhật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PWMultiplierBox",
|
||||
"fill": "#F59E0B",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 28],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "PWMultiplierValue", "fill": "$text-primary", "content": "GIÁ × 1.5", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "800"},
|
||||
{"type": "text", "id": "PWMultiplierLabel", "fill": "#00000060", "content": "PEAK HOURS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PWPriceCompare",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PWPriceVIP", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PWPriceVIPLabel", "fill": "$text-secondary", "content": "VIP Room:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PWPriceVIPOld", "fill": "$text-tertiary", "content": "150K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "PWPriceVIPArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "PWPriceVIPNew", "fill": "#F59E0B", "content": "225K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PWPriceStd", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PWPriceStdLabel", "fill": "$text-secondary", "content": "Standard:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PWPriceStdOld", "fill": "$text-tertiary", "content": "80K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "PWPriceStdArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "PWPriceStdNew", "fill": "#F59E0B", "content": "120K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "PWTipRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PWTipIcon", "width": 16, "height": 16, "iconFontName": "lightbulb", "iconFontFamily": "lucide", "fill": "#14B8A6"},
|
||||
{"type": "text", "id": "PWTipText", "fill": "#14B8A6", "content": "Đặt trước để tránh chờ đợi!", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PWConfirmBtn", "width": "fill_container", "height": 52, "fill": "#F59E0B", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PWConfirmText", "fill": "#000000", "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"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
122
pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-reset.pen
Normal file
122
pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-reset.pen
Normal file
@@ -0,0 +1,122 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomResetDialog",
|
||||
"name": "Room Reset Dialog",
|
||||
"width": 420,
|
||||
"height": 380,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RRHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "RRTitle", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRTitleIcon", "width": 22, "height": 22, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "RRTitleText", "fill": "$text-primary", "content": "Reset Phòng VIP 01?", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RRCloseBtn", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RRBody",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RRSessionSummary",
|
||||
"width": "fill_container",
|
||||
"fill": "#8B5CF610",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "#8B5CF640"},
|
||||
"padding": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "RRSummaryTitle", "fill": "$text-secondary", "content": "Session vừa rồi:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "RRSummaryItems", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "RRSummaryItem1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRSummaryItem1Icon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "RRSummaryItem1Text", "fill": "$text-primary", "content": "Thời gian: 02:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RRSummaryItem2", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRSummaryItem2Icon", "width": 14, "height": 14, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "RRSummaryItem2Text", "fill": "$text-primary", "content": "F&B: 830,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RRSummaryItem3", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRSummaryItem3Icon", "width": 14, "height": 14, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RRSummaryItem3Text", "fill": "#22C55E", "content": "Thanh toán: Hoàn tất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RRNoteSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RRNoteLabel", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RRNoteCheckbox", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}},
|
||||
{"type": "text", "id": "RRNoteLabelText", "fill": "$text-secondary", "content": "Ghi chú dọn dẹp (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RRNoteInput", "width": "fill_container", "height": 64, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 12, "children": [
|
||||
{"type": "text", "id": "RRNotePlaceholder", "fill": "$text-tertiary", "content": "Cần bổ sung micro, vệ sinh...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RRActions",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"justifyContent": "flex_end",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RRCancelBtn", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 24], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RRCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RRConfirmBtn", "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RRConfirmIcon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "RRConfirmText", "fill": "$text-primary", "content": "Reset & Mở lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"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,308 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServiceDisplayScreen",
|
||||
"name": "Service Display Screen",
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcHeader",
|
||||
"width": "fill_container",
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [0, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcHeaderLeft", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcTitleArea", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SvcTitle", "fill": "$text-primary", "content": "Service Display", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SvcSubtitle", "fill": "$text-secondary", "content": "Màn hình phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcHeaderCenter", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcNotifBadge", "fill": "#EF4444", "cornerRadius": 100, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcNotifIcon", "width": 16, "height": 16, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "SvcNotifText", "fill": "$text-primary", "content": "5 new", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcHeaderRight", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [
|
||||
{"type": "text", "id": "SvcTime", "fill": "$text-primary", "content": "22:15", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SvcDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcUserAvatar", "width": 40, "height": 40, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcUserInit", "fill": "#14B8A6", "content": "NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcTabs",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [12, 24],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcTabPending", "fill": "#F59E0B", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcTabPendingDot", "width": 8, "height": 8, "fill": "$text-primary", "cornerRadius": 100},
|
||||
{"type": "text", "id": "SvcTabPendingText", "fill": "$text-primary", "content": "Đang chờ (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcTabProcessing", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcTabProcessingDot", "width": 8, "height": 8, "fill": "#3B82F6", "cornerRadius": 100},
|
||||
{"type": "text", "id": "SvcTabProcessingText", "fill": "$text-secondary", "content": "Đang làm (3)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcTabReady", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcTabReadyDot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "SvcTabReadyText", "fill": "$text-secondary", "content": "Sẵn sàng (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcTabDone", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcTabDoneIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SvcTabDoneText", "fill": "$text-tertiary", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcBody",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcCard1",
|
||||
"width": 320,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "#F59E0B"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcCard1Header", "width": "fill_container", "fill": "#F59E0B20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard1Room", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard1RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard1IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard1RoomName", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard1Timer", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard1TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "SvcCard1TimerText", "fill": "#F59E0B", "content": "3 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard1Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SvcCard1Item1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard1Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard1Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard1Item1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard1Item2", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard1Item2Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard1Item2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard1Item2Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard1Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SvcCard1Accept", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard1AcceptText", "fill": "$text-primary", "content": "Nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard1Detail", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard1DetailText", "fill": "$text-secondary", "content": "Chi tiết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcCard2",
|
||||
"width": 320,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "#F59E0B"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcCard2Header", "width": "fill_container", "fill": "#F59E0B20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard2Room", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard2RoomIcon", "width": 36, "height": 36, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard2IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard2RoomName", "fill": "$text-primary", "content": "Phòng 05", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard2Timer", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard2TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "SvcCard2TimerText", "fill": "#F59E0B", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard2Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SvcCard2Item1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard2Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard2Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard2Item1Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard2Item2", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard2Item2Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard2Item2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard2Item2Name", "fill": "$text-primary", "content": "Snack Mix", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard2Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SvcCard2Accept", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard2AcceptText", "fill": "$text-primary", "content": "Nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard2Detail", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard2DetailText", "fill": "$text-secondary", "content": "Chi tiết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcCard3",
|
||||
"width": 320,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "#3B82F6"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcCard3Header", "width": "fill_container", "fill": "#3B82F620", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard3Room", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard3RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard3IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard3RoomName", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard3Status", "fill": "#3B82F6", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SvcCard3StatusText", "fill": "$text-primary", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard3Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SvcCard3Item1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard3Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard3Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard3Item1Name", "fill": "$text-primary", "content": "Combo Party", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard3Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SvcCard3Complete", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard3CompleteIcon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "SvcCard3CompleteText", "fill": "$text-primary", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcCard4",
|
||||
"width": 320,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "#22C55E"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcCard4Header", "width": "fill_container", "fill": "#22C55E20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard4Room", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard4RoomIcon", "width": 36, "height": 36, "fill": "#F59E0B30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard4IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard4RoomName", "fill": "$text-primary", "content": "Phòng 04", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard4Status", "fill": "#22C55E", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SvcCard4StatusText", "fill": "$text-primary", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard4Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SvcCard4Item1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard4Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard4Item1QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard4Item1Name", "fill": "$text-primary", "content": "Nước suối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard4Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SvcCard4Serve", "width": "fill_container", "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard4ServeText", "fill": "$text-primary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "SvcCard4ServeIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SvcCard5",
|
||||
"width": 320,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "#22C55E"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SvcCard5Header", "width": "fill_container", "fill": "#22C55E20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard5Room", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard5RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SvcCard5IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard5RoomName", "fill": "$text-primary", "content": "VIP 03", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard5Status", "fill": "#22C55E", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SvcCard5StatusText", "fill": "$text-primary", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard5Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SvcCard5Item1", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SvcCard5Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard5Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SvcCard5Item1Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SvcCard5Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SvcCard5Serve", "width": "fill_container", "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SvcCard5ServeText", "fill": "$text-primary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "SvcCard5ServeIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReservationScreen",
|
||||
"name": "Restaurant/Reservation Management",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ResHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResHeaderLeft", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
|
||||
{"type": "text", "id": "ResTitle", "fill": "$text-primary", "content": "Quản lý Đặt bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ResDatePicker", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ResCalIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ResDateText", "fill": "$text-primary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "ResDateArrow", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ResAddBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ResAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ResAddText", "fill": "$text-primary", "content": "Đặt bàn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResBody", "width": "fill_container", "height": "fill_container", "children": [
|
||||
{"type": "frame", "id": "ResSidebar", "width": 280, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "padding": 20, "gap": 20, "children": [
|
||||
{"type": "frame", "id": "ResQuickFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ResFilterTitle", "fill": "$text-secondary", "content": "Lọc nhanh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ResFilterToday", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResFTLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResFTIcon", "width": 18, "height": 18, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResFTText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "ResFTBadge", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResFTCount", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResFilterTomorrow", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResF2Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF2Icon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF2Text", "fill": "$text-secondary", "content": "Ngày mai", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "ResF2Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF2Count", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResFilterWeek", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResF3Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF3Icon", "width": 18, "height": 18, "iconFontName": "calendar-range", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF3Text", "fill": "$text-secondary", "content": "Tuần này", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "ResF3Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF3Count", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResDivider1", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ResStatusFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ResStatusTitle", "fill": "$text-secondary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ResStatusConfirmed", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck1", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck1Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC1Text", "fill": "$text-primary", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]},
|
||||
{"type": "frame", "id": "ResStatusPending", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck2", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck2Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC2Text", "fill": "$text-primary", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]},
|
||||
{"type": "frame", "id": "ResStatusCancelled", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck3", "width": 20, "height": 20, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}, {"type": "text", "id": "ResStatusC3Text", "fill": "$text-tertiary", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResMainContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "ResTimeline", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [16, 24], "gap": 0, "children": [
|
||||
{"type": "frame", "id": "ResTimeSlot1", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime1", "fill": "$text-tertiary", "content": "11:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot1", "width": 80, "height": 40, "fill": "$bg-interactive", "cornerRadius": 8}]},
|
||||
{"type": "frame", "id": "ResTimeSlot2", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime2", "fill": "$text-tertiary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot2", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot2Text", "fill": "#22C55E", "content": "B03", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "ResTimeSlot3", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime3", "fill": "$text-tertiary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot3", "width": 80, "height": 40, "fill": "#F59E0B30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot3Text", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "ResTimeSlot4", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime4", "fill": "$text-tertiary", "content": "18:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot4", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot4Text", "fill": "#22C55E", "content": "B05", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "ResTimeSlot5", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime5", "fill": "$text-tertiary", "content": "19:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot5", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot5Text", "fill": "#22C55E", "content": "B01", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResListArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 24, "gap": 16, "children": [
|
||||
{"type": "text", "id": "ResListTitle", "fill": "$text-secondary", "content": "Danh sách đặt bàn hôm nay (5)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ResCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResCard1Left", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResCard1Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Hour", "fill": "$orange-primary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard1Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "ResCard1Divider", "width": 1, "height": 40, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ResCard1Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "ResCard1Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Name", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard1StatusText", "fill": "#22C55E", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "ResCard1Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard1Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1TIcon", "width": 14, "height": 14, "iconFontName": "armchair", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1TText", "fill": "$text-secondary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1GText", "fill": "$text-secondary", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Phone", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1PIcon", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1PText", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 12}]}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResCard1Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard1Checkin", "height": 36, "fill": "#22C55E", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1CIIcon", "width": 14, "height": 14, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard1CIText", "fill": "$text-primary", "content": "Check-in", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard1Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard1CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResCard2Left", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ResCard2Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Hour", "fill": "$orange-primary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard2Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "ResCard2Divider", "width": 1, "height": 40, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "ResCard2Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "ResCard2Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Name", "fill": "$text-primary", "content": "Công ty ABC", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard2StatusText", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "ResCard2Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard2Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2TIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "ResCard2TText", "fill": "$text-secondary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard2Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard2GText", "fill": "$text-secondary", "content": "10 khách", "fontFamily": "Roboto", "fontSize": 12}]}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ResCard2Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard2Confirm", "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2ConfIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard2ConfText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard2Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard2CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"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,87 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableDetailScreen",
|
||||
"name": "Restaurant/Table Detail",
|
||||
"reusable": true,
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TDHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TDHeaderLeft", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TDBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "TDTableBadge", "fill": "$orange-primary", "cornerRadius": 10, "padding": [8, 16], "children": [{"type": "text", "id": "TDTableText", "fill": "$text-primary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "TDTableInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDOrderNum", "fill": "$text-primary", "content": "Đơn #0089", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "TDTimeInfo", "fill": "$text-secondary", "content": "4 khách • 1h 15p", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDCustomer", "fill": "#14B8A615", "cornerRadius": 12, "padding": [10, 16], "gap": 10, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#14B8A640"}, "children": [
|
||||
{"type": "frame", "id": "TDCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDCustIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]},
|
||||
{"type": "frame", "id": "TDCustInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDCustName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "text", "id": "TDCustPoints", "fill": "#14B8A6", "content": "Gold • 2,450 điểm", "fontFamily": "Roboto", "fontSize": 11}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDBody", "width": "fill_container", "height": "fill_container", "children": [
|
||||
{"type": "frame", "id": "TDOrderArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 24, "gap": 20, "children": [
|
||||
{"type": "frame", "id": "TDRound1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "TDR1Header", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TDR1Left", "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "TDR1Title", "fill": "$text-primary", "content": "Đợt 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "TDR1Time", "fill": "$text-tertiary", "content": "19:15", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "frame", "id": "TDR1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [5, 10], "children": [{"type": "text", "id": "TDR1StatusText", "fill": "#22C55E", "content": "✓ Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDR1Items", "width": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "TDR1Item1", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I1Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I1BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDR1Item2", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I2Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I2BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDR1Item3", "width": "fill_container", "padding": [12, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I3Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I3Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I3BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I3Price", "fill": "$text-primary", "content": "70,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDRound2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "TDR2Header", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TDR2Left", "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "TDR2Title", "fill": "$text-primary", "content": "Đợt 2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "TDR2Time", "fill": "$text-tertiary", "content": "19:45", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "frame", "id": "TDR2Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [5, 10], "children": [{"type": "text", "id": "TDR2StatusText", "fill": "#F59E0B", "content": "⏳ Đang chờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDR2Items", "width": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "TDR2Item1", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR2I1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR2I1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR2I1Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR2I1Badge", "fill": "#3B82F620", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR2I1BadgeText", "fill": "#3B82F6", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR2I1Price", "fill": "$text-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDR2Item2", "width": "fill_container", "padding": [12, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR2I2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR2I2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR2I2Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR2I2Badge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR2I2BadgeText", "fill": "#F59E0B", "content": "Chờ bếp", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR2I2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "TDAddItem", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDAddText", "fill": "$text-secondary", "content": "Thêm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDEditOrder", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDEditIcon", "width": 18, "height": 18, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDEditText", "fill": "$text-secondary", "content": "Sửa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDVoid", "height": 44, "fill": "#EF444415", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#EF444450"}, "children": [{"type": "icon_font", "id": "TDVoidIcon", "width": 18, "height": 18, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}, {"type": "text", "id": "TDVoidText", "fill": "#EF4444", "content": "Void item", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDBillPanel", "width": 360, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "TDBillHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [{"type": "text", "id": "TDBillTitle", "fill": "$text-primary", "content": "Hóa đơn", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "TDBillContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 20, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "TDBillSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillSubLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillSubValue", "fill": "$text-primary", "content": "1,090,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDBillService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillSerLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillSerValue", "fill": "$text-primary", "content": "54,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDBillVAT", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillVATLabel", "fill": "$text-secondary", "content": "VAT 10%", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillVATValue", "fill": "$text-primary", "content": "109,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDBillDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "TDBillTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "TDBillTotalValue", "fill": "$orange-primary", "content": "1,253,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDBillActions", "width": "fill_container", "layout": "vertical", "padding": 16, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "TDDiscount", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDDiscIcon", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDDiscText", "fill": "$text-secondary", "content": "Áp dụng giảm giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDSplit", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDSplitIcon", "width": 18, "height": 18, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDSplitText", "fill": "$text-secondary", "content": "Tách bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TDPrint", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDPrintText", "fill": "$text-secondary", "content": "In bill tạm tính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TDPayBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDPayIcon", "width": 22, "height": 22, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "TDPayText", "fill": "$text-primary", "content": "Thanh toán 1,253,500₫", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "600"}]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "WaiterPadScreen",
|
||||
"name": "Restaurant/Waiter Pad",
|
||||
"reusable": true,
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "WPHeader", "width": "fill_container", "height": 60, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPBackBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPBackIcon", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "WPTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WPTableText", "fill": "$text-primary", "content": "Bàn 05", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "WPOrderNum", "fill": "$text-tertiary", "content": "Đơn #0092", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "WPHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPWaiter", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WPWaiterAvatar", "width": 28, "height": 28, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPWaiterInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "WPWaiterName", "fill": "$text-secondary", "content": "Minh", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "WPTime", "fill": "$text-primary", "content": "19:45", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 16], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "WPCat1", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat1Text", "fill": "$text-primary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "WPCat2", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat2Text", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "WPCat3", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat3Text", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "WPCat4", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat4Text", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "WPCat5", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat5Text", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPMenuGrid", "width": "fill_container", "height": "fill_container", "padding": 16, "gap": 12, "wrap": true, "alignContent": "flex_start", "children": [
|
||||
{"type": "frame", "id": "WPItem1", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem1Img", "width": "fill_container", "height": 100, "fill": "#EF444418"}, {"type": "frame", "id": "WPItem1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem1Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem1Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem1AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]},
|
||||
{"type": "frame", "id": "WPItem2", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem2Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "WPItem2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem2Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem2Qty", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "WPItem2Minus", "width": 28, "height": 28, "fill": "$bg-surface", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem2MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "WPItem2QtyNum", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem2Plus", "width": 28, "height": 28, "fill": "$orange-primary", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem2PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}]},
|
||||
{"type": "frame", "id": "WPItem3", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem3Img", "width": "fill_container", "height": 100, "fill": "#3B82F618"}, {"type": "frame", "id": "WPItem3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem3Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem3Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem3AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]},
|
||||
{"type": "frame", "id": "WPItem4", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem4Img", "width": "fill_container", "height": 100, "fill": "#22C55E18"}, {"type": "frame", "id": "WPItem4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem4Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem4Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem4AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]},
|
||||
{"type": "frame", "id": "WPItem5", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem5Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "WPItem5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem5Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem5Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem5Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem5Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem5AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]},
|
||||
{"type": "frame", "id": "WPItem6", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem6Img", "width": "fill_container", "height": 100, "fill": "#8B5CF618"}, {"type": "frame", "id": "WPItem6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem6Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem6Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem6Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem6Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem6AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPOrderSheet", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "WPOrderHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPOrderSummary", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "WPOrderCount", "fill": "$text-primary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "WPOrderTotal", "fill": "$orange-primary", "content": "• 385,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "WPOrderExpand", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WPOrderExpandIcon", "width": 16, "height": 16, "iconFontName": "chevron-up", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "WPOrderExpandText", "fill": "$text-secondary", "content": "Xem", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPOrderItems", "width": "fill_container", "layout": "vertical", "padding": [8, 16], "gap": 8, "children": [
|
||||
{"type": "frame", "id": "WPOrdItem1", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPOrdItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "WPOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "WPOrdItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "WPOrdItem1Note", "fill": "$text-tertiary", "content": "Không hành", "fontFamily": "Roboto", "fontSize": 11}]}]},
|
||||
{"type": "frame", "id": "WPOrdItem1Right", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem1Price", "fill": "$text-primary", "content": "185k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "icon_font", "id": "WPOrdItem1Edit", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPOrdItem2", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPOrdItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "text", "id": "WPOrdItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "WPOrdItem2Price", "fill": "$text-primary", "content": "165k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "WPOrdItem3", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "WPOrdItem3Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem3Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "text", "id": "WPOrdItem3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "WPOrdItem3Price", "fill": "$text-primary", "content": "35k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "WPOrderActions", "width": "fill_container", "padding": 16, "gap": 12, "children": [
|
||||
{"type": "frame", "id": "WPSendKitchen", "width": "fill_container", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPSendIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "WPSendText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "WPPayment", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "WPPayText", "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"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
124
pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-scan.pen
Normal file
124
pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-scan.pen
Normal file
@@ -0,0 +1,124 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyScan",
|
||||
"name": "Loyalty Scan",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LSModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LSIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LSIconI", "width": 28, "height": 28, "iconFontName": "scan", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "LSTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LSTitleT", "fill": "#FFFFFF", "content": "Quét thẻ thành viên", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LSDesc", "fill": "#8B8B90", "content": "Đưa thẻ/QR vào camera hoặc nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 13, "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "LSCamera", "width": "fill_container", "height": 180, "fill": "#1A1A1D", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "#F59E0B", "dashArray": [8, 4]}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LSCameraInner", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LSCameraI", "width": 40, "height": 40, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "LSCameraT", "fill": "#8B8B90", "content": "Đang chờ quét...", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LSDivider", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LSDivL", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "text", "id": "LSDivT", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LSDivR", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}
|
||||
]},
|
||||
{"type": "frame", "id": "LSPhone", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "LSPhoneL", "fill": "#8B8B90", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LSPhoneInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LSPhoneI", "width": 18, "height": 18, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "#6B6B70"},
|
||||
{"type": "text", "id": "LSPhoneV", "fill": "#6B6B70", "content": "Nhập số điện thoại...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LSActions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "LSSkip", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LSSkipT", "fill": "#ADADB0", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "LSSearch", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LSSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#000"},
|
||||
{"type": "text", "id": "LSSearchT", "fill": "#000000", "content": "Tìm kiếm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyFound",
|
||||
"name": "Loyalty Found",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LFModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#22C55E"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LFAvatar", "width": 72, "height": 72, "fill": "#F59E0B30", "cornerRadius": 36, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LFInitial", "fill": "#F59E0B", "content": "NM", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "LFInfo", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LFName", "fill": "#FFFFFF", "content": "Nguyễn Minh", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LFTier", "fill": "#F59E0B", "cornerRadius": 12, "padding": [4, 12], "children": [{"type": "text", "id": "LFTierT", "fill": "#000", "content": "GOLD MEMBER", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "LFPhone", "fill": "#8B8B90", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "LFPoints", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 14, "padding": 18, "justifyContent": "space_around", "children": [
|
||||
{"type": "frame", "id": "LFP1", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "LFP1V", "fill": "#F59E0B", "content": "2,340", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LFP1L", "fill": "#8B8B90", "content": "Điểm hiện có", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "LFPDiv", "width": 1, "height": 40, "fill": "#F59E0B30"},
|
||||
{"type": "frame", "id": "LFP2", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "LFP2V", "fill": "#22C55E", "content": "-5%", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LFP2L", "fill": "#8B8B90", "content": "Ưu đãi Gold", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LFRewards", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "LFRewardsL", "fill": "#8B8B90", "content": "Ưu đãi khả dụng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "LFR1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LFR1L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "LFR1I", "width": 14, "height": 14, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "LFR1T", "fill": "#22C55E", "content": "Free 1 bánh mì", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "LFR1V", "fill": "#8B8B90", "content": "500 điểm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "LFR2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LFR2L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "LFR2I", "width": 14, "height": 14, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "LFR2T", "fill": "#3B82F6", "content": "Giảm 15% đơn tiếp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "LFR2V", "fill": "#8B8B90", "content": "1000 điểm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LFApply", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LFApplyI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "LFApplyT", "fill": "#FFFFFF", "content": "Áp dụng cho đơn hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
179
pencil-design/src/pages/tPOS/pos/shared/dialogs/void-refund.pen
Normal file
179
pencil-design/src/pages/tPOS/pos/shared/dialogs/void-refund.pen
Normal file
@@ -0,0 +1,179 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "VoidDialog",
|
||||
"name": "Void Order Dialog",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "VOModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#EF4444"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "VOIcon", "width": 64, "height": 64, "fill": "#EF44441A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "VOIconI", "width": 28, "height": 28, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "frame", "id": "VOTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "VOTitleT", "fill": "#EF4444", "content": "Hủy đơn hàng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "VODesc", "fill": "#8B8B90", "content": "#ORD-045 • 138,000₫", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "VOReason", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "VOReasonL", "fill": "#8B8B90", "content": "Lý do hủy *", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "VOReasonInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "VOReasonV", "fill": "#FFFFFF", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "VOReasonI", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "#6B6B70"}
|
||||
]},
|
||||
{"type": "frame", "id": "VOReasons", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "VOR1", "width": "fill_container", "padding": [10, 14], "stroke": {"thickness": 0, "fill": "#2A2A2E"}, "children": [{"type": "text", "id": "VOR1T", "fill": "#8B8B90", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "VOR2", "width": "fill_container", "padding": [10, 14], "fill": "#EF444420", "children": [{"type": "text", "id": "VOR2T", "fill": "#EF4444", "content": "Sai đơn / nhầm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "VOR3", "width": "fill_container", "padding": [10, 14], "children": [{"type": "text", "id": "VOR3T", "fill": "#8B8B90", "content": "Hết nguyên liệu", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "VOR4", "width": "fill_container", "padding": [10, 14], "children": [{"type": "text", "id": "VOR4T", "fill": "#8B8B90", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "VOWarning", "width": "fill_container", "fill": "#EF444410", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "VOWarningI", "width": 18, "height": 18, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "VOWarningT", "fill": "#EF4444", "content": "Thao tác này cần Manager duyệt", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "VOActions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "VOCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "VOCancelT", "fill": "#ADADB0", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "VOSubmit", "width": "fill_container", "height": 48, "fill": "#EF4444", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "VOSubmitI", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "VOSubmitT", "fill": "#FFFFFF", "content": "Xác nhận hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RefundDialog",
|
||||
"name": "Refund Dialog",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RFModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#F59E0B"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RFIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RFIconI", "width": 28, "height": 28, "iconFontName": "undo-2", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "RFTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RFTitleT", "fill": "#F59E0B", "content": "Hoàn tiền", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RFDesc", "fill": "#8B8B90", "content": "#ORD-042 • Đã thanh toán", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RFOrder", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RFOH", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFOHL", "fill": "#8B8B90", "content": "Đã thanh toán", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFOHV", "fill": "#FFFFFF", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RFODiv", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "frame", "id": "RFOItems", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "RFI1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFI1L", "fill": "#8B8B90", "content": "2x Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFI1V", "fill": "#FFFFFF", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "frame", "id": "RFI2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFI2L", "fill": "#8B8B90", "content": "1x Trà đào", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFI2V", "fill": "#FFFFFF", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RFType", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "RFTypeL", "fill": "#8B8B90", "content": "Loại hoàn tiền", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "RFTypes", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RFT1", "width": "fill_container", "fill": "#F59E0B20", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 10, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RFT1T", "fill": "#F59E0B", "content": "Hoàn toàn bộ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RFT1V", "fill": "#F59E0B", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "RFT2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RFT2T", "fill": "#8B8B90", "content": "Hoàn một phần", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "RFT2V", "fill": "#6B6B70", "content": "Chọn món", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RFReason", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RFReasonL", "fill": "#8B8B90", "content": "Lý do hoàn tiền *", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "RFReasonInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RFReasonV", "fill": "#FFFFFF", "content": "Món không đúng yêu cầu", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "RFReasonI", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "#6B6B70"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RFMethod", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RFMethodL", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RFMethodI", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#8B8B90"}, {"type": "text", "id": "RFMethodT", "fill": "#FFFFFF", "content": "Hoàn tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "icon_font", "id": "RFMethodCheck", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "RFActions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RFCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RFCancelT", "fill": "#ADADB0", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RFSubmit", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RFSubmitI", "width": 16, "height": 16, "iconFontName": "undo-2", "iconFontFamily": "lucide", "fill": "#000"},
|
||||
{"type": "text", "id": "RFSubmitT", "fill": "#000000", "content": "Xác nhận hoàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RefundSuccess",
|
||||
"name": "Refund Success",
|
||||
"x": 1080,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RSModal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#22C55E"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RSIcon", "width": 72, "height": 72, "fill": "#22C55E1A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RSIconI", "width": 32, "height": 32, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "RSTitle", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RSTitleT", "fill": "#22C55E", "content": "Hoàn tiền thành công", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RSDesc", "fill": "#8B8B90", "content": "#ORD-042", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RSAmount", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RSAmountL", "fill": "#8B8B90", "content": "Số tiền hoàn", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "RSAmountV", "fill": "#22C55E", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "RSDetails", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "RSD1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD1L", "fill": "#8B8B90", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD1V", "fill": "#FFFFFF", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "RSD2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD2L", "fill": "#8B8B90", "content": "Người duyệt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD2V", "fill": "#FFFFFF", "content": "Quản lý Minh", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "RSD3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD3L", "fill": "#8B8B90", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD3V", "fill": "#FFFFFF", "content": "19:05 06/02/2026", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RSDone", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RSDoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "InventoryAlert",
|
||||
"name": "Screen/Inventory Alert",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 600,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "InventoryHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "InventoryHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "InventoryBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "InventoryBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "InventoryTitle", "fill": "$text-primary", "content": "Cảnh báo tồn kho", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "InventorySettingsBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "InventorySettingsIcon", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AlertSummary",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "AlertOutOfStock", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 12, "padding": [14, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AlertOutOfStockIcon", "width": 20, "height": 20, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "AlertOutOfStockText", "fill": "#EF4444", "content": "3 sản phẩm hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AlertLowStock", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 12, "padding": [14, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AlertLowStockIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "AlertLowStockText", "fill": "#F59E0B", "content": "5 sản phẩm sắp hết", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "InventoryContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OutOfStockSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OutOfStockHeader", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OutOfStockDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100},
|
||||
{"type": "text", "id": "OutOfStockTitle", "fill": "$text-primary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OutOfStockItem1Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OutOfStockItem1Icon", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OutOfStockItem1IconI", "width": 22, "height": 22, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem1Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "OutOfStockItem1Name", "fill": "$text-primary", "content": "Cà phê Arabica", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "OutOfStockItem1Stock", "fill": "#EF4444", "content": "Stock: 0", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem1Btn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [
|
||||
{"type": "text", "id": "OutOfStockItem1BtnText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OutOfStockItem2Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OutOfStockItem2Icon", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OutOfStockItem2IconI", "width": 22, "height": 22, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem2Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "OutOfStockItem2Name", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "OutOfStockItem2Stock", "fill": "#EF4444", "content": "Stock: 0", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OutOfStockItem2Btn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [
|
||||
{"type": "text", "id": "OutOfStockItem2BtnText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LowStockSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "LowStockHeader", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LowStockDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100},
|
||||
{"type": "text", "id": "LowStockTitle", "fill": "$text-primary", "content": "Sắp hết (< 20%)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LowStockItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "LowStockItem1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LowStockItem1Name", "fill": "$text-primary", "content": "Bơ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "LowStockItem1Qty", "fill": "#F59E0B", "content": "5/50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LowStockItem1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "LowStockItem1BarFill", "width": "10%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LowStockItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "LowStockItem2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LowStockItem2Name", "fill": "$text-primary", "content": "Syrup Caramel", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "LowStockItem2Qty", "fill": "#F59E0B", "content": "2/20", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LowStockItem2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "LowStockItem2BarFill", "width": "10%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "InventoryFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "OrderAllBtn", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "OrderAllIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "OrderAllText", "fill": "#FFFFFF", "content": "Đặt hàng tất cả", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SalesDashboard",
|
||||
"name": "Screen/Sales Dashboard",
|
||||
"reusable": true,
|
||||
"width": 1280,
|
||||
"height": 720,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DashboardHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 32],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DashboardHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DashboardBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DashboardBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "DashboardTitle", "fill": "$text-primary", "content": "Báo cáo doanh thu", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DashboardHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "DateFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DateFilterIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "DateFilterText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "DateFilterArrow", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ExportBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ExportIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "ExportText", "fill": "#FFFFFF", "content": "Export", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DashboardContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 32,
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KPICards",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KPIRevenue", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "KPIRevenueHeader", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KPIRevenueIcon", "width": 44, "height": 44, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIRevenueIconI", "width": 22, "height": 22, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "KPIRevenueChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIRevenueChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "KPIRevenueChangeText", "fill": "#22C55E", "content": "12%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "KPIRevenueValue", "fill": "$text-primary", "content": "45.2M", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KPIRevenueLabel", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KPIOrders", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "KPIOrdersHeader", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KPIOrdersIcon", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIOrdersIconI", "width": 22, "height": 22, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "KPIOrdersChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIOrdersChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "KPIOrdersChangeText", "fill": "#22C55E", "content": "8%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "KPIOrdersValue", "fill": "$text-primary", "content": "342", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KPIOrdersLabel", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KPIAvg", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "KPIAvgHeader", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KPIAvgIcon", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIAvgIconI", "width": 22, "height": 22, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "KPIAvgChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPIAvgChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "KPIAvgChangeText", "fill": "#22C55E", "content": "5%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "KPIAvgValue", "fill": "$text-primary", "content": "132K", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KPIAvgLabel", "fill": "$text-tertiary", "content": "Trung bình/đơn", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KPICustomers", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "KPICustomersHeader", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KPICustomersIcon", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPICustomersIconI", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "KPICustomersChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KPICustomersChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "KPICustomersChangeText", "fill": "#22C55E", "content": "15%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "KPICustomersValue", "fill": "$text-primary", "content": "289", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KPICustomersLabel", "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ChartsRow",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RevenueChart",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RevenueChartHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RevenueChartIcon", "width": 20, "height": 20, "iconFontName": "line-chart", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "RevenueChartTitle", "fill": "$text-primary", "content": "Doanh thu theo giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RevenueChartBody", "width": "fill_container", "height": "fill_container", "padding": 20, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ChartPlaceholder", "width": "fill_container", "height": 200, "stroke": {"thickness": 1, "fill": "$border-default", "dashArray": [4, 4]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ChartPlaceholderContent", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ChartPlaceholderIcon", "width": 32, "height": 32, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "ChartPlaceholderText", "fill": "$text-tertiary", "content": "Revenue Chart", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TimeLabels", "width": "fill_container", "padding": [0, 20, 16, 20], "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "TimeLabel1", "fill": "$text-tertiary", "content": "8am", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "TimeLabel2", "fill": "$text-tertiary", "content": "10", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "TimeLabel3", "fill": "$text-tertiary", "content": "12", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "TimeLabel4", "fill": "$text-tertiary", "content": "14", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "TimeLabel5", "fill": "$text-tertiary", "content": "16", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "TimeLabel6", "fill": "$text-tertiary", "content": "18", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RightPanel",
|
||||
"width": 320,
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TopProducts",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TopProductsHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopProductsIcon", "width": 20, "height": 20, "iconFontName": "trophy", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "TopProductsTitle", "fill": "$text-primary", "content": "Top 5 sản phẩm", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopProductsBody", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "Product1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product1Rank", "width": 24, "height": 24, "fill": "#F59E0B", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Product1RankT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "Product1Name", "fill": "$text-primary", "content": "Cà phê sữa", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "Product1Count", "fill": "$text-secondary", "content": "320", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Product2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product2Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Product2RankT", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "Product2Name", "fill": "$text-primary", "content": "Trà đào", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "Product2Count", "fill": "$text-secondary", "content": "215", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Product3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product3Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product3Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Product3RankT", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "Product3Name", "fill": "$text-primary", "content": "Matcha latte", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "Product3Count", "fill": "$text-secondary", "content": "180", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Product4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product4Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product4Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Product4RankT", "fill": "$text-secondary", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "Product4Name", "fill": "$text-primary", "content": "Bánh mì", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "Product4Count", "fill": "$text-secondary", "content": "156", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "Product5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product5Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Product5Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Product5RankT", "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "Product5Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "Product5Count", "fill": "$text-secondary", "content": "98", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentBreakdown",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PaymentHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PaymentIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "PaymentTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PaymentBody", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PayCash", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "PayCashRow", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PayCashLabel", "fill": "$text-secondary", "content": "Cash", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PayCashPercent", "fill": "$text-primary", "content": "45%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayCashBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [
|
||||
{"type": "frame", "id": "PayCashFill", "width": "45%", "height": 8, "fill": "#22C55E", "cornerRadius": 4}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PayQR", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "PayQRRow", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PayQRLabel", "fill": "$text-secondary", "content": "QR", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PayQRPercent", "fill": "$text-primary", "content": "35%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayQRBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [
|
||||
{"type": "frame", "id": "PayQRFill", "width": "35%", "height": 8, "fill": "#3B82F6", "cornerRadius": 4}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PayCard", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "PayCardRow", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PayCardLabel", "fill": "$text-secondary", "content": "Card", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PayCardPercent", "fill": "$text-primary", "content": "20%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayCardBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [
|
||||
{"type": "frame", "id": "PayCardFill", "width": "20%", "height": 8, "fill": "#8B5CF6", "cornerRadius": 4}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DashboardFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 32],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PeriodTabs", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "TabDaily", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "TabDailyText", "fill": "#FFFFFF", "content": "Daily", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TabWeekly", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "TabWeeklyText", "fill": "$text-secondary", "content": "Weekly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "TabMonthly", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [
|
||||
{"type": "text", "id": "TabMonthlyText", "fill": "$text-secondary", "content": "Monthly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FooterActions", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PrintBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PrintIcon", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PrintText", "fill": "$text-secondary", "content": "Print", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "EmailBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EmailIcon", "width": 16, "height": 16, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "EmailText", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
101
pencil-design/src/pages/tPOS/pos/shared/screens/login.pen
Normal file
101
pencil-design/src/pages/tPOS/pos/shared/screens/login.pen
Normal file
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginScreen",
|
||||
"name": "Screen/Login",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 640,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"gap": 32,
|
||||
"padding": 40,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginBrand",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LoginLogo", "width": 72, "height": 72, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LoginLogoText", "fill": "#FFFFFF", "content": "tPOS", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "LoginTitle", "fill": "$text-primary", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LoginSubtitle", "fill": "$text-tertiary", "content": "Nhập mã PIN 6 số", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDots",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PinDot1", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
|
||||
{"type": "frame", "id": "PinDot2", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
|
||||
{"type": "frame", "id": "PinDot3", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
|
||||
{"type": "frame", "id": "PinDot4", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100},
|
||||
{"type": "frame", "id": "PinDot5", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100},
|
||||
{"type": "frame", "id": "PinDot6", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Numpad",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "NumpadRow1", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NumKey1", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey1T", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey2", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey2T", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey3", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey3T", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "NumpadRow2", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NumKey4", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey4T", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey5", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey5T", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey6", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey6T", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "NumpadRow3", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NumKey7", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey7T", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey8", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey8T", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKey9", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey9T", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "NumpadRow4", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NumKeyBack", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyBackI", "width": 24, "height": 24, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "NumKey0", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey0T", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NumKeyEnter", "width": 72, "height": 72, "fill": "$orange-primary", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyEnterI", "width": 24, "height": 24, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginActions",
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SwitchUserBtn", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SwitchUserIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SwitchUserText", "fill": "$text-tertiary", "content": "Đổi người dùng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KeyboardBtn", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KeyboardIcon", "width": 18, "height": 18, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "KeyboardText", "fill": "$text-tertiary", "content": "Bàn phím", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
106
pencil-design/src/pages/tPOS/pos/shared/screens/offline-mode.pen
Normal file
106
pencil-design/src/pages/tPOS/pos/shared/screens/offline-mode.pen
Normal file
@@ -0,0 +1,106 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OfflineScreen",
|
||||
"name": "Screen/Offline Mode",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 320,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OfflineIndicator",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 100,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "OfflineIcon", "width": 40, "height": 40, "iconFontName": "wifi-off", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OfflineText",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OfflineTitle", "fill": "$text-primary", "content": "Mất kết nối mạng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OfflineSubtitle", "fill": "$text-tertiary", "content": "Đang hoạt động OFFLINE", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OfflineFeatures",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"padding": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "FeatureRow1", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FeatureIcon1", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "FeatureText1", "fill": "$text-primary", "content": "Tạo đơn hàng mới", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "FeatureRow2", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FeatureIcon2", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "FeatureText2", "fill": "$text-primary", "content": "Thanh toán tiền mặt", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "FeatureRow3", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FeatureIcon3", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "FeatureText3", "fill": "$text-tertiary", "content": "QR/Thẻ (cần online)", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "FeatureRow4", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FeatureIcon4", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "FeatureText4", "fill": "$text-tertiary", "content": "Sync dữ liệu", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PendingSync",
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 10,
|
||||
"padding": [10, 16],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PendingSyncIcon", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "PendingSyncText", "fill": "#F59E0B", "content": "12 đơn chờ đồng bộ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RetryBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 24],
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "RetryIcon", "width": 18, "height": 18, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RetryText", "fill": "$text-secondary", "content": "Thử kết nối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
205
pencil-design/src/pages/tPOS/pos/shared/screens/settings.pen
Normal file
205
pencil-design/src/pages/tPOS/pos/shared/screens/settings.pen
Normal file
@@ -0,0 +1,205 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SettingsScreen",
|
||||
"name": "Screen/Settings",
|
||||
"reusable": true,
|
||||
"width": 600,
|
||||
"height": 700,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SettingsHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SettingsBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SettingsBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "SettingsTitle", "fill": "$text-primary", "content": "Cài đặt hệ thống", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SettingsContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StoreSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StoreSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "StoreIcon", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "StoreTitle", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "StoreSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "StoreRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StoreRow1Label", "fill": "$text-secondary", "content": "Tên", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "StoreRow1Value", "fill": "$text-primary", "content": "Coffee House", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "StoreRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StoreRow2Label", "fill": "$text-secondary", "content": "Địa chỉ", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "StoreRow2Value", "fill": "$text-primary", "content": "123 Nguyễn Huệ, Q1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "StoreRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StoreRow3Label", "fill": "$text-secondary", "content": "Hotline", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "StoreRow3Value", "fill": "$text-primary", "content": "1900 1234", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PrinterSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PrinterIcon", "width": 20, "height": 20, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "PrinterTitle", "fill": "$text-primary", "content": "Máy in", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PrinterSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PrinterRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PrinterRow1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PrinterRow1Label", "fill": "$text-secondary", "content": "Receipt", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "PrinterRow1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "PrinterRow1StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "PrinterRow1Value", "fill": "$text-primary", "content": "Epson TM-T82", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PrinterRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PrinterRow2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PrinterRow2Label", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "PrinterRow2Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "PrinterRow2StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "PrinterRow2Value", "fill": "$text-primary", "content": "Star TSP100", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PrinterActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PrinterTestBtn", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "PrinterTestIcon", "width": 16, "height": 16, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PrinterTestText", "fill": "$text-secondary", "content": "Test Print", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PrinterReconnectBtn", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "PrinterReconnectIcon", "width": 16, "height": 16, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PrinterReconnectText", "fill": "$text-secondary", "content": "Reconnect", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FinanceSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FinanceSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FinanceIcon", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "FinanceTitle", "fill": "$text-primary", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FinanceSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "FinanceRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FinanceRow1Label", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "FinanceRow1Toggle", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FinanceRow1Value", "fill": "$text-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "FinanceRow1ToggleBtn", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "end", "children": [
|
||||
{"type": "frame", "id": "FinanceRow1ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FinanceRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FinanceRow2Label", "fill": "$text-secondary", "content": "Tip", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "FinanceRow2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "end", "children": [
|
||||
{"type": "frame", "id": "FinanceRow2ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FinanceRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FinanceRow3Label", "fill": "$text-secondary", "content": "Làm tròn", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "FinanceRow3Value", "fill": "$text-primary", "content": "Gần 1,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StaffSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "StaffIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "StaffSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "StaffMenuItem1", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StaffMenuItem1Text", "fill": "$text-primary", "content": "Quản lý nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "StaffMenuItem1Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "StaffMenuItem2", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StaffMenuItem2Text", "fill": "$text-primary", "content": "Mẫu ca làm việc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "StaffMenuItem2Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "StaffMenuItem3", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StaffMenuItem3Text", "fill": "$text-primary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "StaffMenuItem3Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SettingsFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "SaveBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "SaveIcon", "width": 20, "height": 20, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SaveText", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"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,198 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftManagement",
|
||||
"name": "Screen/Shift Management",
|
||||
"reusable": true,
|
||||
"width": 600,
|
||||
"height": 800,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ShiftHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ShiftBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ShiftBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "ShiftTitle", "fill": "$text-primary", "content": "Quản lý ca làm việc", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ShiftHelpBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ShiftHelpIcon", "width": 20, "height": 20, "iconFontName": "help-circle", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashierInfo",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"padding": 20,
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CashierAvatar", "width": 56, "height": 56, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CashierAvatarText", "fill": "#22C55E", "content": "NA", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashierDetails", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "CashierName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "CashierMeta", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "CashierStart", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CashierStartIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CashierStartText", "fill": "$text-tertiary", "content": "08:00 AM", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CashierDuration", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CashierDurationIcon", "width": 14, "height": 14, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CashierDurationText", "fill": "$text-tertiary", "content": "4h 30m", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ShiftStatus", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "ShiftStatusText", "fill": "#22C55E", "content": "Đang mở", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashCount",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CashCountHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CashCountIcon", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "CashCountTitle", "fill": "$text-primary", "content": "Kiểm kê tiền", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashCountBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CashRow1", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CashRow1Label", "fill": "$text-secondary", "content": "Tiền đầu ca", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "CashRow1Value", "fill": "$text-primary", "content": "2,000,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashRow2", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CashRow2Label", "fill": "$text-secondary", "content": "Thu trong ca", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "CashRow2Value", "fill": "#22C55E", "content": "+5,450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashRow3", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CashRow3Label", "fill": "$text-secondary", "content": "Chi trong ca", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "CashRow3Value", "fill": "#EF4444", "content": "-150,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "CashRow4", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CashRow4Label", "fill": "$text-primary", "content": "Kỳ vọng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CashRow4Value", "fill": "$text-primary", "content": "7,300,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CashActual", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CashActualLabel", "fill": "$text-secondary", "content": "Thực tế", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "CashActualInput", "width": 180, "height": 44, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "justifyContent": "end", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CashActualValue", "fill": "$text-primary", "content": "7,300,000", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CashDiff", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CashDiffLabel", "fill": "$text-secondary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "CashDiffValue", "fill": "#22C55E", "content": "0₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftStats",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ShiftStatsHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ShiftStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "ShiftStatsTitle", "fill": "$text-primary", "content": "Thống kê ca", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ShiftStatsBody", "width": "fill_container", "padding": 20, "gap": 20, "children": [
|
||||
{"type": "frame", "id": "StatOrders", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatOrdersValue", "fill": "$text-primary", "content": "47", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatOrdersLabel", "fill": "$text-tertiary", "content": "Hóa đơn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "StatVoid", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatVoidValue", "fill": "#EF4444", "content": "2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatVoidLabel", "fill": "$text-tertiary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "StatRefund", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatRefundValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatRefundLabel", "fill": "$text-tertiary", "content": "Hoàn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PaymentBreakdown", "width": "fill_container", "padding": [0, 20, 20, 20], "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PayCash", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "PayCashRow", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PayCashLabel", "fill": "$text-tertiary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PayCashPercent", "fill": "$text-secondary", "content": "60%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayCashBar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "PayCashFill", "width": "60%", "height": 6, "fill": "#22C55E", "cornerRadius": 3}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PayQR", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "PayQRRow", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PayQRLabel", "fill": "$text-tertiary", "content": "QR / Chuyển khoản", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PayQRPercent", "fill": "$text-secondary", "content": "40%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayQRBar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "PayQRFill", "width": "40%", "height": 6, "fill": "#3B82F6", "cornerRadius": 3}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "CloseShiftBtn", "width": "fill_container", "height": 52, "fill": "#EF4444", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "CloseShiftIcon", "width": 20, "height": 20, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CloseShiftText", "fill": "#FFFFFF", "content": "Đóng ca làm việc", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerProfile",
|
||||
"name": "Spa/Customer Profile",
|
||||
"reusable": true,
|
||||
"width": 500,
|
||||
"height": 700,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProfileHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ProfileHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ProfileBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ProfileBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "ProfileTitle", "fill": "$text-primary", "content": "Hồ sơ khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ProfileEditBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ProfileEditIcon", "width": 20, "height": 20, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProfileContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomerAvatar", "width": 80, "height": 80, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomerAvatarText", "fill": "#EC4899", "content": "NL", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerInfo", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomerName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CustomerPhone", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerBadges", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "VIPBadge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "VIPIcon", "width": 16, "height": 16, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "VIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PointsBadge", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PointsIcon", "width": 16, "height": 16, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "PointsText", "fill": "#22C55E", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "StatVisits", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatVisitsValue", "fill": "$text-primary", "content": "28", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatVisitsLabel", "fill": "$text-tertiary", "content": "Lượt", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "StatSpent", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatSpentValue", "fill": "$text-primary", "content": "12.5M", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatSpentLabel", "fill": "$text-tertiary", "content": "Đã chi", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "StatLast", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "StatLastValue", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "StatLastLabel", "fill": "$text-tertiary", "content": "Ngày trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NotesSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "NotesHeader", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NotesIcon", "width": 18, "height": 18, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "NotesTitle", "fill": "$text-primary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "NotesBody", "width": "fill_container", "padding": 18, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "NoteRow1", "gap": 8, "children": [
|
||||
{"type": "text", "id": "NoteLabel1", "fill": "$text-tertiary", "content": "Dị ứng:", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "NoteValue1", "fill": "$text-primary", "content": "Không", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteRow2", "gap": 8, "children": [
|
||||
{"type": "text", "id": "NoteLabel2", "fill": "$text-tertiary", "content": "Ưa thích:", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "NoteValue2", "fill": "$text-primary", "content": "Massage thư giãn", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteRow3", "gap": 8, "children": [
|
||||
{"type": "text", "id": "NoteLabel3", "fill": "$text-tertiary", "content": "Nhân viên:", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "NoteValue3", "fill": "$text-primary", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HistorySection",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "HistoryHeader", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "HistoryIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "HistoryTitle", "fill": "$text-primary", "content": "Lịch sử gần đây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "HistoryBody", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "HistoryItem1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "History1Left", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "History1Date", "fill": "$text-tertiary", "content": "03/02/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "History1Service", "fill": "$text-primary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "History1Amount", "fill": "#22C55E", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "HistoryItem2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "History2Left", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "History2Date", "fill": "$text-tertiary", "content": "15/01/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "History2Service", "fill": "$text-primary", "content": "Gội đầu dưỡng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "History2Amount", "fill": "#22C55E", "content": "250,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProfileFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "BookBtn", "width": "fill_container", "height": 48, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "BookIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "BookText", "fill": "#FFFFFF", "content": "Đặt lịch", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RedeemBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "RedeemIcon", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RedeemText", "fill": "$text-secondary", "content": "Đổi đ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-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