feat: add new tPOS admin UI pages for various management and configuration functionalities.
This commit is contained in:
Ho Ngoc Hai
245
pencil-design/src/pages/tPOS/admin/audit-log.pen
Normal file
245
pencil-design/src/pages/tPOS/admin/audit-log.pen
Normal file
@@ -0,0 +1,245 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AuditLog",
|
||||
"name": "Admin/AuditLog",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "ALSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ALSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ALLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ALLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "ALNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "ALNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ALNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "ALNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ALNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "ALNavLog", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALNavLogI", "width": 20, "height": 20, "iconFontName": "scroll-text", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "ALNavLogT", "fill": "#FFFFFF", "content": "Nhật ký", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ALNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ALNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ALUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ALUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "ALMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ALHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "ALBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ALBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ALBread2", "fill": "$orange-primary", "content": "Nhật ký", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "ALHeaderTitle", "fill": "$text-primary", "content": "Nhật ký hoạt động", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ALDateRange", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALDateI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "ALDateT", "fill": "$text-primary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "ALDateChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALFilterUser", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALFilterUserI", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "ALFilterUserT", "fill": "$text-secondary", "content": "Người dùng", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "ALFilterUserChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALFilterAction", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ALFilterActI", "width": 16, "height": 16, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "ALFilterActT", "fill": "$text-secondary", "content": "Hành động", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "ALFilterActChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 0, "clip": true, "children": [
|
||||
{"type": "frame", "id": "ALTableHead", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": [10, 10, 0, 0], "padding": [14, 20], "children": [
|
||||
{"type": "text", "id": "ALTh1", "width": 160, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ALTh2", "width": 160, "fill": "$text-tertiary", "content": "Người dùng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ALTh3", "width": "fill_container", "fill": "$text-tertiary", "content": "Hành động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ALTh4", "width": 140, "fill": "$text-tertiary", "content": "Địa chỉ IP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ALTh5", "width": 100, "fill": "$text-tertiary", "content": "Module", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow1", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR1C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:45:12", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR1C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR1Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR1AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR1Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR1C3", "width": "fill_container", "fill": "$text-primary", "content": "Đăng nhập hệ thống", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR1C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR1Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR1BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR1BadgeT", "fill": "#3B82F6", "content": "Xác thực", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow2", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR2C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:32:05", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR2C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR2Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR2AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR2Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR2C3", "width": "fill_container", "fill": "$text-primary", "content": "Thay đổi giá SP \"Cà phê sữa đá\"", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR2C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR2Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR2BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR2BadgeT", "fill": "#F59E0B", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow3", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR3C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:15:30", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR3C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR3Av", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR3AvT", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR3Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR3C3", "width": "fill_container", "fill": "#EF4444", "content": "Void đơn hàng #1234", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ALR3C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.102", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR3Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR3BadgeF", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR3BadgeT", "fill": "#EF4444", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow4", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR4C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:55:18", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR4C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR4Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR4AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR4Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR4C3", "width": "fill_container", "fill": "$text-primary", "content": "Thêm nhân viên \"Trần Văn B\"", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR4C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR4Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR4BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR4BadgeT", "fill": "#22C55E", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow5", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR5C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:40:22", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR5C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR5Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR5AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR5Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR5C3", "width": "fill_container", "fill": "$text-primary", "content": "Export báo cáo doanh thu T1/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR5C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR5Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR5BadgeF", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR5BadgeT", "fill": "#8B5CF6", "content": "Báo cáo", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow6", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR6C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:20:10", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR6C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR6Av", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR6AvT", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR6Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR6C3", "width": "fill_container", "fill": "$text-primary", "content": "Cập nhật menu danh mục \"Đồ uống\"", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR6C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.102", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR6Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR6BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR6BadgeT", "fill": "#F59E0B", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow7", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ALR7C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:05:33", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR7C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR7Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR7AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR7Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR7C3", "width": "fill_container", "fill": "$text-primary", "content": "Thay đổi quyền role \"Thu ngân\"", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR7C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR7Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR7BadgeF", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR7BadgeT", "fill": "$orange-primary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ALRow8", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": [0, 0, 10, 10], "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR8C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 07:50:45", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR8C2", "width": 160, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ALR8Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ALR8AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR8Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ALR8C3", "width": "fill_container", "fill": "$text-primary", "content": "Đăng nhập hệ thống", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ALR8C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "ALR8Badge", "width": 100, "children": [
|
||||
{"type": "frame", "id": "ALR8BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ALR8BadgeT", "fill": "#3B82F6", "content": "Xác thực", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
231
pencil-design/src/pages/tPOS/admin/customer-database.pen
Normal file
231
pencil-design/src/pages/tPOS/admin/customer-database.pen
Normal file
@@ -0,0 +1,231 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerDatabase",
|
||||
"name": "Admin/CustomerDatabase",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "CDSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CDLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CDLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CDSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CDNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CDNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CDNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CDNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CDNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CDNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CDNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CDNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CDNavCust", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavCustI", "width": 20, "height": 20, "iconFontName": "contact", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CDNavCustT", "fill": "#FFFFFF", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CDNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CDNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CDNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CDSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CDUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "CDMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CDHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "CDBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDBread1", "fill": "$text-tertiary", "content": "Kinh doanh", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "CDBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "CDBread2", "fill": "$orange-primary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "CDHeaderTitle", "fill": "$text-primary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDSearchBox", "width": 240, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CDSearchP", "fill": "$text-tertiary", "content": "Tìm khách hàng...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CDAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CDAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CDAddT", "fill": "#FFFFFF", "content": "Thêm KH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CDContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
{"type": "frame", "id": "CDTabs", "width": "fill_container", "gap": 0, "children": [
|
||||
{"type": "frame", "id": "CDTab1", "padding": [10, 20], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "CDTab1T", "fill": "$orange-primary", "content": "Tất cả (156)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTab2", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "CDTab2T", "fill": "$text-tertiary", "content": "VIP (23)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTab3", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "CDTab3T", "fill": "$text-tertiary", "content": "Thường xuyên (45)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTab4", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "CDTab4T", "fill": "$text-tertiary", "content": "Mới (88)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CDTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "CDTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDTh1", "width": 200, "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh2", "width": 130, "fill": "$text-tertiary", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh3", "width": 100, "fill": "$text-tertiary", "content": "Nhóm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh4", "width": 130, "fill": "$text-tertiary", "content": "Tổng chi tiêu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh5", "width": 80, "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh6", "width": 80, "fill": "$text-tertiary", "content": "Điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDTh7", "width": 110, "fill": "$text-tertiary", "content": "Lần cuối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CDRow1", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR1Name", "width": 200, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR1Av", "width": 36, "height": 36, "fill": "#7C3AED", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDR1AvT", "fill": "#FFFFFF", "content": "NV", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR1NameT", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR1Phone", "width": 130, "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CDR1Group", "width": 100, "children": [
|
||||
{"type": "frame", "id": "CDR1GroupF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "CDR1GroupT", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDR1Spent", "width": 130, "fill": "$text-primary", "content": "15,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR1Orders", "width": 80, "fill": "$text-secondary", "content": "142", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "CDR1Points", "width": 80, "fill": "$orange-primary", "content": "1,520", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR1Last", "width": 110, "fill": "$text-secondary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CDRow2", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR2Name", "width": 200, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR2Av", "width": 36, "height": 36, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDR2AvT", "fill": "#FFFFFF", "content": "TT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR2NameT", "fill": "$text-primary", "content": "Trần Thị Bình", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR2Phone", "width": 130, "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CDR2Group", "width": 100, "children": [
|
||||
{"type": "frame", "id": "CDR2GroupF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "CDR2GroupT", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDR2Spent", "width": 130, "fill": "$text-primary", "content": "12,800,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR2Orders", "width": 80, "fill": "$text-secondary", "content": "98", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "CDR2Points", "width": 80, "fill": "$orange-primary", "content": "1,280", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR2Last", "width": 110, "fill": "$text-secondary", "content": "Hôm qua", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CDRow3", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR3Name", "width": 200, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR3Av", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDR3AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR3NameT", "fill": "$text-primary", "content": "Lê Hoàng Cường", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR3Phone", "width": 130, "fill": "$text-secondary", "content": "0923 456 789", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CDR3Group", "width": 100, "children": [
|
||||
{"type": "frame", "id": "CDR3GroupF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "CDR3GroupT", "fill": "#3B82F6", "content": "Thường xuyên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDR3Spent", "width": 130, "fill": "$text-primary", "content": "4,500,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR3Orders", "width": 80, "fill": "$text-secondary", "content": "52", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "CDR3Points", "width": 80, "fill": "$orange-primary", "content": "450", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR3Last", "width": 110, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CDRow4", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR4Name", "width": 200, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR4Av", "width": 36, "height": 36, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDR4AvT", "fill": "#FFFFFF", "content": "PD", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR4NameT", "fill": "$text-primary", "content": "Phạm Đình Dũng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR4Phone", "width": 130, "fill": "$text-secondary", "content": "0934 567 890", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CDR4Group", "width": 100, "children": [
|
||||
{"type": "frame", "id": "CDR4GroupF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "CDR4GroupT", "fill": "#3B82F6", "content": "Thường xuyên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDR4Spent", "width": 130, "fill": "$text-primary", "content": "3,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR4Orders", "width": 80, "fill": "$text-secondary", "content": "38", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "CDR4Points", "width": 80, "fill": "$orange-primary", "content": "320", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR4Last", "width": 110, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CDRow5", "width": "fill_container", "height": 60, "padding": [0, 20], "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR5Name", "width": 200, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CDR5Av", "width": 36, "height": 36, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CDR5AvT", "fill": "#FFFFFF", "content": "HM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR5NameT", "fill": "$text-primary", "content": "Hoàng Mai Lan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CDR5Phone", "width": 130, "fill": "$text-secondary", "content": "0945 678 901", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CDR5Group", "width": 100, "children": [
|
||||
{"type": "frame", "id": "CDR5GroupF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "CDR5GroupT", "fill": "#22C55E", "content": "Mới", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CDR5Spent", "width": 130, "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR5Orders", "width": 80, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "CDR5Points", "width": 80, "fill": "$orange-primary", "content": "18", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CDR5Last", "width": 110, "fill": "$text-secondary", "content": "22/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
256
pencil-design/src/pages/tPOS/admin/customer-feedback.pen
Normal file
256
pencil-design/src/pages/tPOS/admin/customer-feedback.pen
Normal file
@@ -0,0 +1,256 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerFeedback",
|
||||
"name": "Admin/CustomerFeedback",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "CFSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CFSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CFLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CFNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CFNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CFNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CFNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CFNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CFNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CFNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CFNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFNavFeedback", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CFNavFeedbackI", "width": 20, "height": 20, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CFNavFeedbackT", "fill": "#FFFFFF", "content": "Đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "CFNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "CFNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CFNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CFNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CFUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "CFMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CFHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CFHeaderTitle", "fill": "$text-primary", "content": "Đánh giá khách hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CFHeaderSub", "fill": "$text-tertiary", "content": "Theo dõi và quản lý phản hồi từ khách hàng", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CFHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFFilterBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CFFilterI", "width": 18, "height": 18, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CFFilterT", "fill": "$text-secondary", "content": "Lọc đánh giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "CFContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "CFSummaryRow", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "CFAvgCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "gap": 20, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFAvgLeft", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "CFAvgLabel", "fill": "$text-tertiary", "content": "Đánh giá trung bình", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CFAvgVal", "gap": 8, "alignItems": "baseline", "children": [
|
||||
{"type": "text", "id": "CFAvgNum", "fill": "$text-primary", "content": "4.2", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CFAvgOf", "fill": "$text-tertiary", "content": "/ 5", "fontFamily": "Roboto", "fontSize": 16}
|
||||
]},
|
||||
{"type": "frame", "id": "CFStarsRow", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "CFStar1", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFStar2", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFStar3", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFStar4", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFStar5", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFAvgRight", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFTotalNum", "fill": "$text-primary", "content": "234", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CFTotalLabel", "fill": "$text-tertiary", "content": "tổng đánh giá", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "CFDistCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "CFDistTitle", "fill": "$text-primary", "content": "Phân bố đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "CFBar5", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFBar5L", "fill": "$text-secondary", "content": "5 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32},
|
||||
{"type": "frame", "id": "CFBar5BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "CFBar5Fill", "width": "45%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "text", "id": "CFBar5V", "fill": "$text-tertiary", "content": "45%", "fontFamily": "Roboto", "fontSize": 12, "width": 36}
|
||||
]},
|
||||
{"type": "frame", "id": "CFBar4", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFBar4L", "fill": "$text-secondary", "content": "4 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32},
|
||||
{"type": "frame", "id": "CFBar4BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "CFBar4Fill", "width": "30%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "text", "id": "CFBar4V", "fill": "$text-tertiary", "content": "30%", "fontFamily": "Roboto", "fontSize": 12, "width": 36}
|
||||
]},
|
||||
{"type": "frame", "id": "CFBar3", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFBar3L", "fill": "$text-secondary", "content": "3 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32},
|
||||
{"type": "frame", "id": "CFBar3BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "CFBar3Fill", "width": "15%", "height": "fill_container", "fill": "#F59E0B", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "text", "id": "CFBar3V", "fill": "$text-tertiary", "content": "15%", "fontFamily": "Roboto", "fontSize": 12, "width": 36}
|
||||
]},
|
||||
{"type": "frame", "id": "CFBar2", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFBar2L", "fill": "$text-secondary", "content": "2 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32},
|
||||
{"type": "frame", "id": "CFBar2BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "CFBar2Fill", "width": "7%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "text", "id": "CFBar2V", "fill": "$text-tertiary", "content": "7%", "fontFamily": "Roboto", "fontSize": 12, "width": 36}
|
||||
]},
|
||||
{"type": "frame", "id": "CFBar1", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFBar1L", "fill": "$text-secondary", "content": "1 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32},
|
||||
{"type": "frame", "id": "CFBar1BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "CFBar1Fill", "width": "3%", "height": "fill_container", "fill": "#EF4444", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "text", "id": "CFBar1V", "fill": "$text-tertiary", "content": "3%", "fontFamily": "Roboto", "fontSize": 12, "width": 36}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "text", "id": "CFRecentTitle", "fill": "$text-primary", "content": "Đánh giá gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
|
||||
{"type": "frame", "id": "CFReview1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CFRev1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev1User", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev1Av", "width": 36, "height": 36, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFRev1AvT", "fill": "#FFFFFF", "content": "NT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFRev1Name", "fill": "$text-primary", "content": "Nguyễn Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CFRev1Store", "fill": "$text-tertiary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev1Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "CFRev1Stars", "gap": 3, "children": [
|
||||
{"type": "icon_font", "id": "CFR1S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR1S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR1S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR1S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR1S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev1Date", "fill": "$text-tertiary", "content": "10/02/2026", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev1Text", "fill": "$text-secondary", "content": "Đồ ăn rất ngon, phục vụ nhanh. Nhân viên thân thiện và nhiệt tình. Sẽ quay lại lần sau!", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "CFReview2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CFRev2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev2User", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev2Av", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFRev2AvT", "fill": "#FFFFFF", "content": "TM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFRev2Name", "fill": "$text-primary", "content": "Trần Minh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CFRev2Store", "fill": "$text-tertiary", "content": "GoodGo Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev2Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "CFRev2Stars", "gap": 3, "children": [
|
||||
{"type": "icon_font", "id": "CFR2S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR2S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR2S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR2S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR2S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev2Date", "fill": "$text-tertiary", "content": "09/02/2026", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev2Text", "fill": "$text-secondary", "content": "Không gian đẹp, sạch sẽ. Món ăn hơi chậm nhưng chất lượng tốt. Giá cả hợp lý.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "CFReview3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CFRev3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev3User", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev3Av", "width": 36, "height": 36, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFRev3AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFRev3Name", "fill": "$text-primary", "content": "Lê Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CFRev3Store", "fill": "$text-tertiary", "content": "GoodGo Phạm Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev3Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "CFRev3Stars", "gap": 3, "children": [
|
||||
{"type": "icon_font", "id": "CFR3S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR3S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR3S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR3S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "CFR3S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev3Date", "fill": "$text-tertiary", "content": "08/02/2026", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev3Text", "fill": "$text-secondary", "content": "Trà sữa khá ngon nhưng topping hơi ít. Mong cửa hàng cải thiện thêm.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "CFReview4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CFRev4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev4User", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CFRev4Av", "width": 36, "height": 36, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CFRev4AvT", "fill": "#FFFFFF", "content": "PD", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev4Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CFRev4Name", "fill": "$text-primary", "content": "Phạm Dũng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CFRev4Store", "fill": "$text-tertiary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CFRev4Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "CFRev4Stars", "gap": 3, "children": [
|
||||
{"type": "icon_font", "id": "CFR4S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR4S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CFR4S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "CFR4S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "CFR4S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev4Date", "fill": "$text-tertiary", "content": "07/02/2026", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "CFRev4Text", "fill": "$text-secondary", "content": "Phục vụ chậm, phải đợi 30 phút. Nhân viên không xin lỗi. Cần cải thiện dịch vụ.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
239
pencil-design/src/pages/tPOS/admin/device-management.pen
Normal file
239
pencil-design/src/pages/tPOS/admin/device-management.pen
Normal file
@@ -0,0 +1,239 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DeviceManagement",
|
||||
"name": "Admin/DeviceManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "DMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "DMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "DMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "DMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "DMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "DMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "DMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "DMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "DMNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "DMNavDev", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMNavDevI", "width": 20, "height": 20, "iconFontName": "tablet-smartphone", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "DMNavDevT", "fill": "#FFFFFF", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "DMNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "DMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "DMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "DMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "DMBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMBread2", "fill": "$orange-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "DMHeaderTitle", "fill": "$text-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "DMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMAddBtnI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "DMAddBtnT", "fill": "#FFFFFF", "content": "Thêm thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
{"type": "frame", "id": "DMStats", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "DMStat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "DMStat1L", "fill": "$text-tertiary", "content": "Tổng thiết bị", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMStat1V", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMStat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "DMStat2L", "fill": "$text-tertiary", "content": "Đang hoạt động", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMStat2V", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMStat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "DMStat3L", "fill": "$text-tertiary", "content": "Ngoại tuyến", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMStat3V", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard1Left", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard1Icon", "width": 48, "height": 48, "fill": "#FF5C0015", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard1IconI", "width": 24, "height": 24, "iconFontName": "tablet", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1Info", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "DMCard1NameRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard1Name", "fill": "$text-primary", "content": "POS Terminal #1", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "DMCard1Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "DMCard1StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1Details", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "DMCard1D1", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard1D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard1D1V", "fill": "$text-secondary", "content": "iPad Pro 12.9\"", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1D2", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard1D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard1D2V", "fill": "$text-secondary", "content": "IPD-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1D3", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard1D3L", "fill": "$text-tertiary", "content": "Kết nối:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard1D3V", "fill": "$text-secondary", "content": "2 máy in", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1D4", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard1D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard1D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "DMCard1Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard1EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard1Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard1DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard2Left", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard2Icon", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard2IconI", "width": 24, "height": 24, "iconFontName": "monitor", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2Info", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "DMCard2NameRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard2Name", "fill": "$text-primary", "content": "Kitchen Display", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "DMCard2Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard2Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "DMCard2StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2Details", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "DMCard2D1", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard2D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard2D1V", "fill": "$text-secondary", "content": "Android Tablet", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2D2", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard2D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard2D2V", "fill": "$text-secondary", "content": "KDS-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2D3", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard2D3L", "fill": "$text-tertiary", "content": "Lần cuối:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard2D3V", "fill": "$text-secondary", "content": "Vừa xong", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2D4", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard2D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard2D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "DMCard2Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard2EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard2Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard2DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard3Left", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard3Icon", "width": 48, "height": 48, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard3IconI", "width": 24, "height": 24, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3Info", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "DMCard3NameRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard3Name", "fill": "$text-primary", "content": "Máy in Receipt", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "DMCard3Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DMCard3Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "DMCard3StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3Details", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "DMCard3D1", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard3D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard3D1V", "fill": "$text-secondary", "content": "Star TSP143", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3D2", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard3D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard3D2V", "fill": "$text-secondary", "content": "PRT-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3D3", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard3D3L", "fill": "$text-tertiary", "content": "Lần cuối:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard3D3V", "fill": "$text-secondary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3D4", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DMCard3D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "DMCard3D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "DMCard3Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard3EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "DMCard3Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DMCard3DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
219
pencil-design/src/pages/tPOS/admin/expense-management.pen
Normal file
219
pencil-design/src/pages/tPOS/admin/expense-management.pen
Normal file
@@ -0,0 +1,219 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExpenseManagement",
|
||||
"name": "Admin/ExpenseManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "EMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "EMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "EMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "EMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "EMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "EMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "EMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "EMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "EMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "EMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "EMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "EMNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "EMNavExpense", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMNavExpenseI", "width": 20, "height": 20, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "EMNavExpenseT", "fill": "#FFFFFF", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "EMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "EMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "EMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "EMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "EMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "EMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "EMHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "EMHeaderTitle", "fill": "$text-primary", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "EMHeaderSub", "fill": "$text-tertiary", "content": "Quản lý và theo dõi chi phí hoạt động", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "EMHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "EMMonthPicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMMonthI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "EMMonthT", "fill": "$text-secondary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "EMMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "EMAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "EMAddT", "fill": "#FFFFFF", "content": "Thêm chi phí", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "EMContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "EMCatRow", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "EMCat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EMCat1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMCat1N", "fill": "$text-secondary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "EMCat1P", "fill": "$orange-primary", "content": "65%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "EMCat1Fill", "width": "65%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 3}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EMCat2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMCat2N", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "EMCat2P", "fill": "#3B82F6", "content": "20%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "EMCat2Fill", "width": "20%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 3}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EMCat3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMCat3N", "fill": "$text-secondary", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "EMCat3P", "fill": "#22C55E", "content": "10%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat3Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "EMCat3Fill", "width": "10%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 3}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "EMCat4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMCat4N", "fill": "$text-secondary", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "EMCat4P", "fill": "#F59E0B", "content": "5%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "EMCat4Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "EMCat4Fill", "width": "5%", "height": "fill_container", "fill": "#F59E0B", "cornerRadius": 3}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "EMTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "EMTblHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMTblH1", "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 80},
|
||||
{"type": "text", "id": "EMTblH2", "fill": "$text-tertiary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "EMTblH3", "fill": "$text-tertiary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 110},
|
||||
{"type": "text", "id": "EMTblH4", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "EMTblH5", "fill": "$text-tertiary", "content": "Số tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMTblH6", "fill": "$text-tertiary", "content": "Người tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR1D", "fill": "$text-secondary", "content": "11/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR1N", "fill": "$text-primary", "content": "Mua thịt bò Úc nhập khẩu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR1Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR1BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR1BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR1S", "fill": "$text-secondary", "content": "Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR1A", "fill": "#EF4444", "content": "-8.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR1C", "fill": "$text-secondary", "content": "Minh Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR2D", "fill": "$text-secondary", "content": "10/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR2N", "fill": "$text-primary", "content": "Lương tháng 01 nhân viên", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR2Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR2BG", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR2BT", "fill": "#3B82F6", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR2S", "fill": "$text-secondary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR2A", "fill": "#EF4444", "content": "-45.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR2C", "fill": "$text-secondary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR3D", "fill": "$text-secondary", "content": "09/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR3N", "fill": "$text-primary", "content": "Mua rau củ hữu cơ", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR3Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR3BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR3BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR3S", "fill": "$text-secondary", "content": "Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR3A", "fill": "#EF4444", "content": "-3.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR3C", "fill": "$text-secondary", "content": "Thanh Hà", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR4D", "fill": "$text-secondary", "content": "08/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR4N", "fill": "$text-primary", "content": "Tiền thuê mặt bằng T2", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR4Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR4BG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR4BT", "fill": "#22C55E", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR4S", "fill": "$text-secondary", "content": "Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR4A", "fill": "#EF4444", "content": "-15.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR4C", "fill": "$text-secondary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow5", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR5D", "fill": "$text-secondary", "content": "07/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR5N", "fill": "$text-primary", "content": "Sửa chữa máy pha cà phê", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR5Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR5BG", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR5BT", "fill": "#F59E0B", "content": "Khác", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR5S", "fill": "$text-secondary", "content": "P. Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR5A", "fill": "#EF4444", "content": "-2.8M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR5C", "fill": "$text-secondary", "content": "Đức Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "EMRow6", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "EMR6D", "fill": "$text-secondary", "content": "06/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80},
|
||||
{"type": "text", "id": "EMR6N", "fill": "$text-primary", "content": "Mua bao bì, ly giấy", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "frame", "id": "EMR6Badge", "width": 110, "children": [
|
||||
{"type": "frame", "id": "EMR6BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "EMR6BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "EMR6S", "fill": "$text-secondary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "EMR6A", "fill": "#EF4444", "content": "-1.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "EMR6C", "fill": "$text-secondary", "content": "Minh Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
239
pencil-design/src/pages/tPOS/admin/financial-overview.pen
Normal file
239
pencil-design/src/pages/tPOS/admin/financial-overview.pen
Normal file
@@ -0,0 +1,239 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FinancialOverview",
|
||||
"name": "Admin/FinancialOverview",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "FOSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FOSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "FOLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "FOLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FOSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "FONavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "FONavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FONavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "FONavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "FONavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "FONavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FONavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "FONavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "FONavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "FONavFinance", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FONavFinanceI", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "FONavFinanceT", "fill": "#FFFFFF", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FONavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FONavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "FONavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FOSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "FOUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "FOUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "FOMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "FOHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "FOHeaderTitle", "fill": "$text-primary", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "FOHeaderSub", "fill": "$text-tertiary", "content": "Tổng quan tình hình tài chính doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "FOHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOMonthPicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FOMonthI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "FOMonthT", "fill": "$text-secondary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "FOMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "FOContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "FOKpiRow", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "FOKpi1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "FOKpi1Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOKpi1Icon", "width": 32, "height": 32, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FOKpi1I", "width": 18, "height": 18, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi1V", "fill": "$text-primary", "content": "458M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOKpi2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "FOKpi2Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOKpi2Icon", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FOKpi2I", "width": 18, "height": 18, "iconFontName": "trending-down", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi2L", "fill": "$text-tertiary", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi2V", "fill": "$text-primary", "content": "312M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOKpi3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "FOKpi3Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOKpi3Icon", "width": 32, "height": 32, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FOKpi3I", "width": 18, "height": 18, "iconFontName": "dollar-sign", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi3L", "fill": "$text-tertiary", "content": "Lợi nhuận", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi3V", "fill": "$text-primary", "content": "146M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOKpi4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "FOKpi4Top", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOKpi4Icon", "width": 32, "height": 32, "fill": "#F59E0B20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "FOKpi4I", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi4L", "fill": "$text-tertiary", "content": "Biên lợi nhuận", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOKpi4V", "fill": "$text-primary", "content": "31.9%", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "FOTwoCol", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "FORevByStore", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "FORevTitle", "fill": "$text-primary", "content": "Doanh thu theo cửa hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "FOStoreBar1", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar1Top", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "FOSBar1N", "fill": "$text-secondary", "content": "GoodGo Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "FOSBar1V", "fill": "$text-primary", "content": "185M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOSBar1BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar1Fill", "width": "75%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 6}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FOStoreBar2", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar2Top", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "FOSBar2N", "fill": "$text-secondary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "FOSBar2V", "fill": "$text-primary", "content": "152M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOSBar2BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar2Fill", "width": "60%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 6}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "FOStoreBar3", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar3Top", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "FOSBar3N", "fill": "$text-secondary", "content": "GoodGo Phạm Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "FOSBar3V", "fill": "$text-primary", "content": "121M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOSBar3BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [
|
||||
{"type": "frame", "id": "FOSBar3Fill", "width": "48%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 6}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "FOExpBreak", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "FOExpTitle", "fill": "$text-primary", "content": "Chi phí breakdown", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "FOExp1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "FOExp1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOExp1Dot", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 100},
|
||||
{"type": "text", "id": "FOExp1N", "fill": "$text-secondary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOExp1V", "fill": "$text-primary", "content": "156M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOExp2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "FOExp2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOExp2Dot", "width": 10, "height": 10, "fill": "#3B82F6", "cornerRadius": 100},
|
||||
{"type": "text", "id": "FOExp2N", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOExp2V", "fill": "$text-primary", "content": "89M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOExp3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "FOExp3Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOExp3Dot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "FOExp3N", "fill": "$text-secondary", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOExp3V", "fill": "$text-primary", "content": "45M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOExp4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "children": [
|
||||
{"type": "frame", "id": "FOExp4Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "FOExp4Dot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100},
|
||||
{"type": "text", "id": "FOExp4N", "fill": "$text-secondary", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "FOExp4V", "fill": "$text-primary", "content": "22M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "FOCashFlow", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "FOCFHead", "width": "fill_container", "padding": [16, 24], "children": [
|
||||
{"type": "text", "id": "FOCFTitle", "fill": "$text-primary", "content": "Dòng tiền gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCFH1", "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "FOCFH2", "fill": "$text-tertiary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCFH3", "fill": "$text-tertiary", "content": "Thu/Chi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCFH4", "fill": "$text-tertiary", "content": "Số dư", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCF1D", "fill": "$text-secondary", "content": "11/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "FOCF1N", "fill": "$text-primary", "content": "Doanh thu bán hàng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCF1A", "fill": "#22C55E", "content": "+18.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCF1B", "fill": "$text-primary", "content": "245.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCF2D", "fill": "$text-secondary", "content": "10/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "FOCF2N", "fill": "$text-primary", "content": "Nhập nguyên liệu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCF2A", "fill": "#EF4444", "content": "-12.3M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCF2B", "fill": "$text-primary", "content": "226.7M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCF3D", "fill": "$text-secondary", "content": "09/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "FOCF3N", "fill": "$text-primary", "content": "Doanh thu bán hàng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCF3A", "fill": "#22C55E", "content": "+21.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCF3B", "fill": "$text-primary", "content": "239.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFR4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCF4D", "fill": "$text-secondary", "content": "08/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "FOCF4N", "fill": "$text-primary", "content": "Lương nhân viên", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCF4A", "fill": "#EF4444", "content": "-45.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCF4B", "fill": "$text-primary", "content": "218.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}
|
||||
]},
|
||||
{"type": "frame", "id": "FOCFR5", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "FOCF5D", "fill": "$text-secondary", "content": "07/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "FOCF5N", "fill": "$text-primary", "content": "Tiền thuê mặt bằng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "FOCF5A", "fill": "#EF4444", "content": "-15.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "FOCF5B", "fill": "$text-primary", "content": "263.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
235
pencil-design/src/pages/tPOS/admin/integration-hub.pen
Normal file
235
pencil-design/src/pages/tPOS/admin/integration-hub.pen
Normal file
@@ -0,0 +1,235 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "IntegrationHub",
|
||||
"name": "Admin/IntegrationHub",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "IHSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "IHSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "IHLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IHLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "IHNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "IHNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "IHNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "IHNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "IHNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "IHNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "IHNavInteg", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHNavIntegI", "width": 20, "height": 20, "iconFontName": "puzzle", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "IHNavIntegT", "fill": "#FFFFFF", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "IHNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "IHNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "IHUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IHUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "IHMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "IHHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "IHBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IHBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IHBread2", "fill": "$orange-primary", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "IHHeaderTitle", "fill": "$text-primary", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "IHSearch", "width": 280, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IHSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "IHSearchT", "fill": "$text-tertiary", "content": "Tìm kiếm tích hợp...", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
{"type": "text", "id": "IHSectionPay", "fill": "$text-tertiary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "IHPayRow", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "IHCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard1IconWrap", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard1IconT", "fill": "#3B82F6", "content": "VN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard1Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHCard1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "IHCard1StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard1Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard1Name", "fill": "$text-primary", "content": "VNPay", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard1Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard1CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard1CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard1Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard1BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard2IconWrap", "width": 48, "height": 48, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard2IconT", "fill": "#EC4899", "content": "M", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard2Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHCard2Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "IHCard2StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard2Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard2Name", "fill": "$text-primary", "content": "Momo", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard2Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard2CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard2CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard2Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard2BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard3IconWrap", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard3IconT", "fill": "#3B82F6", "content": "Z", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard3Status", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "IHCard3StatusT", "fill": "$text-tertiary", "content": "Chưa kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard3Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard3Name", "fill": "$text-primary", "content": "ZaloPay", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard3Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard3CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard3CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard3Btn", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard3BtnT", "fill": "#FFFFFF", "content": "Kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "IHSectionDel", "fill": "$text-tertiary", "content": "GIAO HÀNG", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "IHDelRow", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "IHCard4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard4IconWrap", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard4IconT", "fill": "#22C55E", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard4Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHCard4Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "IHCard4StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard4Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard4Name", "fill": "$text-primary", "content": "Grab", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard4Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard4CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard4CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard4Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard4BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard5Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard5IconWrap", "width": 48, "height": 48, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard5IconT", "fill": "#F59E0B", "content": "S", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard5Status", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IHCard5Dot", "width": 8, "height": 8, "fill": "#F59E0B", "cornerRadius": 100},
|
||||
{"type": "text", "id": "IHCard5StatusT", "fill": "#F59E0B", "content": "Đang chờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard5Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard5Name", "fill": "$text-primary", "content": "ShopeeFood", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard5Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard5CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard5CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard5Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard5BtnT", "fill": "$text-secondary", "content": "Đang xử lý...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IHCard6Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [
|
||||
{"type": "frame", "id": "IHCard6IconWrap", "width": 48, "height": 48, "fill": "#EF444420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard6IconT", "fill": "#EF4444", "content": "GF", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard6Status", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "IHCard6StatusT", "fill": "$text-tertiary", "content": "Chưa kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard6Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IHCard6Name", "fill": "$text-primary", "content": "GoFood", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "IHCard6Cat", "children": [
|
||||
{"type": "frame", "id": "IHCard6CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "IHCard6CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IHCard6Btn", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IHCard6BtnT", "fill": "#FFFFFF", "content": "Kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
284
pencil-design/src/pages/tPOS/admin/loyalty-program.pen
Normal file
284
pencil-design/src/pages/tPOS/admin/loyalty-program.pen
Normal file
@@ -0,0 +1,284 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyProgram",
|
||||
"name": "Admin/LoyaltyProgram",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "LPSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LPSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LPLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "LPLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LPLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "LPNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "LPNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "LPNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "LPNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "LPNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "LPNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "LPNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "LPNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "LPNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "LPNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "LPNavCust", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavCustI", "width": 20, "height": 20, "iconFontName": "contact", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "LPNavCustT", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPNavLoyalty", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavLoyaltyI", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "LPNavLoyaltyT", "fill": "#FFFFFF", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "LPNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "LPNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "LPNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "LPNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LPUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "LPUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LPUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "LPMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "LPHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LPHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "LPBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPBread1", "fill": "$text-tertiary", "content": "Kinh doanh", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "LPBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "LPBread2", "fill": "$orange-primary", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "LPHeaderTitle", "fill": "$text-primary", "content": "Chương trình Loyalty", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPToggleLabel", "fill": "$text-secondary", "content": "Trạng thái:", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "LPToggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "LPToggleDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]},
|
||||
{"type": "text", "id": "LPToggleStatus", "fill": "#22C55E", "content": "Đang bật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
{"type": "frame", "id": "LPPointsSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "LPPointsHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPPointsTitle", "fill": "$text-primary", "content": "Quy tắc tích điểm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPPointsSave", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [
|
||||
{"type": "text", "id": "LPPointsSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPPointsRule", "width": "fill_container", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPPointsRuleT1", "fill": "$text-secondary", "content": "Cứ mỗi", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "LPPointsInput", "width": 140, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPPointsInputV", "fill": "$text-primary", "content": "10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "LPPointsRuleT2", "fill": "$text-secondary", "content": "chi tiêu, khách hàng nhận được", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "LPPointsInput2", "width": 80, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPPointsInput2V", "fill": "$orange-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "LPPointsRuleT3", "fill": "$text-secondary", "content": "điểm thưởng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "LPPointsInfo", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 10, "padding": [12, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPPointsInfoI", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "LPPointsInfoT", "fill": "$text-secondary", "content": "Điểm sẽ được tích lũy tự động sau mỗi giao dịch thành công", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPTiersSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "LPTiersTitle", "fill": "$text-primary", "content": "Bậc thành viên", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPTiersGrid", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "LPTier1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#CD7F3240", "sides": ["top", "right", "bottom", "left"]}, "children": [
|
||||
{"type": "frame", "id": "LPT1Icon", "width": 48, "height": 48, "fill": "#CD7F3220", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT1IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#CD7F32"}
|
||||
]},
|
||||
{"type": "text", "id": "LPT1Name", "fill": "#CD7F32", "content": "Bronze", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LPT1Desc", "fill": "$text-tertiary", "content": "Từ 0 điểm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LPT1Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "LPT1Benefits", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "LPT1B1", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT1B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT1B1T", "fill": "$text-secondary", "content": "Tích điểm cơ bản", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "LPT1B2", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT1B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT1B2T", "fill": "$text-secondary", "content": "Ưu đãi sinh nhật", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPTier2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#C0C0C040", "sides": ["top", "right", "bottom", "left"]}, "children": [
|
||||
{"type": "frame", "id": "LPT2Icon", "width": 48, "height": 48, "fill": "#C0C0C020", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT2IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#C0C0C0"}
|
||||
]},
|
||||
{"type": "text", "id": "LPT2Name", "fill": "#C0C0C0", "content": "Silver", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LPT2Desc", "fill": "$text-tertiary", "content": "Từ 500 điểm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LPT2Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "LPT2Benefits", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "LPT2B1", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT2B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT2B1T", "fill": "$text-secondary", "content": "Giảm 5% mọi đơn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "LPT2B2", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT2B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT2B2T", "fill": "$text-secondary", "content": "x1.5 điểm thưởng", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPTier3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#FFD70040", "sides": ["top", "right", "bottom", "left"]}, "children": [
|
||||
{"type": "frame", "id": "LPT3Icon", "width": 48, "height": 48, "fill": "#FFD70020", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT3IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#FFD700"}
|
||||
]},
|
||||
{"type": "text", "id": "LPT3Name", "fill": "#FFD700", "content": "Gold", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LPT3Desc", "fill": "$text-tertiary", "content": "Từ 2,000 điểm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LPT3Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "LPT3Benefits", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "LPT3B1", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT3B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT3B1T", "fill": "$text-secondary", "content": "Giảm 10% mọi đơn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "LPT3B2", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT3B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT3B2T", "fill": "$text-secondary", "content": "x2 điểm thưởng", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPTier4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#E5E4E240", "sides": ["top", "right", "bottom", "left"]}, "children": [
|
||||
{"type": "frame", "id": "LPT4Icon", "width": 48, "height": 48, "fill": "#A78BFA20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT4IconI", "width": 24, "height": 24, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#A78BFA"}
|
||||
]},
|
||||
{"type": "text", "id": "LPT4Name", "fill": "#A78BFA", "content": "Platinum", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "LPT4Desc", "fill": "$text-tertiary", "content": "Từ 5,000 điểm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "LPT4Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "LPT4Benefits", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "LPT4B1", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT4B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT4B1T", "fill": "$text-secondary", "content": "Giảm 15% mọi đơn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "LPT4B2", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "LPT4B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "LPT4B2T", "fill": "$text-secondary", "content": "x3 điểm + ưu đãi VIP", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRewardsSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "LPRewardsTitle", "fill": "$text-primary", "content": "Danh sách phần thưởng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPRewardsTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "LPRTHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPRTh1", "width": 250, "fill": "$text-tertiary", "content": "Tên phần thưởng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LPRTh2", "width": 120, "fill": "$text-tertiary", "content": "Điểm cần", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LPRTh3", "width": 150, "fill": "$text-tertiary", "content": "Loại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "LPRTh4", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRRow1", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPRR1C1", "width": 250, "fill": "$text-primary", "content": "Giảm 20% đơn hàng tiếp theo", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "LPRR1C2", "width": 120, "fill": "$orange-primary", "content": "100 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPRR1C3", "width": 150, "children": [
|
||||
{"type": "frame", "id": "LPRR1C3F", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR1C3T", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRR1C4", "width": 120, "children": [
|
||||
{"type": "frame", "id": "LPRR1C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR1C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRRow2", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPRR2C1", "width": 250, "fill": "$text-primary", "content": "1 ly cà phê miễn phí (size M)", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "LPRR2C2", "width": 120, "fill": "$orange-primary", "content": "200 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPRR2C3", "width": 150, "children": [
|
||||
{"type": "frame", "id": "LPRR2C3F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR2C3T", "fill": "#22C55E", "content": "Sản phẩm miễn phí", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRR2C4", "width": 120, "children": [
|
||||
{"type": "frame", "id": "LPRR2C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR2C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRRow3", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPRR3C1", "width": 250, "fill": "$text-primary", "content": "Combo bánh + nước giảm 50%", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "LPRR3C2", "width": 120, "fill": "$orange-primary", "content": "350 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPRR3C3", "width": 150, "children": [
|
||||
{"type": "frame", "id": "LPRR3C3F", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR3C3T", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRR3C4", "width": 120, "children": [
|
||||
{"type": "frame", "id": "LPRR3C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR3C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRRow4", "width": "fill_container", "height": 52, "padding": [0, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "LPRR4C1", "width": 250, "fill": "$text-primary", "content": "Merchandise GoodGo (ly, áo)", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "LPRR4C2", "width": 120, "fill": "$orange-primary", "content": "500 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "LPRR4C3", "width": 150, "children": [
|
||||
{"type": "frame", "id": "LPRR4C3F", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR4C3T", "fill": "#F59E0B", "content": "Quà tặng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "LPRR4C4", "width": 120, "children": [
|
||||
{"type": "frame", "id": "LPRR4C4F", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "LPRR4C4T", "fill": "$text-tertiary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
209
pencil-design/src/pages/tPOS/admin/menu-builder.pen
Normal file
209
pencil-design/src/pages/tPOS/admin/menu-builder.pen
Normal file
@@ -0,0 +1,209 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MenuBuilder",
|
||||
"name": "Admin/MenuBuilder",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "MBSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MBSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MBLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MBLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "MBLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "MBNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MBNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MBNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "MBNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MBNavMenu", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBNavMenuI", "width": 20, "height": 20, "iconFontName": "layout-list", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "MBNavMenuT", "fill": "#FFFFFF", "content": "Menu Builder", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MBNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "MBNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MBNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MBNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MBNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MBUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MBUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "MBUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "MBMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MBHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBHeaderLeft", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBStoreSel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBStoreSelI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "MBStoreSelT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "MBStoreSelChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBHeaderTitleWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MBHeaderTitle", "fill": "$text-primary", "content": "Menu chính", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "MBHeaderSub", "fill": "$text-tertiary", "content": "30 sản phẩm · Cập nhật 10/02/2026", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBPublishBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBPublishI", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "MBPublishT", "fill": "#FFFFFF", "content": "Publish", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MBBody", "width": "fill_container", "height": "fill_container", "children": [
|
||||
{"type": "frame", "id": "MBLeftPanel", "width": 240, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "MBLeftHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "MBLeftTitle", "fill": "$text-primary", "content": "Sản phẩm có sẵn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBSearch", "width": "fill_container", "padding": [8, 12], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBSearchInput", "width": "fill_container", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 10], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBSearchI", "width": 14, "height": 14, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBSearchT", "fill": "$text-tertiary", "content": "Tìm sản phẩm...", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBLeftList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [4, 0], "children": [
|
||||
{"type": "frame", "id": "MBCat1", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBCat1Left", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBCat1I", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "MBCat1T", "fill": "$text-primary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBCat1Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [
|
||||
{"type": "text", "id": "MBCat1CountT", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBCat2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBCat2Left", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBCat2I", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#A855F7"},
|
||||
{"type": "text", "id": "MBCat2T", "fill": "$text-primary", "content": "Trà sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBCat2Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [
|
||||
{"type": "text", "id": "MBCat2CountT", "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MBCat3", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBCat3Left", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBCat3I", "width": 16, "height": 16, "iconFontName": "citrus", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "MBCat3T", "fill": "$text-primary", "content": "Nước ép", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MBCat3Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [
|
||||
{"type": "text", "id": "MBCat3CountT", "fill": "$text-secondary", "content": "10", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MBRight", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 16, "clip": true, "children": [
|
||||
{"type": "text", "id": "MBMenuTitle", "fill": "$text-primary", "content": "Menu hiện tại", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
|
||||
{"type": "frame", "id": "MBMenuCat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "MBMenuCat1Head", "width": "fill_container", "padding": [12, 16], "fill": "#FF5C0010", "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuCat1Left", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuCat1DragI", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "MBMenuCat1CofI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "MBMenuCat1Title", "fill": "$text-primary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuCat1Count", "fill": "$text-tertiary", "content": "8 sản phẩm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem1", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuItem1L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem1Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem1T", "fill": "$text-primary", "content": "Espresso", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem1P", "fill": "$text-secondary", "content": "35,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem2", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuItem2L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem2T", "fill": "$text-primary", "content": "Americano", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem2P", "fill": "$text-secondary", "content": "39,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem3", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuItem3L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem3T", "fill": "$text-primary", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem3P", "fill": "$text-secondary", "content": "45,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem4", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBMenuItem4L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem4Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem4T", "fill": "$text-primary", "content": "Latte", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem4P", "fill": "$text-secondary", "content": "49,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MBMenuCat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "MBMenuCat2Head", "width": "fill_container", "padding": [12, 16], "fill": "#A855F710", "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuCat2Left", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuCat2DragI", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "MBMenuCat2CupI", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#A855F7"},
|
||||
{"type": "text", "id": "MBMenuCat2Title", "fill": "$text-primary", "content": "Trà sữa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuCat2Count", "fill": "$text-tertiary", "content": "5 sản phẩm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem5", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MBMenuItem5L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem5Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem5T", "fill": "$text-primary", "content": "Trà sữa truyền thống", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem5P", "fill": "$text-secondary", "content": "35,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "MBMenuItem6", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MBMenuItem6L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MBMenuItem6Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MBMenuItem6T", "fill": "$text-primary", "content": "Trà sữa matcha", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "MBMenuItem6P", "fill": "$text-secondary", "content": "42,000 ₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
198
pencil-design/src/pages/tPOS/admin/modifier-groups.pen
Normal file
198
pencil-design/src/pages/tPOS/admin/modifier-groups.pen
Normal file
@@ -0,0 +1,198 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ModifierGroups",
|
||||
"name": "Admin/ModifierGroups",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "MGSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MGSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MGLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "MGLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "MGNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MGNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MGNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "MGNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MGNavProducts", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGNavProductsI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "MGNavProductsT", "fill": "#FFFFFF", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MGNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "MGNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "MGNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MGNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "MGNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "MGUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "MGUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "MGMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "MGHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "MGBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGBread1", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "MGBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "MGBread2", "fill": "$orange-primary", "content": "Nhóm Modifier", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "MGHeaderTitle", "fill": "$text-primary", "content": "Nhóm Modifier", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGHeaderRight", "children": [
|
||||
{"type": "frame", "id": "MGCreateBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCreateI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "MGCreateT", "fill": "#FFFFFF", "content": "Tạo nhóm mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MGContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "MGCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "MGCard1Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MGCard1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard1Chev", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "frame", "id": "MGCard1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "MGCard1TitleRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGCard1Title", "fill": "$text-primary", "content": "Size", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "MGCard1Badge", "fill": "#EF444420", "cornerRadius": 100, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "MGCard1BadgeT", "fill": "#EF4444", "content": "Bắt buộc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "MGCard1Sub", "fill": "$text-tertiary", "content": "Chọn 1 · 3 tùy chọn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard1Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MGCard1Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard1EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard1Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard1DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard1Body", "width": "fill_container", "padding": [0, 20], "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "MGOpt1", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MGOpt1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGOpt1Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MGOpt1Name", "fill": "$text-primary", "content": "S", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "MGOpt1Price", "fill": "$text-secondary", "content": "0 ₫", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "MGOpt2", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "MGOpt2Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGOpt2Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MGOpt2Name", "fill": "$text-primary", "content": "M", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "MGOpt2Price", "fill": "#22C55E", "content": "+10,000 ₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGOpt3", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGOpt3Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGOpt3Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "MGOpt3Name", "fill": "$text-primary", "content": "L", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "text", "id": "MGOpt3Price", "fill": "#22C55E", "content": "+15,000 ₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MGCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "MGCard2Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGCard2Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard2Chev", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "frame", "id": "MGCard2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "MGCard2TitleRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGCard2Title", "fill": "$text-primary", "content": "Đường", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "MGCard2Badge", "fill": "#EF444420", "cornerRadius": 100, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "MGCard2BadgeT", "fill": "#EF4444", "content": "Bắt buộc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "MGCard2Sub", "fill": "$text-tertiary", "content": "Chọn 1 · 5 tùy chọn: 0%, 30%, 50%, 70%, 100%", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard2Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MGCard2Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard2EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard2Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard2DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "MGCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "MGCard3Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "MGCard3Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard3Chev", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "frame", "id": "MGCard3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "MGCard3TitleRow", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "MGCard3Title", "fill": "$text-primary", "content": "Topping", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "MGCard3Badge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "MGCard3BadgeT", "fill": "#3B82F6", "content": "Tùy chọn", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "MGCard3Sub", "fill": "$text-tertiary", "content": "Chọn tối đa 3 · 6 tùy chọn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard3Actions", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "MGCard3Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard3EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "MGCard3Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "MGCard3DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
245
pencil-design/src/pages/tPOS/admin/notification-center.pen
Normal file
245
pencil-design/src/pages/tPOS/admin/notification-center.pen
Normal file
@@ -0,0 +1,245 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NotificationCenter",
|
||||
"name": "Admin/NotificationCenter",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "NCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "NCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "NCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "NCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "NCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "NCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "NCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "NCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "NCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "NCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "NCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "NCNavNotif", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCNavNotifI", "width": 20, "height": 20, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "NCNavNotifT", "fill": "#FFFFFF", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "NCNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "NCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "NCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "NCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "NCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "NCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "NCBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "NCBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "NCBread2", "fill": "$orange-primary", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "NCHeaderTitle", "fill": "$text-primary", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NCMarkAll", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCMarkAllI", "width": 16, "height": 16, "iconFontName": "check-check", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "NCMarkAllT", "fill": "$text-secondary", "content": "Đánh dấu tất cả đã đọc", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
{"type": "frame", "id": "NCTabs", "gap": 0, "children": [
|
||||
{"type": "frame", "id": "NCTab1", "fill": "$orange-primary", "cornerRadius": [10, 0, 0, 10], "padding": [10, 20], "children": [
|
||||
{"type": "text", "id": "NCTab1T", "fill": "#FFFFFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCTab2", "fill": "$bg-interactive", "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCTab2T", "fill": "$text-secondary", "content": "Chưa đọc", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "NCTab2Badge", "fill": "#EF4444", "cornerRadius": 100, "padding": [2, 8], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCTab2BadgeT", "fill": "#FFFFFF", "content": "5", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCTab3", "fill": "$bg-interactive", "cornerRadius": [0, 10, 10, 0], "padding": [10, 20], "children": [
|
||||
{"type": "text", "id": "NCTab3T", "fill": "$text-secondary", "content": "Đã đọc", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCSettingsCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "NCSettingsHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "NCSettingsTitle", "fill": "$text-primary", "content": "Cài đặt thông báo", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "NCChannelLabels", "gap": 32, "children": [
|
||||
{"type": "frame", "id": "NCLabelEmail", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "NCLabelEmailT", "fill": "$text-tertiary", "content": "Email", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCLabelSMS", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "NCLabelSMST", "fill": "$text-tertiary", "content": "SMS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCLabelPush", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "NCLabelPushT", "fill": "$text-tertiary", "content": "Push", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCDivider1", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "NCChannel1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh1Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh1Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCCh1IconI", "width": 20, "height": 20, "iconFontName": "shopping-bag", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh1Text", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "NCCh1Title", "fill": "$text-primary", "content": "Đơn hàng mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "NCCh1Desc", "fill": "$text-tertiary", "content": "Thông báo khi có đơn hàng mới được tạo", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh1Toggles", "gap": 32, "children": [
|
||||
{"type": "frame", "id": "NCCh1TgEmail", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh1SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh1DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh1TgSMS", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh1SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [
|
||||
{"type": "frame", "id": "NCCh1DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh1TgPush", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh1SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh1DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCDivider2", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "NCChannel2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh2Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh2Icon", "width": 40, "height": 40, "fill": "#EF444415", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCCh2IconI", "width": 20, "height": 20, "iconFontName": "package-x", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh2Text", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "NCCh2Title", "fill": "$text-primary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "NCCh2Desc", "fill": "$text-tertiary", "content": "Cảnh báo khi sản phẩm sắp hết hoặc đã hết hàng", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh2Toggles", "gap": 32, "children": [
|
||||
{"type": "frame", "id": "NCCh2TgEmail", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh2SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh2DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh2TgSMS", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh2SwSMS", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh2DotSMS", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh2TgPush", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh2SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh2DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCDivider3", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "NCChannel3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh3Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh3Icon", "width": 40, "height": 40, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCCh3IconI", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh3Text", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "NCCh3Title", "fill": "$text-primary", "content": "Nhân viên check-in", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "NCCh3Desc", "fill": "$text-tertiary", "content": "Thông báo khi nhân viên check-in/check-out ca làm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh3Toggles", "gap": 32, "children": [
|
||||
{"type": "frame", "id": "NCCh3TgEmail", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh3SwEmail", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [
|
||||
{"type": "frame", "id": "NCCh3DotEmail", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh3TgSMS", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh3SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [
|
||||
{"type": "frame", "id": "NCCh3DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh3TgPush", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh3SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh3DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCDivider4", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "NCChannel4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh4Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh4Icon", "width": 40, "height": 40, "fill": "#F59E0B15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NCCh4IconI", "width": 20, "height": 20, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh4Text", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "NCCh4Title", "fill": "$text-primary", "content": "Doanh thu hàng ngày", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "NCCh4Desc", "fill": "$text-tertiary", "content": "Báo cáo tổng doanh thu cuối ngày", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh4Toggles", "gap": 32, "children": [
|
||||
{"type": "frame", "id": "NCCh4TgEmail", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh4SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh4DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh4TgSMS", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh4SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [
|
||||
{"type": "frame", "id": "NCCh4DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NCCh4TgPush", "width": 60, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "NCCh4SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "NCCh4DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
145
pencil-design/src/pages/tPOS/admin/onboarding-business.pen
Normal file
145
pencil-design/src/pages/tPOS/admin/onboarding-business.pen
Normal file
@@ -0,0 +1,145 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OB1Root",
|
||||
"name": "Admin/OnboardingBusiness",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB1Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB1SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB1LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1LogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB1LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB1LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB1StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB1S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [
|
||||
{"type": "frame", "id": "OB1S1C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S1N", "fill": "#FFFFFF", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S1T", "fill": "$orange-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1L12", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB1S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB1S2C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S2N", "fill": "$text-tertiary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S2T", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1L23", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB1S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB1S3C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S3N", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S3T", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1L34", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB1S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB1S4C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S4N", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S4T", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB1S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB1S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB1S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB1S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB1S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "OB1Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40],
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB1Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB1FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1FTitle", "fill": "$text-primary", "content": "Thông tin doanh nghiệp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB1FSub", "fill": "$text-tertiary", "content": "Nhập thông tin cơ bản về doanh nghiệp của bạn", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Row1", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "OB1F1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F1L", "fill": "$text-secondary", "content": "Tên doanh nghiệp *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1F1P", "fill": "$text-tertiary", "content": "VD: Công ty TNHH ABC", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1F2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F2L", "fill": "$text-secondary", "content": "Mã số thuế", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1F2P", "fill": "$text-tertiary", "content": "VD: 0312345678", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Row2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F3L", "fill": "$text-secondary", "content": "Địa chỉ trụ sở *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1F3P", "fill": "$text-tertiary", "content": "Nhập địa chỉ trụ sở chính", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Row3", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "OB1F4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F4L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F4I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1F4P", "fill": "$text-tertiary", "content": "VD: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1F5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F5L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F5I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1F5P", "fill": "$text-tertiary", "content": "contact@company.com", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Row4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB1F6L", "fill": "$text-secondary", "content": "Logo doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB1F6I", "width": "fill_container", "height": 100, "fill": "$bg-interactive", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "$border-default", "dasharray": "6 4"}, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "OB1F6Ic", "width": 28, "height": 28, "iconFontName": "upload", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "OB1F6T", "fill": "$text-tertiary", "content": "Kéo thả hoặc nhấn để tải logo", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "OB1F6S", "fill": "$text-tertiary", "content": "PNG, JPG tối đa 2MB", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB1Footer", "width": "fill_container", "justifyContent": "flex_end", "padding": [8, 0, 0, 0], "children": [
|
||||
{"type": "frame", "id": "OB1NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB1NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "OB1NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
79
pencil-design/src/pages/tPOS/admin/onboarding-device.pen
Normal file
79
pencil-design/src/pages/tPOS/admin/onboarding-device.pen
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB5Root", "name": "Admin/OnboardingDevice", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB5Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "OB5SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB5LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}]},
|
||||
{"type": "frame", "id": "OB5LogoTG", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB5LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, {"type": "text", "id": "OB5LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB5StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB5S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB5L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB5S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB5L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB5S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB5L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB5S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S4C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S4Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB5L45", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB5S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB5S5C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5S5N", "fill": "#FFFFFF", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB5S5T", "fill": "$orange-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "OB5L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB5S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB5S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [
|
||||
{"type": "frame", "id": "OB5Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB5FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB5FTitle", "fill": "$text-primary", "content": "Kết nối thiết bị", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB5FSub", "fill": "$text-tertiary", "content": "Kết nối thiết bị POS và máy in để bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Pairing", "width": "fill_container", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB5QR", "width": 160, "height": 160, "fill": "#FFFFFF", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB5QRInner", "width": 120, "height": 120, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5QRIc", "width": 48, "height": 48, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5PairInfo", "width": "fill_container", "layout": "vertical", "gap": 16, "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "OB5PairT1", "fill": "$text-primary", "content": "Quét mã QR hoặc nhập mã kết nối", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "OB5PairT2", "fill": "$text-tertiary", "content": "Mở ứng dụng GoodGo POS trên thiết bị và quét mã QR bên trái", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "OB5CodeWrap", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB5CodeL", "fill": "$text-secondary", "content": "Mã kết nối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB5CodeBox", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB5Code", "fill": "$orange-primary", "content": "8A3F-K2M9", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "letterSpacing": 4},
|
||||
{"type": "icon_font", "id": "OB5CopyIc", "width": 18, "height": 18, "iconFontName": "copy", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Devices", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "OB5DevH", "fill": "$text-secondary", "content": "Thiết bị đã kết nối (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "OB5Dev1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": [14, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB5Dev1L", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB5Dev1Ic", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5Dev1IcI", "width": 22, "height": 22, "iconFontName": "tablet", "iconFontFamily": "lucide", "fill": "#3B82F6"}]},
|
||||
{"type": "frame", "id": "OB5Dev1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB5Dev1N", "fill": "$text-primary", "content": "iPad Pro - Quầy 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB5Dev1S", "fill": "$text-tertiary", "content": "Kết nối lúc 10:30 hôm nay", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Dev1Badge", "fill": "#22C55E20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB5Dev1BT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Printer", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "OB5PrintH", "fill": "$text-secondary", "content": "Thiết lập máy in", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "OB5PrintOpts", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB5PrintAuto", "width": "fill_container", "height": 56, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [{"type": "icon_font", "id": "OB5PrintAutoI", "width": 18, "height": 18, "iconFontName": "scan-search", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "OB5PrintAutoT", "fill": "$orange-primary", "content": "Tự động phát hiện", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "OB5PrintMan", "width": "fill_container", "height": 56, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [{"type": "icon_font", "id": "OB5PrintManI", "width": 18, "height": 18, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB5PrintManT", "fill": "$text-secondary", "content": "Cài đặt thủ công", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB5Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [
|
||||
{"type": "frame", "id": "OB5FootL", "gap": 12, "children": [{"type": "frame", "id": "OB5BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB5BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]},
|
||||
{"type": "frame", "id": "OB5FootR", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB5SkipBtn", "cornerRadius": 10, "padding": [12, 20], "alignItems": "center", "children": [{"type": "text", "id": "OB5SkipT", "fill": "$text-tertiary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB5NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OB5NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "icon_font", "id": "OB5NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}}
|
||||
}
|
||||
146
pencil-design/src/pages/tPOS/admin/onboarding-products.pen
Normal file
146
pencil-design/src/pages/tPOS/admin/onboarding-products.pen
Normal file
@@ -0,0 +1,146 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB3Root", "name": "Admin/OnboardingProducts", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB3Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "OB3SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB3LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3LogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB3LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB3LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB3StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB3S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB3S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB3S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]},
|
||||
{"type": "text", "id": "OB3S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB3S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB3S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB3S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]},
|
||||
{"type": "text", "id": "OB3S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB3S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [
|
||||
{"type": "frame", "id": "OB3S3C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3S3N", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "OB3S3T", "fill": "$orange-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3L34", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB3S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB3S4C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3S4N", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "OB3S4T", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB3S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB3S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "OB3S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB3S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB3S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "OB3S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [
|
||||
{"type": "frame", "id": "OB3Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB3FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB3FTitle", "fill": "$text-primary", "content": "Thêm sản phẩm", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB3FSub", "fill": "$text-tertiary", "content": "Thêm sản phẩm vào cửa hàng hoặc bỏ qua để thêm sau", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3Opts", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "OB3OptCSV", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "OB3OptCSVI", "width": 24, "height": 24, "iconFontName": "file-spreadsheet", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "OB3OptCSVT", "fill": "$text-secondary", "content": "Import từ CSV", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3OptMan", "width": "fill_container", "height": 80, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "OB3OptManI", "width": 24, "height": 24, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "OB3OptManT", "fill": "$orange-primary", "content": "Thêm thủ công", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3QForm", "width": "fill_container", "gap": 12, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "OB3QF1", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB3QF1L", "fill": "$text-secondary", "content": "Tên sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB3QF1I", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 12], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB3QF1P", "fill": "$text-tertiary", "content": "Tên SP", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3QF2", "width": 140, "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB3QF2L", "fill": "$text-secondary", "content": "Giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB3QF2I", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 12], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB3QF2P", "fill": "$text-tertiary", "content": "0 đ", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3QF3", "width": 140, "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB3QF3L", "fill": "$text-secondary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB3QF3I", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 12], "alignItems": "center", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "OB3QF3P", "fill": "$text-tertiary", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "OB3QF3Ic", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3AddBtn", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OB3AddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3List", "width": "fill_container", "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB3ListH", "fill": "$text-secondary", "content": "Sản phẩm đã thêm (3)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 12, 0]},
|
||||
{"type": "frame", "id": "OB3P1", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P1Av", "width": 36, "height": 36, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3P1E", "content": "☕", "fontSize": 18}]},
|
||||
{"type": "frame", "id": "OB3P1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB3P1N", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OB3P1Cat", "fill": "$text-tertiary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "OB3P1Price", "fill": "$orange-primary", "content": "29.000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3P2", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P2Av", "width": 36, "height": 36, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3P2E", "content": "🧋", "fontSize": 18}]},
|
||||
{"type": "frame", "id": "OB3P2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB3P2N", "fill": "$text-primary", "content": "Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OB3P2Cat", "fill": "$text-tertiary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "OB3P2Price", "fill": "$orange-primary", "content": "35.000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3P3", "width": "fill_container", "padding": [12, 0], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P3L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB3P3Av", "width": 36, "height": 36, "fill": "#F59E0B20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB3P3E", "content": "🥐", "fontSize": 18}]},
|
||||
{"type": "frame", "id": "OB3P3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB3P3N", "fill": "$text-primary", "content": "Bánh croissant", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OB3P3Cat", "fill": "$text-tertiary", "content": "Bánh ngọt", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "OB3P3Price", "fill": "$orange-primary", "content": "25.000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [
|
||||
{"type": "frame", "id": "OB3FootL", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB3BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OB3BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "OB3BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3FootR", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB3SkipBtn", "cornerRadius": 10, "padding": [12, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB3SkipT", "fill": "$text-tertiary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB3NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB3NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "OB3NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}}
|
||||
}
|
||||
67
pencil-design/src/pages/tPOS/admin/onboarding-ready.pen
Normal file
67
pencil-design/src/pages/tPOS/admin/onboarding-ready.pen
Normal file
@@ -0,0 +1,67 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB6Root", "name": "Admin/OnboardingReady", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB6Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "OB6SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB6LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}]},
|
||||
{"type": "frame", "id": "OB6LogoTG", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB6LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, {"type": "text", "id": "OB6LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB6StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB6S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB6L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB6S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB6L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB6S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB6L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB6S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S4C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S4Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB6L45", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB6S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S5C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S5Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S5T", "fill": "$text-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB6L56", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB6S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#22C55E15", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB6S6C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S6Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S6T", "fill": "#22C55E", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [
|
||||
{"type": "frame", "id": "OB6Card", "width": 560, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 40, "layout": "vertical", "gap": 32, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6SuccessIc", "width": 72, "height": 72, "fill": "#22C55E15", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6PartIc", "width": 36, "height": 36, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#22C55E"}]},
|
||||
{"type": "frame", "id": "OB6SuccTxt", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB6Title", "fill": "$text-primary", "content": "Thiết lập hoàn tất!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700", "textAlign": "center"},
|
||||
{"type": "text", "id": "OB6Sub", "fill": "$text-tertiary", "content": "Mọi thứ đã sẵn sàng để bạn bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Checklist", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": [16, 20], "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "OB6Chk1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6Chk1L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk1Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk1T", "fill": "$text-primary", "content": "Thông tin doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "OB6Chk1V", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Chk2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6Chk2L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk2Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "OB6Chk2V", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Chk3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6Chk3L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk3Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "OB6Chk3V", "fill": "$text-tertiary", "content": "12 sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Chk4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6Chk4L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk4Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "OB6Chk4V", "fill": "$text-tertiary", "content": "3 nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6Chk5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB6Chk5L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk5Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk5T", "fill": "$text-primary", "content": "Thiết bị POS", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "OB6Chk5V", "fill": "$text-tertiary", "content": "1 thiết bị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB6CTA", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "OB6CTAIc", "width": 20, "height": 20, "iconFontName": "rocket", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "OB6CTAT", "fill": "#FFFFFF", "content": "Bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB6Guide", "fill": "$text-tertiary", "content": "Xem hướng dẫn sử dụng", "fontFamily": "Roboto", "fontSize": 13, "textDecoration": "underline"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}}
|
||||
}
|
||||
79
pencil-design/src/pages/tPOS/admin/onboarding-staff.pen
Normal file
79
pencil-design/src/pages/tPOS/admin/onboarding-staff.pen
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB4Root", "name": "Admin/OnboardingStaff", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB4Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "OB4SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB4LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB4LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4LogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB4LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB4LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB4StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB4S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB4L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB4S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB4L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB4S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB4L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB4S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB4S4C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S4N", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S4T", "fill": "$orange-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "OB4L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB4S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB4L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB4S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [
|
||||
{"type": "frame", "id": "OB4Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB4FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB4FTitle", "fill": "$text-primary", "content": "Thêm nhân viên", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB4FSub", "fill": "$text-tertiary", "content": "Mời nhân viên tham gia hệ thống hoặc bỏ qua để thêm sau", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4Invite", "width": "fill_container", "gap": 12, "alignItems": "flex_end", "children": [
|
||||
{"type": "frame", "id": "OB4IF1", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB4IF1L", "fill": "$text-secondary", "content": "Email hoặc SĐT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB4IF1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [{"type": "text", "id": "OB4IF1P", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4IF2", "width": 200, "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB4IF2L", "fill": "$text-secondary", "content": "Vai trò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB4IF2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [{"type": "text", "id": "OB4IF2V", "fill": "$text-secondary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 14}, {"type": "icon_font", "id": "OB4IF2Ic", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4InvBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4InvI", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, {"type": "text", "id": "OB4InvT", "fill": "#FFFFFF", "content": "Mời", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4StaffList", "width": "fill_container", "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB4SLH", "fill": "$text-secondary", "content": "Đã mời (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 12, 0]},
|
||||
{"type": "frame", "id": "OB4Staff1", "width": "fill_container", "padding": [14, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB4St1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB4St1Av", "width": 40, "height": 40, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4St1AvT", "fill": "#FFFFFF", "content": "NT", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "OB4St1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB4St1N", "fill": "$text-primary", "content": "nguyenthu@email.com", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB4St1R", "fill": "$text-tertiary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4St1Badge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB4St1BT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4Staff2", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB4St2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB4St2Av", "width": 40, "height": 40, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4St2AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "OB4St2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB4St2N", "fill": "$text-primary", "content": "0901234567", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB4St2R", "fill": "$text-tertiary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4St2Badge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB4St2BT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB4Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [
|
||||
{"type": "frame", "id": "OB4FootL", "gap": 12, "children": [{"type": "frame", "id": "OB4BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB4BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]},
|
||||
{"type": "frame", "id": "OB4FootR", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB4SkipBtn", "cornerRadius": 10, "padding": [12, 20], "alignItems": "center", "children": [{"type": "text", "id": "OB4SkipT", "fill": "$text-tertiary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "OB4NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OB4NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "icon_font", "id": "OB4NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}}
|
||||
}
|
||||
150
pencil-design/src/pages/tPOS/admin/onboarding-store.pen
Normal file
150
pencil-design/src/pages/tPOS/admin/onboarding-store.pen
Normal file
@@ -0,0 +1,150 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OB2Root",
|
||||
"name": "Admin/OnboardingStore",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "OB2Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB2SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "OB2LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2LogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "OB2LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB2LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "text", "id": "OB2StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]},
|
||||
{"type": "frame", "id": "OB2S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB2S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OB2S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB2S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [
|
||||
{"type": "frame", "id": "OB2S2C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2S2N", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S2T", "fill": "$orange-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2L23", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB2S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB2S3C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2S3N", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S3T", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2L34", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB2S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB2S4C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2S4N", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S4T", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB2S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB2S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23},
|
||||
{"type": "frame", "id": "OB2S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [
|
||||
{"type": "frame", "id": "OB2S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "OB2S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "OB2Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40],
|
||||
"children": [
|
||||
{"type": "frame", "id": "OB2Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "OB2FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB2FTitle", "fill": "$text-primary", "content": "Tạo cửa hàng đầu tiên", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "OB2FSub", "fill": "$text-tertiary", "content": "Thiết lập thông tin cửa hàng và chọn loại hình kinh doanh", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Row1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB2F1L", "fill": "$text-secondary", "content": "Tên cửa hàng *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB2F1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2F1P", "fill": "$text-tertiary", "content": "VD: Coffee House Quận 1", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Row2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB2F2L", "fill": "$text-secondary", "content": "Địa chỉ *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB2F2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2F2P", "fill": "$text-tertiary", "content": "Nhập địa chỉ cửa hàng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Row3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB2F3L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB2F3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2F3P", "fill": "$text-tertiary", "content": "VD: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Row4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "OB2F4L", "fill": "$text-secondary", "content": "Chọn loại hình kinh doanh *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "OB2BizTypes", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "OB2Biz1", "width": "fill_container", "height": 80, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB2Biz1E", "content": "☕", "fontSize": 24},
|
||||
{"type": "text", "id": "OB2Biz1T", "fill": "$orange-primary", "content": "Quán café", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Biz2", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB2Biz2E", "content": "🍽️", "fontSize": 24},
|
||||
{"type": "text", "id": "OB2Biz2T", "fill": "$text-secondary", "content": "Nhà hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Biz3", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB2Biz3E", "content": "🎤", "fontSize": 24},
|
||||
{"type": "text", "id": "OB2Biz3T", "fill": "$text-secondary", "content": "Karaoke", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Biz4", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB2Biz4E", "content": "💆", "fontSize": 24},
|
||||
{"type": "text", "id": "OB2Biz4T", "fill": "$text-secondary", "content": "Spa", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Biz5", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "text", "id": "OB2Biz5E", "content": "🛒", "fontSize": 24},
|
||||
{"type": "text", "id": "OB2Biz5T", "fill": "$text-secondary", "content": "Bán lẻ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [
|
||||
{"type": "frame", "id": "OB2BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "OB2BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "OB2BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "OB2NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "OB2NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "OB2NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
170
pencil-design/src/pages/tPOS/admin/payroll-commission.pen
Normal file
170
pencil-design/src/pages/tPOS/admin/payroll-commission.pen
Normal file
@@ -0,0 +1,170 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "PayrollComm", "name": "Admin/PayrollCommission", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "PCLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCLogoGr", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PCLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PCNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PCNavPay", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavPayI", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PCNavPayT", "fill": "#FFFFFF", "content": "Bảng lương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PCUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "PCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCTitle", "fill": "$text-primary", "content": "Bảng lương & Hoa hồng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PCActions", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCMonth", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCMonthI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCMonthT", "fill": "$text-primary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "PCMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCExport", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCExpI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCExpT", "fill": "$text-secondary", "content": "Export", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "PCKPIs", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "PCK1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCK1L", "fill": "$text-tertiary", "content": "Tổng lương", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PCK1V", "fill": "$text-primary", "content": "45,600,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PCK1C", "fill": "#22C55E", "content": "+8.2% vs tháng trước", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "PCK2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCK2L", "fill": "$text-tertiary", "content": "Hoa hồng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PCK2V", "fill": "$orange-primary", "content": "3,200,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PCK2C", "fill": "$text-tertiary", "content": "7 nhân viên", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "PCK3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCK3L", "fill": "$text-tertiary", "content": "Phụ cấp", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PCK3V", "fill": "#3B82F6", "content": "1,800,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PCK3C", "fill": "$text-tertiary", "content": "Ăn trưa + đi lại", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "PCTblHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "PCTH1", "width": 180, "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH2", "width": 100, "fill": "$text-tertiary", "content": "Vai trò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH3", "width": 80, "fill": "$text-tertiary", "content": "Giờ làm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH4", "width": 130, "fill": "$text-tertiary", "content": "Lương CB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH5", "width": 110, "fill": "$text-tertiary", "content": "Hoa hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH6", "width": 100, "fill": "$text-tertiary", "content": "Phụ cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH7", "width": 130, "fill": "$text-tertiary", "content": "Tổng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCTH8", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR1N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "PCR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR1Role", "width": 100, "children": [{"type": "frame", "id": "PCR1RBdg", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR1RT", "fill": "#3B82F6", "content": "Manager", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "PCR1H", "width": 80, "fill": "$text-primary", "content": "176h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR1S", "width": 130, "fill": "$text-primary", "content": "12,000,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR1C", "width": 110, "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR1A", "width": 100, "fill": "$text-secondary", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR1T", "width": 130, "fill": "$text-primary", "content": "13,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PCR1St", "children": [{"type": "frame", "id": "PCR1StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR1StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR2N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "PCR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR2Role", "width": 100, "children": [{"type": "frame", "id": "PCR2RBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR2RT", "fill": "#22C55E", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "PCR2H", "width": 80, "fill": "$text-primary", "content": "168h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR2S", "width": 130, "fill": "$text-primary", "content": "7,500,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR2C", "width": 110, "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR2A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR2T", "width": 130, "fill": "$text-primary", "content": "8,450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PCR2St", "children": [{"type": "frame", "id": "PCR2StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR2StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR3N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "PCR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR3Role", "width": 100, "children": [{"type": "frame", "id": "PCR3RBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR3RT", "fill": "#F59E0B", "content": "Barista", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "PCR3H", "width": 80, "fill": "$text-primary", "content": "160h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR3S", "width": 130, "fill": "$text-primary", "content": "6,500,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR3C", "width": 110, "fill": "$orange-primary", "content": "520,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR3A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR3T", "width": 130, "fill": "$text-primary", "content": "7,320,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PCR3St", "children": [{"type": "frame", "id": "PCR3StBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR3StT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR4N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "PCR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR4Role", "width": 100, "children": [{"type": "frame", "id": "PCR4RBdg", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR4RT", "fill": "#8B5CF6", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "PCR4H", "width": 80, "fill": "$text-primary", "content": "152h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR4S", "width": 130, "fill": "$text-primary", "content": "5,800,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR4C", "width": 110, "fill": "$orange-primary", "content": "430,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR4A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR4T", "width": 130, "fill": "$text-primary", "content": "6,530,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PCR4St", "children": [{"type": "frame", "id": "PCR4StBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR4StT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR5", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR5N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCR5Av", "width": 32, "height": 32, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCR5AvT", "fill": "#FFFFFF", "content": "VT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "PCR5Nm", "fill": "$text-primary", "content": "Võ Thảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCR5Role", "width": 100, "children": [{"type": "frame", "id": "PCR5RBdg", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR5RT", "fill": "#EF4444", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "PCR5H", "width": 80, "fill": "$text-primary", "content": "168h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR5S", "width": 130, "fill": "$text-primary", "content": "6,000,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR5C", "width": 110, "fill": "$orange-primary", "content": "0₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR5A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCR5T", "width": 130, "fill": "$text-primary", "content": "6,300,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PCR5St", "children": [{"type": "frame", "id": "PCR5StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR5StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
209
pencil-design/src/pages/tPOS/admin/pricing-rules.pen
Normal file
209
pencil-design/src/pages/tPOS/admin/pricing-rules.pen
Normal file
@@ -0,0 +1,209 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PricingRules",
|
||||
"name": "Admin/PricingRules",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "PRSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PRSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PRLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "PRLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PRLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PRNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PRNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PRNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PRNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PRNavPromo", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRNavPromoI", "width": 20, "height": 20, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PRNavPromoT", "fill": "#FFFFFF", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PRNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PRNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PRNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PRNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PRNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PRNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PRNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PRUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PRUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "PRMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PRHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PRHeaderTitle", "fill": "$text-primary", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PRHeaderRight", "children": [
|
||||
{"type": "frame", "id": "PRCreateBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PRCreateI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PRCreateT", "fill": "#FFFFFF", "content": "Tạo KM mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRTabsRow", "width": "fill_container", "fill": "$bg-elevated", "padding": [0, 32], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "PRTabActive", "padding": [12, 16], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PRTabActiveT", "fill": "$orange-primary", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PRTabActiveBadge", "fill": "$orange-primary", "cornerRadius": 100, "padding": [1, 6], "children": [
|
||||
{"type": "text", "id": "PRTabActiveBadgeT", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRTab2", "padding": [12, 16], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PRTab2T", "fill": "$text-secondary", "content": "Lên lịch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PRTab2Badge", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [1, 6], "children": [
|
||||
{"type": "text", "id": "PRTab2BadgeT", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRTab3", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "PRTab3T", "fill": "$text-secondary", "content": "Đã kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 0, "clip": true, "children": [
|
||||
{"type": "frame", "id": "PRTableCard", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "PRTableHead", "width": "fill_container", "padding": [12, 20], "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "PRTh1", "width": "fill_container", "fill": "$text-tertiary", "content": "Tên chương trình", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRTh2", "width": 120, "fill": "$text-tertiary", "content": "Loại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRTh3", "width": 180, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRTh4", "width": 140, "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRTh5", "width": 100, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRRow1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRRow1C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow1Name", "fill": "$text-primary", "content": "Flash Sale cuối tuần", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRRow1Desc", "fill": "$text-tertiary", "content": "Giảm 20% tất cả đồ uống", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow1C2", "width": 120, "children": [
|
||||
{"type": "frame", "id": "PRRow1TypeBadge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow1TypeT", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow1C3", "width": 180, "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow1Date1", "fill": "$text-secondary", "content": "08/02 - 14/02/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PRRow1Date2", "fill": "$text-tertiary", "content": "T7 & CN, 14:00-18:00", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "text", "id": "PRRow1C4", "width": 140, "fill": "$text-secondary", "content": "Tất cả (3)", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "PRRow1C5", "width": 100, "children": [
|
||||
{"type": "frame", "id": "PRRow1StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow1StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRRow2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRRow2C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow2Name", "fill": "$text-primary", "content": "Combo Sáng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRRow2Desc", "fill": "$text-tertiary", "content": "Cà phê + Bánh mì 49K", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow2C2", "width": 120, "children": [
|
||||
{"type": "frame", "id": "PRRow2TypeBadge", "fill": "#A855F720", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow2TypeT", "fill": "#A855F7", "content": "Combo", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow2C3", "width": 180, "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow2Date1", "fill": "$text-secondary", "content": "01/02 - 28/02/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PRRow2Date2", "fill": "$text-tertiary", "content": "Hàng ngày, 06:00-10:00", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "text", "id": "PRRow2C4", "width": 140, "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "PRRow2C5", "width": 100, "children": [
|
||||
{"type": "frame", "id": "PRRow2StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow2StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRRow3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRRow3C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow3Name", "fill": "$text-primary", "content": "Mua 1 tặng 1 Trà sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRRow3Desc", "fill": "$text-tertiary", "content": "Mua ly thứ 2 giá 0đ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow3C2", "width": 120, "children": [
|
||||
{"type": "frame", "id": "PRRow3TypeBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow3TypeT", "fill": "#F59E0B", "content": "BOGO", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow3C3", "width": 180, "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow3Date1", "fill": "$text-secondary", "content": "10/02 - 16/02/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PRRow3Date2", "fill": "$text-tertiary", "content": "Thứ 2-6, cả ngày", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "text", "id": "PRRow3C4", "width": 140, "fill": "$text-secondary", "content": "Tất cả (3)", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "PRRow3C5", "width": 100, "children": [
|
||||
{"type": "frame", "id": "PRRow3StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow3StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PRRow4", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PRRow4C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow4Name", "fill": "$text-primary", "content": "Happy Hour Chiều", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PRRow4Desc", "fill": "$text-tertiary", "content": "Giảm 30% từ 15:00-17:00", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow4C2", "width": 120, "children": [
|
||||
{"type": "frame", "id": "PRRow4TypeBadge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow4TypeT", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PRRow4C3", "width": 180, "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PRRow4Date1", "fill": "$text-secondary", "content": "15/02 - 28/02/2026", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "PRRow4Date2", "fill": "$text-tertiary", "content": "Hàng ngày, 15:00-17:00", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "text", "id": "PRRow4C4", "width": 140, "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "PRRow4C5", "width": 100, "children": [
|
||||
{"type": "frame", "id": "PRRow4StatusBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "PRRow4StatusT", "fill": "#F59E0B", "content": "Lên lịch", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
190
pencil-design/src/pages/tPOS/admin/product-create.pen
Normal file
190
pencil-design/src/pages/tPOS/admin/product-create.pen
Normal file
@@ -0,0 +1,190 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCreate",
|
||||
"name": "Admin/ProductCreate",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "PCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PCNavProducts", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavProductsI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PCNavProductsT", "fill": "#FFFFFF", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PCNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "PCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCBackBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCBackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "text", "id": "PCHeaderTitle", "fill": "$text-primary", "content": "Thêm sản phẩm mới", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PCCancelBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 20], "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "PCCancelBtnT", "fill": "$text-primary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PCSaveBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PCSaveI", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PCSaveT", "fill": "#FFFFFF", "content": "Lưu sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCBody", "width": "fill_container", "height": "fill_container", "padding": 28, "gap": 24, "clip": true, "children": [
|
||||
{"type": "frame", "id": "PCFormLeft", "width": "fill_container", "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "PCInfoCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "text", "id": "PCInfoTitle", "fill": "$text-primary", "content": "Thông tin sản phẩm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
|
||||
{"type": "frame", "id": "PCFieldName", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldNameL", "fill": "$text-secondary", "content": "Tên sản phẩm *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldNameInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldNameV", "fill": "$text-tertiary", "content": "Nhập tên sản phẩm...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCFieldSKU", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldSKUL", "fill": "$text-secondary", "content": "Mã SKU", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldSKUInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldSKUV", "fill": "$text-tertiary", "content": "VD: CF-ESP-001", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCFieldDesc", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldDescL", "fill": "$text-secondary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldDescInput", "width": "fill_container", "height": 100, "fill": "$bg-interactive", "cornerRadius": 10, "padding": 14, "children": [
|
||||
{"type": "text", "id": "PCFieldDescV", "fill": "$text-tertiary", "content": "Nhập mô tả sản phẩm...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCFieldCat", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldCatL", "fill": "$text-secondary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldCatInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "PCFieldCatV", "fill": "$text-tertiary", "content": "Chọn danh mục...", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "PCFieldCatChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCPriceRow", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "PCFieldPrice", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldPriceL", "fill": "$text-secondary", "content": "Giá bán (₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldPriceInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldPriceV", "fill": "$text-primary", "content": "35,000", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCFieldCost", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldCostL", "fill": "$text-secondary", "content": "Giá vốn (₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldCostInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldCostV", "fill": "$text-primary", "content": "12,000", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCFormRight", "width": 360, "layout": "vertical", "gap": 24, "children": [
|
||||
{"type": "frame", "id": "PCImageCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "PCImageTitle", "fill": "$text-primary", "content": "Hình ảnh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PCImageUpload", "width": "fill_container", "height": 160, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 12, "stroke": {"thickness": 2, "fill": "$border-default", "dashArray": [6, 4]}, "children": [
|
||||
{"type": "icon_font", "id": "PCImageUploadI", "width": 32, "height": 32, "iconFontName": "image-plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "PCImageUploadT", "fill": "$text-secondary", "content": "Kéo thả hoặc nhấn để tải ảnh", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "PCImageUploadS", "fill": "$text-tertiary", "content": "PNG, JPG tối đa 5MB", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCStockCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "PCStockTitle", "fill": "$text-primary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PCFieldQty", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldQtyL", "fill": "$text-secondary", "content": "Số lượng tồn kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldQtyInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldQtyV", "fill": "$text-primary", "content": "100", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PCFieldAlert", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PCFieldAlertL", "fill": "$text-secondary", "content": "Ngưỡng cảnh báo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PCFieldAlertInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PCFieldAlertV", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "PCToggleCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "PCToggleTitle", "fill": "$text-primary", "content": "Hiển thị", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PCTogglePOS", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PCTogglePOSL", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PCTogglePOST", "fill": "$text-primary", "content": "Hiển thị trên POS", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PCTogglePOSSub", "fill": "$text-tertiary", "content": "Sản phẩm sẽ hiện trên màn hình POS", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "PCTogglePOSSw", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "PCTogglePOSDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
199
pencil-design/src/pages/tPOS/admin/purchase-orders.pen
Normal file
199
pencil-design/src/pages/tPOS/admin/purchase-orders.pen
Normal file
@@ -0,0 +1,199 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PurchaseOrders",
|
||||
"name": "Admin/PurchaseOrders",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "POSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "POLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "POLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "POLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "POLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "POSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PONavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PONavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PONavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PONavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PONavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PONavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PONavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "PONavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PONavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "PONavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PONavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "PONavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "PONavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PONavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PONavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "PONavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "PONavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PONavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PONavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "POSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "POUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "POUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "POUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "POMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "POHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "POHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "POBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "POBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "POBread2", "fill": "$orange-primary", "content": "Đơn đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "POHeaderTitle", "fill": "$text-primary", "content": "Đơn đặt hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "POHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "POSearchBox", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "POSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "POSearchP", "fill": "$text-tertiary", "content": "Tìm đơn hàng...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "POAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "POAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "POAddT", "fill": "#FFFFFF", "content": "Tạo PO mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "POContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
{"type": "frame", "id": "POTabs", "width": "fill_container", "gap": 0, "children": [
|
||||
{"type": "frame", "id": "POTab1", "padding": [10, 20], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "POTab1T", "fill": "$orange-primary", "content": "Tất cả (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "POTab2", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "POTab2T", "fill": "$text-tertiary", "content": "Draft (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "POTab3", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "POTab3T", "fill": "$text-tertiary", "content": "Chờ duyệt (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "POTab4", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "POTab4T", "fill": "$text-tertiary", "content": "Đang giao (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "POTab5", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "POTab5T", "fill": "$text-tertiary", "content": "Đã nhận (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "POTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "POTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POTh1", "width": 130, "fill": "$text-tertiary", "content": "Mã PO", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POTh2", "width": 200, "fill": "$text-tertiary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POTh3", "width": 140, "fill": "$text-tertiary", "content": "Ngày tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POTh4", "width": 160, "fill": "$text-tertiary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POTh5", "width": 100, "fill": "$text-tertiary", "content": "Số SP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POTh6", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PORow1", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POR1C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-001", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR1C2", "width": 200, "fill": "$text-primary", "content": "Lavazza Vietnam", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR1C3", "width": 140, "fill": "$text-secondary", "content": "15/01/2024", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR1C4", "width": 160, "fill": "$text-primary", "content": "12,500,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR1C5", "width": 100, "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "POR1Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "POR1BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "POR1BadgeT", "fill": "#22C55E", "content": "Đã nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PORow2", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POR2C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-002", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR2C2", "width": 200, "fill": "$text-primary", "content": "Milo Vietnam", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR2C3", "width": 140, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR2C4", "width": 160, "fill": "$text-primary", "content": "8,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR2C5", "width": 100, "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "POR2Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "POR2BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "POR2BadgeT", "fill": "#3B82F6", "content": "Đang giao", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PORow3", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POR3C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-003", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR3C2", "width": 200, "fill": "$text-primary", "content": "Vinamilk", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR3C3", "width": 140, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR3C4", "width": 160, "fill": "$text-primary", "content": "5,800,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR3C5", "width": 100, "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "POR3Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "POR3BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "POR3BadgeT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PORow4", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POR4C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-004", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR4C2", "width": 200, "fill": "$text-primary", "content": "Fresh Garden", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR4C3", "width": 140, "fill": "$text-secondary", "content": "22/01/2024", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR4C4", "width": 160, "fill": "$text-primary", "content": "3,400,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR4C5", "width": 100, "fill": "$text-secondary", "content": "6", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "POR4Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "POR4BadgeF", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "POR4BadgeT", "fill": "$text-tertiary", "content": "Draft", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PORow5", "width": "fill_container", "height": 56, "padding": [0, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "POR5C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-005", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR5C2", "width": 200, "fill": "$text-primary", "content": "Đường Biên Hòa", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR5C3", "width": 140, "fill": "$text-secondary", "content": "10/01/2024", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "POR5C4", "width": 160, "fill": "$text-primary", "content": "2,100,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POR5C5", "width": 100, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "POR5Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "POR5BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "POR5BadgeT", "fill": "#22C55E", "content": "Đã nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
199
pencil-design/src/pages/tPOS/admin/revenue-analytics.pen
Normal file
199
pencil-design/src/pages/tPOS/admin/revenue-analytics.pen
Normal file
@@ -0,0 +1,199 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RevenueAnalytics",
|
||||
"name": "Admin/RevenueAnalytics",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "RASidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RASidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RALogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RALogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "RALogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RALogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "RALogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RASidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "RANavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "RANavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RANavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RANavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RANavRevenue", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RANavRevenueI", "width": 20, "height": 20, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "RANavRevenueT", "fill": "#FFFFFF", "content": "Phân tích doanh thu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "RANavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "RANavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RANavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RANavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "RANavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "RANavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RANavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RANavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RASidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RAUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RAUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "RAUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RAUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RAUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "RAMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RAHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RAHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "RAHeaderTitle", "fill": "$text-primary", "content": "Phân tích doanh thu", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "RAHeaderSub", "fill": "$text-tertiary", "content": "Theo dõi và phân tích hiệu suất kinh doanh", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "RAHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RADatePicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RADateI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RADateT", "fill": "$text-secondary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RAStoreSelect", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RAStoreI", "width": 18, "height": 18, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "RAStoreT", "fill": "$text-secondary", "content": "Tất cả cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "RAStoreChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "RAContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
|
||||
{"type": "frame", "id": "RAKpiRow", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "RAKpi1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RAKpi1L", "fill": "$text-tertiary", "content": "Tổng doanh thu", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "RAKpi1V", "fill": "$text-primary", "content": "156.8M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "RAKpi1Change", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RAKpi1Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RAKpi1Pct", "fill": "#22C55E", "content": "+12.3%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RAKpi1Vs", "fill": "$text-tertiary", "content": "vs tháng trước", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RAKpi2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RAKpi2L", "fill": "$text-tertiary", "content": "Đơn hàng TB", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "RAKpi2V", "fill": "$text-primary", "content": "125K", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "RAKpi2Change", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RAKpi2Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RAKpi2Pct", "fill": "#22C55E", "content": "+5.2%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RAKpi3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RAKpi3L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "RAKpi3V", "fill": "$text-primary", "content": "1,254", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "RAKpi3Change", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RAKpi3Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RAKpi3Pct", "fill": "#22C55E", "content": "+8.1%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RAKpi4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RAKpi4L", "fill": "$text-tertiary", "content": "Khách mới", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "RAKpi4V", "fill": "$text-primary", "content": "89", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "RAKpi4Change", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RAKpi4Arrow", "width": 14, "height": 14, "iconFontName": "trending-down", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "RAKpi4Pct", "fill": "#EF4444", "content": "-3.4%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "RAChartCard", "width": "fill_container", "height": 260, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "RAChartHead", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RAChartTitle", "fill": "$text-primary", "content": "Xu hướng doanh thu", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "RAChartLegend", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "RALeg1", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RALeg1Dot", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 100},
|
||||
{"type": "text", "id": "RALeg1T", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "RALeg2", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RALeg2Dot", "width": 10, "height": 10, "fill": "#3B82F6", "cornerRadius": 100},
|
||||
{"type": "text", "id": "RALeg2T", "fill": "$text-tertiary", "content": "Tháng trước", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RAChartArea", "width": "fill_container", "height": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom", "left"]}, "children": [
|
||||
{"type": "frame", "id": "RAGrid1", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 40},
|
||||
{"type": "frame", "id": "RAGrid2", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 80},
|
||||
{"type": "frame", "id": "RAGrid3", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 120},
|
||||
{"type": "text", "id": "RAYLabel1", "fill": "$text-tertiary", "content": "20M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 35},
|
||||
{"type": "text", "id": "RAYLabel2", "fill": "$text-tertiary", "content": "15M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 75},
|
||||
{"type": "text", "id": "RAYLabel3", "fill": "$text-tertiary", "content": "10M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 115}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "RATableCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "RATableHead", "width": "fill_container", "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATableTitle", "fill": "$text-primary", "content": "Top sản phẩm bán chạy", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATblH1", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "RATblH2", "fill": "$text-tertiary", "content": "SL bán", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "RATblH3", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATblH4", "fill": "$text-tertiary", "content": "% Tổng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 80}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATR1N", "fill": "$text-primary", "content": "Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "RATR1Q", "fill": "$text-secondary", "content": "342", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "RATR1R", "fill": "$text-primary", "content": "34.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATR1P", "fill": "$orange-primary", "content": "21.8%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATR2N", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "RATR2Q", "fill": "$text-secondary", "content": "289", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "RATR2R", "fill": "$text-primary", "content": "28.9M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATR2P", "fill": "$orange-primary", "content": "18.4%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATR3N", "fill": "$text-primary", "content": "Bánh mì thịt nướng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "RATR3Q", "fill": "$text-secondary", "content": "215", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "RATR3R", "fill": "$text-primary", "content": "21.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATR3P", "fill": "$orange-primary", "content": "13.7%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblR4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATR4N", "fill": "$text-primary", "content": "Phở bò đặc biệt", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "RATR4Q", "fill": "$text-secondary", "content": "178", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "RATR4R", "fill": "$text-primary", "content": "17.8M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATR4P", "fill": "$orange-primary", "content": "11.3%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80}
|
||||
]},
|
||||
{"type": "frame", "id": "RATblR5", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RATR5N", "fill": "$text-primary", "content": "Bún bò Huế", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "RATR5Q", "fill": "$text-secondary", "content": "156", "fontFamily": "Roboto", "fontSize": 13, "width": 100},
|
||||
{"type": "text", "id": "RATR5R", "fill": "$text-primary", "content": "15.6M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "RATR5P", "fill": "$orange-primary", "content": "9.9%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
157
pencil-design/src/pages/tPOS/admin/staff-create.pen
Normal file
157
pencil-design/src/pages/tPOS/admin/staff-create.pen
Normal file
@@ -0,0 +1,157 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "StaffCreate", "name": "Admin/StaffCreate", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "SCLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCLogoTx", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCLogoGr", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SCLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SCNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SCNavStaff", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SCNavStI", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SCNavStT", "fill": "#FFFFFF", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCUserInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SCUserNm", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SCUserRl", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "SCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCHdrL", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SCBackI", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCHdrTG", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "SCBc", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCBc1", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SCBcS", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SCBc2", "fill": "$orange-primary", "content": "Thêm mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SCTitle", "fill": "$text-primary", "content": "Thêm nhân viên", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCHdrR", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SCCancel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCCancelT", "fill": "$text-secondary", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCSave", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SCSaveI", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SCSaveT", "fill": "#FFFFFF", "content": "Lưu & Gửi mời", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCContent", "width": "fill_container", "height": "fill_container", "padding": [32, 48], "gap": 24, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "SCInfoCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "text", "id": "SCInfoT", "fill": "$text-primary", "content": "Thông tin cá nhân", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SCRow1", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "SCF1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SCF1L", "fill": "$text-secondary", "content": "Họ và tên *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SCF1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCF1P", "fill": "$text-tertiary", "content": "Nhập họ và tên", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCF2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SCF2L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SCF2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCF2P", "fill": "$text-tertiary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCRow2", "width": "fill_container", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "SCF3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SCF3L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SCF3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCF3P", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCF4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SCF4L", "fill": "$text-secondary", "content": "CMND/CCCD", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SCF4I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCF4P", "fill": "$text-tertiary", "content": "Nhập số CMND/CCCD", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCRoleCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "SCRoleT", "fill": "$text-primary", "content": "Chọn vai trò *", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SCRoles", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SCR1", "width": "fill_container", "height": 72, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "SCR1I", "width": 22, "height": 22, "iconFontName": "monitor", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "SCR1T", "fill": "$orange-primary", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCR2", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "SCR2I", "width": 22, "height": 22, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SCR2T", "fill": "$text-secondary", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCR3", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "SCR3I", "width": 22, "height": 22, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SCR3T", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCR4", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "SCR4I", "width": 22, "height": 22, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SCR4T", "fill": "$text-secondary", "content": "Barista", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCR5", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "icon_font", "id": "SCR5I", "width": 22, "height": 22, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SCR5T", "fill": "$text-secondary", "content": "Manager", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCStoreCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "text", "id": "SCStoreT", "fill": "$text-primary", "content": "Gán cửa hàng *", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SCStores", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SCS1", "width": "fill_container", "height": 44, "fill": "#FF5C0015", "stroke": {"thickness": 1, "fill": "$orange-primary"}, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCS1Chk", "width": 20, "height": 20, "fill": "$orange-primary", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SCS1ChI", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]},
|
||||
{"type": "text", "id": "SCS1T", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SCS2", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCS2Chk", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4},
|
||||
{"type": "text", "id": "SCS2T", "fill": "$text-secondary", "content": "Nhà hàng Q3", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "SCS3", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SCS3Chk", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4},
|
||||
{"type": "text", "id": "SCS3T", "fill": "$text-secondary", "content": "Karaoke Star Q7", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SCInvite", "width": "fill_container", "padding": [12, 0, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SCInvT", "fill": "$text-secondary", "content": "Gửi email mời nhân viên", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "SCToggle", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [
|
||||
{"type": "frame", "id": "SCTogDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
244
pencil-design/src/pages/tPOS/admin/staff-schedule.pen
Normal file
244
pencil-design/src/pages/tPOS/admin/staff-schedule.pen
Normal file
@@ -0,0 +1,244 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "StaffSchedule", "name": "Admin/StaffSchedule", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SSSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "SSLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSLogoGr", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SSLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SSLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SSNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SSNavSch", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SSNavSchI", "width": 20, "height": 20, "iconFontName": "calendar-days", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SSNavSchT", "fill": "#FFFFFF", "content": "Lịch làm việc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SSUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SSUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "SSHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSTitle", "fill": "$text-primary", "content": "Lịch làm việc", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SSWeekSel", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSWkPrev", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SSWkPrevI", "width": 18, "height": 18, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "SSWkTxt", "fill": "$text-primary", "content": "Tuần 10/02 - 16/02", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SSWkNext", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SSWkNextI", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSAddShift", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SSAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SSAddT", "fill": "#FFFFFF", "content": "Phân ca", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSCalendar", "width": "fill_container", "height": "fill_container", "padding": [24, 24], "layout": "vertical", "gap": 0, "children": [
|
||||
{"type": "frame", "id": "SSCalHead", "width": "fill_container", "children": [
|
||||
{"type": "frame", "id": "SSCalN", "width": 140, "height": 44, "padding": [0, 12], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSCalNT", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD1", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD1T", "fill": "$text-secondary", "content": "T2 10/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD2", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD2T", "fill": "$text-secondary", "content": "T3 11/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD3", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD3T", "fill": "$orange-primary", "content": "T4 12/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD4", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD4T", "fill": "$text-secondary", "content": "T5 13/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD5", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD5T", "fill": "$text-secondary", "content": "T6 14/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD6", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD6T", "fill": "$text-secondary", "content": "T7 15/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSD7", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [
|
||||
{"type": "text", "id": "SSD7T", "fill": "$text-tertiary", "content": "CN 16/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSRow1", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [
|
||||
{"type": "frame", "id": "SSR1N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "SSR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR1D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR1D1S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR1D1T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR1D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR1D2S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR1D2T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR1D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR1D3S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR1D3T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR1D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR1D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR1D5S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR1D5T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR1D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR1D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}
|
||||
]},
|
||||
{"type": "frame", "id": "SSRow2", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [
|
||||
{"type": "frame", "id": "SSR2N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "SSR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2D1S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2D1T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2D2S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2D2T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR2D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2D4S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2D4T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2D5S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2D5T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR2D6S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR2D6T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR2D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}
|
||||
]},
|
||||
{"type": "frame", "id": "SSRow3", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [
|
||||
{"type": "frame", "id": "SSR3N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "SSR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR3D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3D1S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3D1T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR3D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR3D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3D3S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3D3T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR3D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3D4S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3D4T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR3D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR3D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3D6S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3D6T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR3D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR3D7S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR3D7T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSRow4", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [
|
||||
{"type": "frame", "id": "SSR4N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "SSR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}},
|
||||
{"type": "frame", "id": "SSR4D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4D2S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4D2T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4D3S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4D3T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4D4S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4D4T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4D5S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4D5T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "SSR4D6S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SSR4D6T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SSR4D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}
|
||||
]},
|
||||
{"type": "frame", "id": "SSLegend", "width": "fill_container", "padding": [16, 0, 0, 0], "gap": 24, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [
|
||||
{"type": "frame", "id": "SSLg1", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSLg1C", "width": 14, "height": 14, "fill": "#3B82F6", "cornerRadius": 4},
|
||||
{"type": "text", "id": "SSLg1T", "fill": "$text-secondary", "content": "Sáng 6h-14h", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SSLg2", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSLg2C", "width": 14, "height": 14, "fill": "#22C55E", "cornerRadius": 4},
|
||||
{"type": "text", "id": "SSLg2T", "fill": "$text-secondary", "content": "Chiều 14h-22h", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SSLg3", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SSLg3C", "width": 14, "height": 14, "fill": "#8B5CF6", "cornerRadius": 4},
|
||||
{"type": "text", "id": "SSLg3T", "fill": "$text-secondary", "content": "Tối 22h-6h", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
218
pencil-design/src/pages/tPOS/admin/stock-transfer.pen
Normal file
218
pencil-design/src/pages/tPOS/admin/stock-transfer.pen
Normal file
@@ -0,0 +1,218 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StockTransfer",
|
||||
"name": "Admin/StockTransfer",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "STSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "STSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "STLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "STLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "STLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "STLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "STNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "STNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "STNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "STNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "STNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "STNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "STNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "STNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "STNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "STNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "STNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "STNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "STNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "STNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "STNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "STNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "STNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "STNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "STUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "STUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "STUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "STMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "STHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "STHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "STBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "STBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "STBread2", "fill": "$orange-primary", "content": "Chuyển kho", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "STHeaderTitle", "fill": "$text-primary", "content": "Chuyển kho", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "STHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "STAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "STAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "STAddT", "fill": "#FFFFFF", "content": "Tạo phiếu chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
{"type": "frame", "id": "STTableSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "STTableTitle", "fill": "$text-primary", "content": "Phiếu chuyển kho gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "STTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "STTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STTh1", "width": 120, "fill": "$text-tertiary", "content": "Mã phiếu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STTh2", "width": 180, "fill": "$text-tertiary", "content": "Từ cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STTh3", "width": 180, "fill": "$text-tertiary", "content": "Đến cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STTh4", "width": 80, "fill": "$text-tertiary", "content": "Số SP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STTh5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STTh6", "width": 120, "fill": "$text-tertiary", "content": "Ngày tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "STRow1", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STR1C1", "width": 120, "fill": "$orange-primary", "content": "TF-001", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STR1C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR1C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q3", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR1C4", "width": 80, "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STR1Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "STR1BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "STR1BadgeT", "fill": "#3B82F6", "content": "Đang vận chuyển", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "STR1C6", "width": 120, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "STRow2", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STR2C1", "width": 120, "fill": "$orange-primary", "content": "TF-002", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STR2C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q7", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR2C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR2C4", "width": 80, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STR2Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "STR2BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "STR2BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "STR2C6", "width": 120, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "STRow3", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STR3C1", "width": 120, "fill": "$orange-primary", "content": "TF-003", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STR3C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Thủ Đức", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR3C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q7", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR3C4", "width": 80, "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STR3Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "STR3BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "STR3BadgeT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "STR3C6", "width": 120, "fill": "$text-secondary", "content": "15/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "STRow4", "width": "fill_container", "height": 56, "padding": [0, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STR4C1", "width": 120, "fill": "$orange-primary", "content": "TF-004", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "STR4C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q3", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR4C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Thủ Đức", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "STR4C4", "width": 80, "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STR4Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "STR4BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "STR4BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "STR4C6", "width": 120, "fill": "$text-secondary", "content": "12/01/2024", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STFormSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "text", "id": "STFormTitle", "fill": "$text-primary", "content": "Tạo phiếu chuyển kho mới", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "STFormRow1", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "STFormFrom", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "STFormFromL", "fill": "$text-secondary", "content": "Cửa hàng gửi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "STFormFromDD", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFormFromV", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "STFormFromChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STFormArrow", "width": 44, "height": 44, "justifyContent": "center", "alignItems": "flex_end", "children": [
|
||||
{"type": "icon_font", "id": "STFormArrowI", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "STFormTo", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "STFormToL", "fill": "$text-secondary", "content": "Cửa hàng nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "STFormToDD", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFormToV", "fill": "$text-tertiary", "content": "Chọn cửa hàng...", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "STFormToChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STFormProducts", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "STFormProdL", "fill": "$text-secondary", "content": "Danh sách sản phẩm chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "STFormProdList", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "STFProd1", "width": "fill_container", "height": 44, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd1N", "fill": "$text-primary", "content": "Cà phê Arabica 500g", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STFProd1Qty", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd1QL", "fill": "$text-tertiary", "content": "SL:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "STFProd1QV", "width": 60, "height": 30, "fill": "$bg-page", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd1QT", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STFProd2", "width": "fill_container", "height": 44, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd2N", "fill": "$text-primary", "content": "Sữa tươi Vinamilk 1L", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "STFProd2Qty", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd2QL", "fill": "$text-tertiary", "content": "SL:", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "STFProd2QV", "width": 60, "height": 30, "fill": "$bg-page", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "STFProd2QT", "fill": "$text-primary", "content": "24", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "STFProdAdd", "width": "fill_container", "height": 44, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "icon_font", "id": "STFProdAddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "STFProdAddT", "fill": "$orange-primary", "content": "Thêm sản phẩm", "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"}
|
||||
}
|
||||
}
|
||||
232
pencil-design/src/pages/tPOS/admin/store-detail.pen
Normal file
232
pencil-design/src/pages/tPOS/admin/store-detail.pen
Normal file
@@ -0,0 +1,232 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StoreDetail",
|
||||
"name": "Admin/StoreDetail",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "SDSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SDSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SDLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SDLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SDSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SDNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SDNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SDNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SDNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SDNavStores", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SDNavStoresT", "fill": "#FFFFFF", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SDNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SDNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SDNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SDNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SDSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SDUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SDUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "SDMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SDHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SDHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "SDBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDBread1", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SDBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SDBread2", "fill": "$orange-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDHeaderTitleRow", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDHeaderTitle", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SDStatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 12], "alignItems": "center", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SDStatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100},
|
||||
{"type": "text", "id": "SDStatusText", "fill": "#22C55E", "content": "Active", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SDHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SDEditBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDEditBtnI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "SDEditBtnT", "fill": "$text-primary", "content": "Chỉnh sửa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDPauseBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDPauseBtnI", "width": 16, "height": 16, "iconFontName": "pause-circle", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "SDPauseBtnT", "fill": "$text-primary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTabsRow", "width": "fill_container", "fill": "$bg-elevated", "padding": [0, 32], "gap": 0, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "frame", "id": "SDTabActive", "padding": [12, 16], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "SDTabActiveT", "fill": "$orange-primary", "content": "Tổng quan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDTab2", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "SDTab2T", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDTab3", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "SDTab3T", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDTab4", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "SDTab4T", "fill": "$text-secondary", "content": "Kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDTab5", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "SDTab5T", "fill": "$text-secondary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SDTab6", "padding": [12, 16], "children": [
|
||||
{"type": "text", "id": "SDTab6T", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
{"type": "frame", "id": "SDKPIRow", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "SDKPI1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SDKPI1Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [
|
||||
{"type": "text", "id": "SDKPI1Label", "fill": "$text-secondary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SDKPI1Icon", "width": 36, "height": 36, "fill": "#FF5C0015", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDKPI1I", "width": 18, "height": 18, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SDKPI1Value", "fill": "$text-primary", "content": "45.2M ₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDKPI1Sub", "fill": "#22C55E", "content": "+12.5% so với tháng trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SDKPI2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SDKPI2Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [
|
||||
{"type": "text", "id": "SDKPI2Label", "fill": "$text-secondary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SDKPI2Icon", "width": 36, "height": 36, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDKPI2I", "width": 18, "height": 18, "iconFontName": "shopping-bag", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SDKPI2Value", "fill": "$text-primary", "content": "328", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDKPI2Sub", "fill": "#22C55E", "content": "+8.2% so với tháng trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SDKPI3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SDKPI3Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [
|
||||
{"type": "text", "id": "SDKPI3Label", "fill": "$text-secondary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SDKPI3Icon", "width": 36, "height": 36, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDKPI3I", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SDKPI3Value", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDKPI3Sub", "fill": "$text-tertiary", "content": "6 đang làm việc", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SDKPI4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SDKPI4Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [
|
||||
{"type": "text", "id": "SDKPI4Label", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SDKPI4Icon", "width": 36, "height": 36, "fill": "#F59E0B15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SDKPI4I", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SDKPI4Value", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDKPI4Sub", "fill": "$text-tertiary", "content": "3 hết hàng", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTableCard", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "SDTableHeader", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDTableTitle", "fill": "$text-primary", "content": "Đơn hàng gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SDTableLink", "fill": "$orange-primary", "content": "Xem tất cả →", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTableHead", "width": "fill_container", "padding": [10, 20], "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "SDTh1", "width": 120, "fill": "$text-tertiary", "content": "Mã đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTh2", "width": 140, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTh3", "width": "fill_container", "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTh4", "width": 140, "fill": "$text-tertiary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTh5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTr1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDTr1C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1024", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTr1C2", "width": 140, "fill": "$text-secondary", "content": "14:32, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr1C3", "width": "fill_container", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr1C4", "width": 140, "fill": "$text-primary", "content": "185,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SDTr1Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "SDTr1BadgeF", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SDTr1BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTr2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDTr2C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1023", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTr2C2", "width": 140, "fill": "$text-secondary", "content": "14:15, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr2C3", "width": "fill_container", "fill": "$text-primary", "content": "Trần Thị Mai", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr2C4", "width": 140, "fill": "$text-primary", "content": "92,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SDTr2Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "SDTr2BadgeF", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SDTr2BadgeT", "fill": "#F59E0B", "content": "Đang pha", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTr3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDTr3C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1022", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTr3C2", "width": 140, "fill": "$text-secondary", "content": "13:48, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr3C3", "width": "fill_container", "fill": "$text-primary", "content": "Lê Hoàng Dũng", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr3C4", "width": 140, "fill": "$text-primary", "content": "256,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SDTr3Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "SDTr3BadgeF", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SDTr3BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "SDTr4", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SDTr4C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1021", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SDTr4C2", "width": 140, "fill": "$text-secondary", "content": "13:22, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr4C3", "width": "fill_container", "fill": "$text-primary", "content": "Phạm Quốc Bảo", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "SDTr4C4", "width": 140, "fill": "$text-primary", "content": "124,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SDTr4Badge", "width": 120, "children": [
|
||||
{"type": "frame", "id": "SDTr4BadgeF", "fill": "#EF444420", "cornerRadius": 100, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "SDTr4BadgeT", "fill": "#EF4444", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
362
pencil-design/src/pages/tPOS/admin/supplier-management.pen
Normal file
362
pencil-design/src/pages/tPOS/admin/supplier-management.pen
Normal file
@@ -0,0 +1,362 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SupplierMgmt",
|
||||
"name": "Admin/SupplierManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "SMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SMNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SMNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SMNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SMNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SMNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "SMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "SMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "SMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "SMBreadcrumb", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SMBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SMBread2", "fill": "$orange-primary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "text", "id": "SMHeaderTitle", "fill": "$text-primary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMHeaderRight", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMSearchBox", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMSearchP", "fill": "$text-tertiary", "content": "Tìm nhà cung cấp...", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "SMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SMAddT", "fill": "#FFFFFF", "content": "Thêm NCC", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [
|
||||
{"type": "frame", "id": "SMStats", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "SMStat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SMStat1L", "fill": "$text-tertiary", "content": "Tổng NCC", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SMStat1V", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMStat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SMStat2L", "fill": "$text-tertiary", "content": "Đang hoạt động", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SMStat2V", "fill": "#22C55E", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMStat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "SMStat3L", "fill": "$text-tertiary", "content": "PO tháng này", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "SMStat3V", "fill": "$orange-primary", "content": "12", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMGrid", "width": "fill_container", "height": "fill_container", "gap": 16, "wrap": true, "children": [
|
||||
{"type": "frame", "id": "SMCard1", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC1AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC1Av", "width": 42, "height": 42, "fill": "#7C3AED", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC1AvT", "fill": "#FFFFFF", "content": "LV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC1Name", "fill": "$text-primary", "content": "Lavazza Vietnam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC1Cat", "fill": "$text-tertiary", "content": "Cà phê & Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC1StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC1Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC1PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC1PhoneT", "fill": "$text-secondary", "content": "028 3823 4567", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC1EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC1EmailT", "fill": "$text-secondary", "content": "order@lavazza.vn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC1POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC1POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC1POsV", "fill": "$text-primary", "content": "24", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC1Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC1S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC1S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC1S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC1S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC1S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMCard2", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC2AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC2Av", "width": 42, "height": 42, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC2AvT", "fill": "#FFFFFF", "content": "ML", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC2Name", "fill": "$text-primary", "content": "Milo Vietnam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC2Cat", "fill": "$text-tertiary", "content": "Đồ uống & Bột", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC2StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC2Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC2PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC2PhoneT", "fill": "$text-secondary", "content": "028 3912 8888", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC2EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC2EmailT", "fill": "$text-secondary", "content": "sales@milovn.com", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC2POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC2POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC2POsV", "fill": "$text-primary", "content": "18", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC2Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC2S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC2S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC2S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC2S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC2S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMCard3", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC3AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC3Av", "width": 42, "height": 42, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC3AvT", "fill": "#FFFFFF", "content": "VM", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC3Name", "fill": "$text-primary", "content": "Vinamilk", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC3Cat", "fill": "$text-tertiary", "content": "Sữa & Sản phẩm từ sữa", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC3StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC3Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC3PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC3PhoneT", "fill": "$text-secondary", "content": "028 3845 1234", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC3EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC3EmailT", "fill": "$text-secondary", "content": "b2b@vinamilk.com.vn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC3POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC3POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC3POsV", "fill": "$text-primary", "content": "31", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC3Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC3S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC3S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC3S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC3S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "SMC3S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMCard4", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC4AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC4Av", "width": 42, "height": 42, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC4AvT", "fill": "#FFFFFF", "content": "FG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC4Name", "fill": "$text-primary", "content": "Fresh Garden", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC4Cat", "fill": "$text-tertiary", "content": "Rau củ & Trái cây tươi", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC4StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC4Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC4PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC4PhoneT", "fill": "$text-secondary", "content": "028 3756 9012", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC4EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC4EmailT", "fill": "$text-secondary", "content": "info@freshgarden.vn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC4POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC4POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC4POsV", "fill": "$text-primary", "content": "15", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC4Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC4S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC4S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC4S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC4S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC4S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMCard5", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC5Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC5AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC5Av", "width": 42, "height": 42, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC5AvT", "fill": "#FFFFFF", "content": "AB", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC5Name", "fill": "$text-primary", "content": "ABC Foods", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC5Cat", "fill": "$text-tertiary", "content": "Gia vị & Nước chấm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC5StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC5Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC5PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC5PhoneT", "fill": "$text-secondary", "content": "028 3678 5555", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC5EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC5EmailT", "fill": "$text-secondary", "content": "sales@abcfoods.vn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC5POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC5POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC5POsV", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC5Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC5S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC5S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC5S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC5S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "SMC5S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMCard6", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "frame", "id": "SMC6Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC6AvatarWrap", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC6Av", "width": 42, "height": 42, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SMC6AvT", "fill": "#FFFFFF", "content": "BH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6NameWrap", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC6Name", "fill": "$text-primary", "content": "Đường Biên Hòa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SMC6Cat", "fill": "$text-tertiary", "content": "Đường & Phụ gia", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6Status", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "SMC6StatusT", "fill": "$text-tertiary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "SMC6Phone", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC6PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC6PhoneT", "fill": "$text-secondary", "content": "0251 382 1234", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6Email", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SMC6EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SMC6EmailT", "fill": "$text-secondary", "content": "order@bhs.com.vn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SMC6POs", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SMC6POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10},
|
||||
{"type": "text", "id": "SMC6POsV", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SMC6Stars", "gap": 2, "children": [
|
||||
{"type": "icon_font", "id": "SMC6S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC6S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC6S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SMC6S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "icon_font", "id": "SMC6S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
193
pencil-design/src/pages/tPOS/admin/tax-configuration.pen
Normal file
193
pencil-design/src/pages/tPOS/admin/tax-configuration.pen
Normal file
@@ -0,0 +1,193 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxConfiguration",
|
||||
"name": "Admin/TaxConfiguration",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "TCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "TCLogoTG", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "TCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "TCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "TCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "TCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "TCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"type": "frame", "id": "TCNavTax", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCNavTaxI", "width": 20, "height": 20, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "TCNavTaxT", "fill": "#FFFFFF", "content": "Cài đặt thuế", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame", "id": "TCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TCHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "TCHeaderTitle", "fill": "$text-primary", "content": "Cài đặt thuế", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TCHeaderSub", "fill": "$text-tertiary", "content": "Cấu hình thuế và phí dịch vụ áp dụng cho sản phẩm", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "TCHeaderRight", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "TCSaveBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCSaveI", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "TCSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "TCContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 24, "clip": true, "children": [
|
||||
|
||||
{"type": "text", "id": "TCProfilesTitle", "fill": "$text-primary", "content": "Hồ sơ thuế", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
|
||||
{"type": "frame", "id": "TCProfileRow", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "TCProf1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [
|
||||
{"type": "frame", "id": "TCProf1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCProf1N", "fill": "$text-primary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "TCProf1Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "TCProf1BT", "fill": "#22C55E", "content": "Mặc định", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "TCProf1Rate", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TCProf1Desc", "fill": "$text-tertiary", "content": "Thuế giá trị gia tăng theo quy định", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "TCProf2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "$border-subtle"}, "children": [
|
||||
{"type": "frame", "id": "TCProf2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCProf2N", "fill": "$text-primary", "content": "Phí dịch vụ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "TCProf2Rate", "fill": "#3B82F6", "content": "5%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TCProf2Desc", "fill": "$text-tertiary", "content": "Phí dịch vụ phục vụ tại bàn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "TCProf3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "$border-subtle"}, "children": [
|
||||
{"type": "frame", "id": "TCProf3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCProf3N", "fill": "$text-primary", "content": "Không thuế", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "text", "id": "TCProf3Rate", "fill": "$text-tertiary", "content": "0%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TCProf3Desc", "fill": "$text-tertiary", "content": "Miễn thuế cho sản phẩm nội bộ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "TCDefaultSel", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TCDefLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "TCDefLabel", "fill": "$text-primary", "content": "Thuế mặc định cho sản phẩm mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TCDefDesc", "fill": "$text-tertiary", "content": "Tự động áp dụng khi tạo sản phẩm mới", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "TCDefSelect", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCDefVal", "fill": "$text-primary", "content": "VAT 10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "TCDefChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
|
||||
{"type": "frame", "id": "TCRulesTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [
|
||||
{"type": "frame", "id": "TCRulesHead", "width": "fill_container", "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCRulesTitle", "fill": "$text-primary", "content": "Quy tắc thuế theo nhóm sản phẩm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TCAddRule", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TCAddRuleI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TCAddRuleT", "fill": "$text-secondary", "content": "Thêm quy tắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCRHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCRH1", "fill": "$text-tertiary", "content": "Nhóm sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "TCRH2", "fill": "$text-tertiary", "content": "Hồ sơ thuế", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 160},
|
||||
{"type": "text", "id": "TCRH3", "fill": "$text-tertiary", "content": "Thuế suất", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "TCRH4", "fill": "$text-tertiary", "content": "Ngày áp dụng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "TCRH5", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}
|
||||
]},
|
||||
{"type": "frame", "id": "TCRR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCR1N", "fill": "$text-primary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "TCR1P", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 13, "width": 160},
|
||||
{"type": "text", "id": "TCR1R", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "TCR1D", "fill": "$text-secondary", "content": "01/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120},
|
||||
{"type": "frame", "id": "TCR1Status", "width": 100, "children": [
|
||||
{"type": "frame", "id": "TCR1SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "TCR1ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCRR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCR2N", "fill": "$text-primary", "content": "Món ăn chính", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "TCR2P", "fill": "$text-secondary", "content": "VAT + Phí DV", "fontFamily": "Roboto", "fontSize": 13, "width": 160},
|
||||
{"type": "text", "id": "TCR2R", "fill": "$orange-primary", "content": "15%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "TCR2D", "fill": "$text-secondary", "content": "01/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120},
|
||||
{"type": "frame", "id": "TCR2Status", "width": 100, "children": [
|
||||
{"type": "frame", "id": "TCR2SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "TCR2ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCRR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCR3N", "fill": "$text-primary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "TCR3P", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 13, "width": 160},
|
||||
{"type": "text", "id": "TCR3R", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "TCR3D", "fill": "$text-secondary", "content": "15/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120},
|
||||
{"type": "frame", "id": "TCR3Status", "width": 100, "children": [
|
||||
{"type": "frame", "id": "TCR3SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "TCR3ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TCRR4", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TCR4N", "fill": "$text-primary", "content": "Combo / Set", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "TCR4P", "fill": "$text-secondary", "content": "Không thuế", "fontFamily": "Roboto", "fontSize": 13, "width": 160},
|
||||
{"type": "text", "id": "TCR4R", "fill": "$text-tertiary", "content": "0%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100},
|
||||
{"type": "text", "id": "TCR4D", "fill": "$text-secondary", "content": "01/02/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120},
|
||||
{"type": "frame", "id": "TCR4Status", "width": 100, "children": [
|
||||
{"type": "frame", "id": "TCR4SBG", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [
|
||||
{"type": "text", "id": "TCR4ST", "fill": "#F59E0B", "content": "Tạm dừng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user