diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/admin-dashboard.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/admin-dashboard.pen new file mode 100644 index 00000000..27e25bca --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/admin-dashboard.pen @@ -0,0 +1,1674 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "DashboardScreen", + "x": 0, + "y": 0, + "name": "Admin/Dashboard", + "reusable": true, + "clip": true, + "width": 1440, + "height": 1044, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "SidebarDash", + "name": "Sidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-surface", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$border-default" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "LogoAreaDash", + "name": "Logo Area", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "LogoIconDash", + "name": "Logo Icon", + "width": 48, + "height": 48, + "fill": "#FFFFFF33", + "cornerRadius": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoTextDash", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "bold" + } + ] + }, + { + "type": "text", + "id": "BrandNameDash", + "fill": "#FFFFFF", + "content": "EggyMon Kitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + }, + { + "type": "text", + "id": "BrandSubDash", + "fill": "#FFFFFFB3", + "content": "Quản lý cửa hàng", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NavAreaDash", + "name": "Navigation", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [ + 16, + 12 + ], + "children": [ + { + "type": "text", + "id": "NavLabelOverview", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NavDashboard", + "name": "Nav Dashboard Active", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconDashboard", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "NavDashText", + "fill": "#FFFFFF", + "content": "Dashboard", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NavLabelStore", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NavOrders", + "name": "Nav Orders", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconOrders", + "width": 20, + "height": 20, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavOrdersText", + "fill": "$text-secondary", + "content": "Quản lý đơn hàng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavStaff", + "name": "Nav Staff", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconStaff", + "width": 20, + "height": 20, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavStaffText", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavSettings", + "name": "Nav Settings", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconSettings", + "width": 20, + "height": 20, + "iconFontName": "settings-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavSettingsText", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NavLabelBiz", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NavReport", + "name": "Nav Report", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconReport", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavReportText", + "fill": "$text-secondary", + "content": "Báo cáo", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavLoyalty", + "name": "Nav Loyalty", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IconLoyalty", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavLoyaltyText", + "fill": "$text-secondary", + "content": "Loyalty", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "UserAreaDash", + "name": "User Area", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DividerDash", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "UserRowDash", + "name": "User Row", + "width": "fill_container", + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AvatarDash", + "width": 40, + "height": 40, + "fill": "$orange-primary", + "cornerRadius": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvatarTextDash", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "UserInfoDash", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "UserNameDash", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "UserRoleDash", + "fill": "$text-secondary", + "content": "Store Manager", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContentDash", + "name": "Main Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "HeaderRowDash", + "name": "Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HeaderLeftDash", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "BreadcrumbDash", + "fill": "$text-tertiary", + "content": "Tổng quan / Dashboard", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PageTitleDash", + "fill": "$text-primary", + "content": "Dashboard", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "DatePickerDash", + "name": "Date Range Picker", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CalendarIconDash", + "width": 18, + "height": 18, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DateTextDash", + "fill": "$text-primary", + "content": "Hôm nay, 11/02/2025", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StatsRowDash", + "name": "Stats Row", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "StatCardRevenue", + "name": "Revenue Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "StatLabelRevenue", + "fill": "$text-secondary", + "content": "Doanh thu hôm nay", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "StatValueRevenue", + "fill": "$text-primary", + "content": "4,250,000₫", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "StatBadgeRevenue", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrendUpRevenue", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "StatChangeRevenue", + "fill": "#16A34A", + "content": "+12.5%", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StatCardOrders", + "name": "Orders Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "StatLabelOrders", + "fill": "$text-secondary", + "content": "Đơn hàng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "StatValueOrders", + "fill": "$text-primary", + "content": "87", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "StatBadgeOrders", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrendUpOrders", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "StatChangeOrders", + "fill": "#16A34A", + "content": "+8.3%", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StatCardCustomers", + "name": "Customers Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "StatLabelCustomers", + "fill": "$text-secondary", + "content": "Khách hàng mới", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "StatValueCustomers", + "fill": "$text-primary", + "content": "12", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "StatBadgeCustomers", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrendDownCustomers", + "width": 14, + "height": 14, + "iconFontName": "trending-down", + "iconFontFamily": "lucide", + "fill": "#DC2626" + }, + { + "type": "text", + "id": "StatChangeCustomers", + "fill": "#DC2626", + "content": "-2.1%", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StatCardAverage", + "name": "Average Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "StatLabelAverage", + "fill": "$text-secondary", + "content": "Trung bình/đơn", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "StatValueAverage", + "fill": "$text-primary", + "content": "48,850₫", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "StatBadgeAverage", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrendUpAverage", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "StatChangeAverage", + "fill": "#16A34A", + "content": "+5.7%", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MiddleRowDash", + "name": "Charts Row", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "RevenueChartCard", + "name": "Revenue Chart", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "text", + "id": "ChartTitleDash", + "fill": "$text-primary", + "content": "Biểu đồ doanh thu", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "ChartAreaDash", + "name": "Chart Bars", + "width": "fill_container", + "height": 160, + "gap": 8, + "padding": [ + 0, + 10 + ], + "alignItems": "end", + "children": [ + { + "type": "frame", + "id": "BarMon", + "width": "fill_container", + "height": 100, + "fill": "$orange-primary", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarTue", + "width": "fill_container", + "height": 130, + "fill": "$orange-primary", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarWed", + "width": "fill_container", + "height": 90, + "fill": "$orange-primary", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarThu", + "width": "fill_container", + "height": 145, + "fill": "$orange-primary", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarFri", + "width": "fill_container", + "height": 155, + "fill": "$orange-primary", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarSat", + "width": "fill_container", + "height": 160, + "fill": "$orange-light", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "BarSun", + "width": "fill_container", + "height": 110, + "fill": "$orange-light", + "cornerRadius": [ + 4, + 4, + 0, + 0 + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PopularItemsCard", + "name": "Popular Items", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "PopularTitle", + "fill": "$text-primary", + "content": "Món bán chạy", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PopItem1", + "width": "fill_container", + "gap": 12, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rank1Frame", + "width": 28, + "height": 28, + "fill": "$orange-primary", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rank1Text", + "fill": "#FFFFFF", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "bold" + } + ] + }, + { + "type": "text", + "id": "PopName1", + "fill": "$text-primary", + "content": "Combo bánh mì đặc biệt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PopQty1", + "fill": "$text-secondary", + "content": "342 phần", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PopItem2", + "width": "fill_container", + "gap": 12, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rank2Frame", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rank2Text", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PopName2", + "fill": "$text-primary", + "content": "Trà sữa oolong", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PopQty2", + "fill": "$text-secondary", + "content": "298 phần", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PopItem3", + "width": "fill_container", + "gap": 12, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rank3Frame", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rank3Text", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PopName3", + "fill": "$text-primary", + "content": "Cơm trưa đặc biệt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PopQty3", + "fill": "$text-secondary", + "content": "256 phần", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PopItem4", + "width": "fill_container", + "gap": 12, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rank4Frame", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rank4Text", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PopName4", + "fill": "$text-primary", + "content": "Omelette phô mai", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PopQty4", + "fill": "$text-secondary", + "content": "234 phần", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PopItem5", + "width": "fill_container", + "gap": 12, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rank5Frame", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rank5Text", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PopName5", + "fill": "$text-primary", + "content": "Bánh mì trứng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PopQty5", + "fill": "$text-secondary", + "content": "198 phần", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RecentOrdersCard", + "name": "Recent Orders", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "RecentOrdersTitle", + "fill": "$text-primary", + "content": "Đơn hàng gần đây", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "TableHeaderDash", + "name": "Table Header", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": [ + 10, + 10, + 0, + 0 + ], + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "ThOrderId", + "fill": "$text-secondary", + "content": "Mã đơn", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ThCustomer", + "fill": "$text-secondary", + "content": "Khách hàng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ThItems", + "fill": "$text-secondary", + "content": "Món", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ThTotal", + "fill": "$text-secondary", + "content": "Tổng tiền", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ThStatus", + "fill": "$text-secondary", + "content": "Trạng thái", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ThTime", + "fill": "$text-secondary", + "content": "Thời gian", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TableRow1Dash", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Td1OrderId", + "fill": "$text-primary", + "content": "#EK-0087", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Td1Customer", + "fill": "$text-primary", + "content": "Nguyễn Văn B", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td1Items", + "fill": "$text-secondary", + "content": "Combo bánh mì x2, Trà sữa x1", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td1Total", + "fill": "$text-primary", + "content": "185,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Td1Status", + "width": 130, + "children": [ + { + "type": "frame", + "id": "Badge1Dash", + "fill": "#DBEAFE", + "cornerRadius": 20, + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Badge1Text", + "fill": "#2563EB", + "content": "Đang chế biến", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "Td1Time", + "fill": "$text-secondary", + "content": "14:32", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TableRow2Dash", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Td2OrderId", + "fill": "$text-primary", + "content": "#EK-0086", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Td2Customer", + "fill": "$text-primary", + "content": "Trần Thị C", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td2Items", + "fill": "$text-secondary", + "content": "Cơm trưa đặc biệt x1", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td2Total", + "fill": "$text-primary", + "content": "55,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Td2Status", + "width": 130, + "children": [ + { + "type": "frame", + "id": "Badge2Dash", + "fill": "#DCFCE7", + "cornerRadius": 20, + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Badge2Text", + "fill": "#16A34A", + "content": "Hoàn thành", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "Td2Time", + "fill": "$text-secondary", + "content": "14:15", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TableRow3Dash", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Td3OrderId", + "fill": "$text-primary", + "content": "#EK-0085", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Td3Customer", + "fill": "$text-primary", + "content": "Walk-in", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td3Items", + "fill": "$text-secondary", + "content": "Omelette phô mai x2", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td3Total", + "fill": "$text-primary", + "content": "120,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Td3Status", + "width": 130, + "children": [ + { + "type": "frame", + "id": "Badge3Dash", + "fill": "#FFEDD5", + "cornerRadius": 20, + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Badge3Text", + "fill": "#EA580C", + "content": "Chờ lấy", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "Td3Time", + "fill": "$text-secondary", + "content": "13:50", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TableRow4Dash", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Td4OrderId", + "fill": "$text-primary", + "content": "#EK-0084", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Td4Customer", + "fill": "$text-primary", + "content": "App - Lê D", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td4Items", + "fill": "$text-secondary", + "content": "Bánh mì trứng x3", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Td4Total", + "fill": "$text-primary", + "content": "90,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Td4Status", + "width": 130, + "children": [ + { + "type": "frame", + "id": "Badge4Dash", + "fill": "#FEE2E2", + "cornerRadius": 20, + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Badge4Text", + "fill": "#DC2626", + "content": "Đã hủy", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "Td4Time", + "fill": "$text-secondary", + "content": "13:30", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/order-management.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/order-management.pen new file mode 100644 index 00000000..25c92633 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/order-management.pen @@ -0,0 +1,306 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "OrderScreen", + "name": "Admin/OrderManagement", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SidebarOrder", + "name": "Sidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}}, + "children": [ + { + "type": "frame", + "id": "LogoAreaOrd", + "width": "fill_container", + "fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]}, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + {"type": "frame", "id": "LogoIconOrd", "width": 48, "height": 48, "cornerRadius": 24, "fill": "#FFFFFF33", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoTxOrd", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}]}, + {"type": "text", "id": "BrandNameOrd", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}, + {"type": "text", "id": "BrandSubOrd", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11} + ] + }, + { + "type": "frame", + "id": "NavAreaOrd", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 12], + "gap": 4, + "children": [ + {"type": "text", "id": "NvLblOvOrd", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]}, + {"type": "frame", "id": "NvDashOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcDshOrd", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxDshOrd", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "text", "id": "NvLblStOrd", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]}, + {"type": "frame", "id": "NvOrdActive", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcOrdAct", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "#FFFFFF"}, {"type": "text", "id": "TxOrdAct", "content": "Quản lý đơn hàng", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "NvStfOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcStfOrd", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxStfOrd", "content": "Nhân sự", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "NvSetOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcSetOrd", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxSetOrd", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "text", "id": "NvLblBzOrd", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]}, + {"type": "frame", "id": "NvRptOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcRptOrd", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxRptOrd", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "frame", "id": "NvLoyOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcLoyOrd", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxLoyOrd", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "UserAreaOrd", + "width": "fill_container", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "DividerOrd", "width": "fill_container", "height": 1, "fill": "$border-default"}, + {"type": "frame", "id": "UserRowOrd", "width": "fill_container", "padding": [16, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "AvatarOrd", "width": 40, "height": 40, "cornerRadius": 20, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvTxOrd", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]}, + {"type": "frame", "id": "UsrInfoOrd", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "UsrNmOrd", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "UsrRlOrd", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}]} + ]} + ] + } + ] + }, + { + "type": "frame", + "id": "MainContentOrd", + "name": "Main Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "padding": 32, + "gap": 20, + "children": [ + {"type": "text", "id": "TitleOrd", "content": "Quản lý đơn hàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"}, + { + "type": "frame", + "id": "StatusTabs", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "padding": 4, + "layout": "horizontal", + "gap": 0, + "children": [ + {"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 10, "padding": [8, 16], "children": [{"type": "text", "id": "TabAllTx", "content": "Tất cả (87)", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "TabPending", "padding": [8, 16], "children": [{"type": "text", "id": "TabPendTx", "content": "Chờ xác nhận (5)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "TabCooking", "padding": [8, 16], "children": [{"type": "text", "id": "TabCookTx", "content": "Đang chế biến (12)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "TabReady", "padding": [8, 16], "children": [{"type": "text", "id": "TabReadyTx", "content": "Chờ lấy (8)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "TabDone", "padding": [8, 16], "children": [{"type": "text", "id": "TabDoneTx", "content": "Hoàn thành (58)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "TabCancel", "padding": [8, 16], "children": [{"type": "text", "id": "TabCancelTx", "content": "Đã hủy (4)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]} + ] + }, + { + "type": "frame", + "id": "FilterBarOrd", + "width": "fill_container", + "layout": "horizontal", + "gap": 12, + "children": [ + {"type": "frame", "id": "SearchOrd", "width": 300, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "IcSrchOrd", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"}, + {"type": "text", "id": "SrchPlcOrd", "content": "Tìm đơn hàng...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14} + ]}, + {"type": "frame", "id": "DateFilterOrd", "width": 200, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "IcCalOrd", "iconFontFamily": "lucide", "iconFontName": "calendar", "width": 18, "height": 18, "fill": "$text-tertiary"}, + {"type": "text", "id": "DateTxOrd", "content": "Hôm nay", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ]} + ] + }, + { + "type": "frame", + "id": "OrdersTable", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "OrdTblHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": [14, 14, 0, 0], + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "children": [ + {"type": "text", "id": "OThCode", "content": "Mã đơn", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 110}, + {"type": "text", "id": "OThTime", "content": "Thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90}, + {"type": "text", "id": "OThCust", "content": "Khách hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150}, + {"type": "text", "id": "OThItems", "content": "Món", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"}, + {"type": "text", "id": "OThTotal", "content": "Tổng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 120}, + {"type": "text", "id": "OThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 140}, + {"type": "text", "id": "OThAction", "content": "Hành động", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90} + ] + }, + { + "type": "frame", + "id": "OrdRow1", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + {"type": "text", "id": "Or1Code", "content": "#EK-0087", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110}, + {"type": "text", "id": "Or1Time", "content": "14:32", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90}, + {"type": "text", "id": "Or1Cust", "content": "Nguyễn Văn B", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150}, + {"type": "text", "id": "Or1Items", "content": "Combo bánh mì x2, Trà sữa x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"}, + {"type": "text", "id": "Or1Total", "content": "185,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120}, + {"type": "frame", "id": "Or1Stat", "width": 140, "children": [{"type": "frame", "id": "Or1Badge", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or1BdgTx", "content": "Chờ xác nhận", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]}, + {"type": "frame", "id": "Or1Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [ + {"type": "icon_font", "id": "Or1Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"}, + {"type": "icon_font", "id": "Or1More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "OrdRow2", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + {"type": "text", "id": "Or2Code", "content": "#EK-0086", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110}, + {"type": "text", "id": "Or2Time", "content": "14:15", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90}, + {"type": "text", "id": "Or2Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150}, + {"type": "text", "id": "Or2Items", "content": "Cơm trưa đặc biệt x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"}, + {"type": "text", "id": "Or2Total", "content": "55,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120}, + {"type": "frame", "id": "Or2Stat", "width": 140, "children": [{"type": "frame", "id": "Or2Badge", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or2BdgTx", "content": "Đang chế biến", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]}, + {"type": "frame", "id": "Or2Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [ + {"type": "icon_font", "id": "Or2Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"}, + {"type": "icon_font", "id": "Or2More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "OrdRow3", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + {"type": "text", "id": "Or3Code", "content": "#EK-0085", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110}, + {"type": "text", "id": "Or3Time", "content": "13:50", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90}, + {"type": "text", "id": "Or3Cust", "content": "Trần Thị C", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150}, + {"type": "text", "id": "Or3Items", "content": "Omelette phô mai x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"}, + {"type": "text", "id": "Or3Total", "content": "120,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120}, + {"type": "frame", "id": "Or3Stat", "width": 140, "children": [{"type": "frame", "id": "Or3Badge", "fill": "#FFEDD5", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or3BdgTx", "content": "Chờ lấy", "fill": "#EA580C", "fontFamily": "Poppins", "fontSize": 12}]}]}, + {"type": "frame", "id": "Or3Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [ + {"type": "icon_font", "id": "Or3Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"}, + {"type": "icon_font", "id": "Or3More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "OrdRow4", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + {"type": "text", "id": "Or4Code", "content": "#EK-0084", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110}, + {"type": "text", "id": "Or4Time", "content": "13:30", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90}, + {"type": "text", "id": "Or4Cust", "content": "App - Lê D", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150}, + {"type": "text", "id": "Or4Items", "content": "Bánh mì trứng x3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"}, + {"type": "text", "id": "Or4Total", "content": "90,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120}, + {"type": "frame", "id": "Or4Stat", "width": 140, "children": [{"type": "frame", "id": "Or4Badge", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or4BdgTx", "content": "Hoàn thành", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}, + {"type": "frame", "id": "Or4Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [ + {"type": "icon_font", "id": "Or4Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"}, + {"type": "icon_font", "id": "Or4More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "OrdRow5", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + {"type": "text", "id": "Or5Code", "content": "#EK-0083", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110}, + {"type": "text", "id": "Or5Time", "content": "12:45", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90}, + {"type": "text", "id": "Or5Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150}, + {"type": "text", "id": "Or5Items", "content": "Trà sữa oolong x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"}, + {"type": "text", "id": "Or5Total", "content": "70,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120}, + {"type": "frame", "id": "Or5Stat", "width": 140, "children": [{"type": "frame", "id": "Or5Badge", "fill": "#FEE2E2", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or5BdgTx", "content": "Đã hủy", "fill": "#DC2626", "fontFamily": "Poppins", "fontSize": 12}]}]}, + {"type": "frame", "id": "Or5Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [ + {"type": "icon_font", "id": "Or5Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"}, + {"type": "icon_font", "id": "Or5More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "PaginationOrd", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PagInfoOrd", "content": "Hiển thị 1-5 / 87 đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}, + { + "type": "frame", + "id": "PagCtrlOrd", + "layout": "horizontal", + "gap": 4, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PgPrevOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPvOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]}, + {"type": "frame", "id": "PgP1Ord", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1TxOrd", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "PgP2Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2TxOrd", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PgP3Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P3TxOrd", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PgElOrd", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ElTxOrd", "content": "...", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PgP18Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P18TxOrd", "content": "18", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PgNxtOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNxOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]} + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#FAF8F4"}, + "bg-surface": {"type": "color", "value": "#FFFFFF"}, + "bg-elevated": {"type": "color", "value": "#FFF8F0"}, + "bg-interactive": {"type": "color", "value": "#F5EDE4"}, + "brown-primary": {"type": "color", "value": "#6B4423"}, + "brown-dark": {"type": "color", "value": "#4A2E15"}, + "orange-primary": {"type": "color", "value": "#FF6B35"}, + "orange-light": {"type": "color", "value": "#FF8A5C"}, + "text-primary": {"type": "color", "value": "#2C2C2C"}, + "text-secondary": {"type": "color", "value": "#6B6B6B"}, + "text-tertiary": {"type": "color", "value": "#9B9B9B"}, + "border-default": {"type": "color", "value": "#E5DDD4"}, + "border-subtle": {"type": "color", "value": "#F0EAE2"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#F59E0B"}, + "error": {"type": "color", "value": "#EF4444"} + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/revenue-report.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/revenue-report.pen new file mode 100644 index 00000000..9870a3b1 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/revenue-report.pen @@ -0,0 +1,1762 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "RevenueScreen", + "x": 0, + "y": 0, + "name": "Admin/RevenueReport", + "reusable": true, + "clip": true, + "width": 1440, + "height": 1035, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "SidebarRev", + "name": "Sidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-surface", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$border-default" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "LogoAreaRev", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "LogoIconRev", + "width": 48, + "height": 48, + "fill": "#FFFFFF33", + "cornerRadius": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoTxRev", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "bold" + } + ] + }, + { + "type": "text", + "id": "BrandNameRev", + "fill": "#FFFFFF", + "content": "EggyMon Kitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + }, + { + "type": "text", + "id": "BrandSubRev", + "fill": "#FFFFFFB3", + "content": "Quản lý cửa hàng", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NavAreaRev", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [ + 16, + 12 + ], + "children": [ + { + "type": "text", + "id": "NvLblOvRev", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvDashRev", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcDshRev", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxDshRev", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NvLblStRev", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvOrdRev", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcOrdRev", + "width": 20, + "height": 20, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxOrdRev", + "fill": "$text-secondary", + "content": "Quản lý đơn hàng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvStfRev", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcStfRev", + "width": 20, + "height": 20, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxStfRev", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvSetRev", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcSetRev", + "width": 20, + "height": 20, + "iconFontName": "settings-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxSetRev", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NvLblBzRev", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvRptActive", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcRptAct", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "TxRptAct", + "fill": "#FFFFFF", + "content": "Báo cáo", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvLoyRev", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcLoyRev", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxLoyRev", + "fill": "$text-secondary", + "content": "Loyalty", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "UserAreaRev", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DividerRev", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "UserRowRev", + "width": "fill_container", + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AvatarRev", + "width": 40, + "height": 40, + "fill": "$orange-primary", + "cornerRadius": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvTxRev", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "UsrInfoRev", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "UsrNmRev", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "UsrRlRev", + "fill": "$text-secondary", + "content": "Store Manager", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContentRev", + "name": "Main Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "gap": 20, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "HeaderRev", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TitleRev", + "fill": "$text-primary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "HeaderActionsRev", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "DatePickerRev", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcCalRev", + "width": 18, + "height": 18, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DateTxRev", + "fill": "$text-primary", + "content": "01/01 - 31/01/2025", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ExportBtnRev", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcDlRev", + "width": 18, + "height": 18, + "iconFontName": "download", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ExportTxRev", + "fill": "$text-secondary", + "content": "Xuất báo cáo", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "StatsRowRev", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "RevStatTotal", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "RevLbl1", + "fill": "$text-secondary", + "content": "Tổng doanh thu tháng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "RevVal1", + "fill": "$text-primary", + "content": "127,500,000₫", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "RevBdg1", + "fill": "#DCFCE7", + "cornerRadius": 20, + "gap": 4, + "padding": [ + 4, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RevTrUp1", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "RevChg1", + "fill": "#16A34A", + "content": "+15.3% so với tháng trước", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RevStatOrders", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "RevLbl2", + "fill": "$text-secondary", + "content": "Tổng đơn hàng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "RevVal2", + "fill": "$text-primary", + "content": "2,450", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "RevBdg2", + "fill": "#DCFCE7", + "cornerRadius": 20, + "gap": 4, + "padding": [ + 4, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RevTrUp2", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "RevChg2", + "fill": "#16A34A", + "content": "+8.7% so với tháng trước", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RevStatAvg", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "padding": 20, + "children": [ + { + "type": "text", + "id": "RevLbl3", + "fill": "$text-secondary", + "content": "Trung bình/ngày", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "RevVal3", + "fill": "$text-primary", + "content": "4,250,000₫", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "RevBdg3", + "fill": "#DCFCE7", + "cornerRadius": 20, + "gap": 4, + "padding": [ + 4, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RevTrUp3", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#16A34A" + }, + { + "type": "text", + "id": "RevChg3", + "fill": "#16A34A", + "content": "+12.1% so với tháng trước", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChartCardRev", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 16, + "padding": 24, + "children": [ + { + "type": "frame", + "id": "ChartHeaderRev", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ChartTitleRev", + "fill": "$text-primary", + "content": "Doanh thu theo ngày", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PeriodTabs", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": 2, + "children": [ + { + "type": "frame", + "id": "Tab7Days", + "fill": "$bg-surface", + "cornerRadius": 6, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "Tab7Tx", + "fill": "$text-primary", + "content": "7 ngày", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Tab30Days", + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "Tab30Tx", + "fill": "$text-secondary", + "content": "30 ngày", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Tab3Months", + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "Tab3MTx", + "fill": "$text-secondary", + "content": "3 tháng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChartBarsRev", + "width": "fill_container", + "height": 200, + "gap": 16, + "padding": [ + 10, + 20 + ], + "justifyContent": "center", + "alignItems": "end", + "children": [ + { + "type": "frame", + "id": "BarColT2", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT2", + "width": 60, + "height": 140, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT2", + "fill": "$text-secondary", + "content": "T2", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColT3", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT3", + "width": 60, + "height": 110, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT3", + "fill": "$text-secondary", + "content": "T3", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColT4", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT4", + "width": 60, + "height": 160, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT4", + "fill": "$text-secondary", + "content": "T4", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColT5", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT5", + "width": 60, + "height": 130, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT5", + "fill": "$text-secondary", + "content": "T5", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColT6", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT6", + "width": 60, + "height": 175, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT6", + "fill": "$text-secondary", + "content": "T6", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColT7", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectT7", + "width": 60, + "height": 190, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblT7", + "fill": "$text-secondary", + "content": "T7", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BarColCN", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BarRectCN", + "width": 60, + "height": 95, + "cornerRadius": [ + 6, + 6, + 0, + 0 + ] + }, + { + "type": "text", + "id": "BarLblCN", + "fill": "$text-secondary", + "content": "CN", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "BottomRowRev", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "TopProductsCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 12, + "padding": 24, + "children": [ + { + "type": "text", + "id": "TopProdTitle", + "fill": "$text-primary", + "content": "Top 10 món bán chạy", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "TopTblHeader", + "width": "fill_container", + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TpThRank", + "fill": "$text-secondary", + "content": "#", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TpThName", + "fill": "$text-secondary", + "content": "Tên món", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TpThQty", + "fill": "$text-secondary", + "content": "SL bán", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TpThRevenue", + "fill": "$text-secondary", + "content": "Doanh thu", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TpRow1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rk1Fr", + "width": 28, + "height": 28, + "fill": "$orange-primary", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rk1Tx", + "fill": "#FFFFFF", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tp1Name", + "fill": "$text-primary", + "content": "Combo bánh mì đặc biệt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp1Qty", + "fill": "$text-secondary", + "content": "342", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp1Rev", + "fill": "$text-primary", + "content": "51,300,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TpRow2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rk2Fr", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rk2Tx", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tp2Name", + "fill": "$text-primary", + "content": "Trà sữa oolong", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp2Qty", + "fill": "$text-secondary", + "content": "298", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp2Rev", + "fill": "$text-primary", + "content": "11,920,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TpRow3", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rk3Fr", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rk3Tx", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tp3Name", + "fill": "$text-primary", + "content": "Cơm trưa đặc biệt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp3Qty", + "fill": "$text-secondary", + "content": "256", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp3Rev", + "fill": "$text-primary", + "content": "14,080,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TpRow4", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rk4Fr", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rk4Tx", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tp4Name", + "fill": "$text-primary", + "content": "Omelette phô mai", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp4Qty", + "fill": "$text-secondary", + "content": "234", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp4Rev", + "fill": "$text-primary", + "content": "14,040,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TpRow5", + "width": "fill_container", + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rk5Fr", + "width": 28, + "height": 28, + "fill": "$bg-elevated", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Rk5Tx", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tp5Name", + "fill": "$text-primary", + "content": "Bánh mì trứng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp5Qty", + "fill": "$text-secondary", + "content": "198", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Tp5Rev", + "fill": "$text-primary", + "content": "5,940,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CategoryCard", + "width": 380, + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 20, + "padding": 24, + "children": [ + { + "type": "text", + "id": "CatTitle", + "fill": "$text-primary", + "content": "Phân loại danh mục", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CatCircles", + "width": "fill_container", + "gap": 12, + "padding": [ + 16, + 0 + ], + "justifyContent": "center", + "alignItems": "end", + "children": [ + { + "type": "frame", + "id": "CircleDrink", + "width": 100, + "height": 100, + "fill": "$orange-primary", + "cornerRadius": 50, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CirDrinkTx", + "fill": "#FFFFFF", + "content": "45%", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "CircleMain", + "width": 84, + "height": 84, + "fill": "$brown-primary", + "cornerRadius": 42, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CirMainTx", + "fill": "#FFFFFF", + "content": "30%", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "CircleSnack", + "width": 68, + "height": 68, + "fill": "$orange-light", + "cornerRadius": 34, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CirSnkTx", + "fill": "#FFFFFF", + "content": "15%", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "CircleCombo", + "width": 52, + "height": 52, + "fill": "$bg-interactive", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CirCmbTx", + "fill": "$text-primary", + "content": "10%", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "bold" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CatLegend", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "Leg1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Dot1", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + }, + { + "type": "text", + "id": "Leg1Nm", + "fill": "$text-primary", + "content": "Đồ uống", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Leg1Vl", + "fill": "$text-secondary", + "content": "57,375,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Leg2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Dot2", + "width": 12, + "height": 12, + "fill": "$brown-primary", + "cornerRadius": 6 + }, + { + "type": "text", + "id": "Leg2Nm", + "fill": "$text-primary", + "content": "Món chính", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Leg2Vl", + "fill": "$text-secondary", + "content": "38,250,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Leg3", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Dot3", + "width": 12, + "height": 12, + "fill": "$orange-light", + "cornerRadius": 6 + }, + { + "type": "text", + "id": "Leg3Nm", + "fill": "$text-primary", + "content": "Ăn vặt", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Leg3Vl", + "fill": "$text-secondary", + "content": "19,125,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Leg4", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Dot4", + "width": 12, + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6 + }, + { + "type": "text", + "id": "Leg4Nm", + "fill": "$text-primary", + "content": "Combo", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Leg4Vl", + "fill": "$text-secondary", + "content": "12,750,000₫", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/staff-management.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/staff-management.pen new file mode 100644 index 00000000..091c2363 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/staff-management.pen @@ -0,0 +1,506 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffScreen", + "name": "Admin/StaffManagement", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SidebarStaff", + "name": "Sidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}}, + "children": [ + { + "type": "frame", + "id": "LogoAreaStaff", + "name": "Logo Area", + "width": "fill_container", + "fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]}, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "LogoIconStaff", + "width": 48, + "height": 48, + "cornerRadius": 24, + "fill": "#FFFFFF33", + "layout": "horizontal", + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "text", "id": "LogoTextStaff", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"} + ] + }, + {"type": "text", "id": "BrandNameStaff", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}, + {"type": "text", "id": "BrandSubStaff", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11} + ] + }, + { + "type": "frame", + "id": "NavAreaStaff", + "name": "Navigation", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 12], + "gap": 4, + "children": [ + {"type": "text", "id": "NavLblOverviewSt", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]}, + { + "type": "frame", + "id": "NavDashSt", + "width": "fill_container", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcDashSt", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"}, + {"type": "text", "id": "TxDashSt", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + }, + {"type": "text", "id": "NavLblStoreSt", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]}, + { + "type": "frame", + "id": "NavOrdersSt", + "width": "fill_container", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcOrdersSt", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "$text-secondary"}, + {"type": "text", "id": "TxOrdersSt", "content": "Quản lý đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "NavStaffActive", + "name": "Nav Staff Active", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcStaffSt", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "#FFFFFF"}, + {"type": "text", "id": "TxStaffSt", "content": "Nhân sự", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "NavSettingsSt", + "width": "fill_container", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcSettingsSt", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"}, + {"type": "text", "id": "TxSettingsSt", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + }, + {"type": "text", "id": "NavLblBizSt", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]}, + { + "type": "frame", + "id": "NavReportSt", + "width": "fill_container", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcReportSt", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"}, + {"type": "text", "id": "TxReportSt", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + }, + { + "type": "frame", + "id": "NavLoyaltySt", + "width": "fill_container", + "cornerRadius": 10, + "padding": [12, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcLoyaltySt", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"}, + {"type": "text", "id": "TxLoyaltySt", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"} + ] + } + ] + }, + { + "type": "frame", + "id": "UserAreaStaff", + "width": "fill_container", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "DividerStaff", "width": "fill_container", "height": 1, "fill": "$border-default"}, + { + "type": "frame", + "id": "UserRowStaff", + "width": "fill_container", + "padding": [16, 20], + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AvatarStaff", + "width": 40, + "height": 40, + "cornerRadius": 20, + "fill": "$orange-primary", + "layout": "horizontal", + "justifyContent": "center", + "alignItems": "center", + "children": [{"type": "text", "id": "AvTextStaff", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}] + }, + { + "type": "frame", + "id": "UserInfoStaff", + "layout": "vertical", + "gap": 2, + "children": [ + {"type": "text", "id": "UserNameStaff", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "UserRoleStaff", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12} + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContentStaff", + "name": "Main Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "padding": 32, + "gap": 24, + "children": [ + { + "type": "frame", + "id": "HeaderStaff", + "width": "fill_container", + "layout": "horizontal", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "TitleStaff", "content": "Quản lý nhân sự", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"}, + { + "type": "frame", + "id": "AddStaffBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [10, 20], + "layout": "horizontal", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcPlusStaff", "iconFontFamily": "lucide", "iconFontName": "plus", "width": 18, "height": 18, "fill": "#FFFFFF"}, + {"type": "text", "id": "BtnTextStaff", "content": "Thêm nhân viên", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "FilterBarStaff", + "width": "fill_container", + "layout": "horizontal", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SearchStaff", + "width": 300, + "height": 42, + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, + "padding": [0, 16], + "layout": "horizontal", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "IcSearchStaff", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"}, + {"type": "text", "id": "SearchPlcStaff", "content": "Tìm kiếm nhân viên...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + { + "type": "frame", + "id": "FilterPosition", + "width": 160, + "height": 42, + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, + "padding": [0, 16], + "layout": "horizontal", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "FilterPosText", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14}, + {"type": "icon_font", "id": "IcChevPos", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "FilterStatus", + "width": 160, + "height": 42, + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, + "padding": [0, 16], + "layout": "horizontal", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "FilterStatText", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14}, + {"type": "icon_font", "id": "IcChevStat", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"} + ] + } + ] + }, + { + "type": "frame", + "id": "StaffTableCard", + "name": "Staff Table", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "StaffTableHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": [14, 14, 0, 0], + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "children": [ + {"type": "text", "id": "StThEmployee", "content": "Nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 220}, + {"type": "text", "id": "StThPosition", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150}, + {"type": "text", "id": "StThPhone", "content": "SĐT", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150}, + {"type": "text", "id": "StThShift", "content": "Ca làm", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 180}, + {"type": "text", "id": "StThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"} + ] + }, + { + "type": "frame", + "id": "StRow1", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + { + "type": "frame", + "id": "StEmp1Cell", + "width": 220, + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StAv1", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv1Tx", "content": "NT", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]}, + {"type": "text", "id": "StName1", "content": "Nguyễn Thu", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + {"type": "text", "id": "StPos1", "content": "Pha chế", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StPhone1", "content": "0912 345 678", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StShift1", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180}, + {"type": "frame", "id": "StStat1", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge1", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx1", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]} + ] + }, + { + "type": "frame", + "id": "StRow2", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + { + "type": "frame", + "id": "StEmp2Cell", + "width": 220, + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StAv2", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#D4E0ED", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv2Tx", "content": "LH", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]}, + {"type": "text", "id": "StName2", "content": "Lê Hoàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + {"type": "text", "id": "StPos2", "content": "Thu ngân", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StPhone2", "content": "0903 456 789", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StShift2", "content": "Chiều (14-21h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180}, + {"type": "frame", "id": "StStat2", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge2", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx2", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]} + ] + }, + { + "type": "frame", + "id": "StRow3", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + { + "type": "frame", + "id": "StEmp3Cell", + "width": 220, + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StAv3", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#FEF3C7", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv3Tx", "content": "PL", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]}, + {"type": "text", "id": "StName3", "content": "Phạm Linh", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + {"type": "text", "id": "StPos3", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StPhone3", "content": "0987 654 321", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StShift3", "content": "Tối (17-23h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180}, + {"type": "frame", "id": "StStat3", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge3", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx3", "content": "Nghỉ phép", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]} + ] + }, + { + "type": "frame", + "id": "StRow4", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + { + "type": "frame", + "id": "StEmp4Cell", + "width": 220, + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StAv4", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv4Tx", "content": "TK", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]}, + {"type": "text", "id": "StName4", "content": "Trần Kiên", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + {"type": "text", "id": "StPos4", "content": "Bếp trưởng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StPhone4", "content": "0934 567 890", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StShift4", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180}, + {"type": "frame", "id": "StStat4", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge4", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx4", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]} + ] + }, + { + "type": "frame", + "id": "StRow5", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "alignItems": "center", + "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}}, + "children": [ + { + "type": "frame", + "id": "StEmp5Cell", + "width": 220, + "layout": "horizontal", + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StAv5", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#DBEAFE", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv5Tx", "content": "NN", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]}, + {"type": "text", "id": "StName5", "content": "Ngô Ngọc", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14} + ] + }, + {"type": "text", "id": "StPos5", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StPhone5", "content": "0967 890 123", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150}, + {"type": "text", "id": "StShift5", "content": "Toàn thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180}, + {"type": "frame", "id": "StStat5", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge5", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx5", "content": "Thử việc", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]} + ] + }, + { + "type": "frame", + "id": "PaginationStaff", + "width": "fill_container", + "padding": [14, 20], + "layout": "horizontal", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "PagInfoStaff", "content": "Hiển thị 1-5 / 12 nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}, + { + "type": "frame", + "id": "PagCtrlStaff", + "layout": "horizontal", + "gap": 4, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PagPrevSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPrevSt", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]}, + {"type": "frame", "id": "PagPage1St", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg1TxSt", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "PagPage2St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg2TxSt", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PagPage3St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg3TxSt", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}, + {"type": "frame", "id": "PagNextSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNextSt", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]} + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#FAF8F4"}, + "bg-surface": {"type": "color", "value": "#FFFFFF"}, + "bg-elevated": {"type": "color", "value": "#FFF8F0"}, + "bg-interactive": {"type": "color", "value": "#F5EDE4"}, + "brown-primary": {"type": "color", "value": "#6B4423"}, + "brown-dark": {"type": "color", "value": "#4A2E15"}, + "orange-primary": {"type": "color", "value": "#FF6B35"}, + "orange-light": {"type": "color", "value": "#FF8A5C"}, + "text-primary": {"type": "color", "value": "#2C2C2C"}, + "text-secondary": {"type": "color", "value": "#6B6B6B"}, + "text-tertiary": {"type": "color", "value": "#9B9B9B"}, + "border-default": {"type": "color", "value": "#E5DDD4"}, + "border-subtle": {"type": "color", "value": "#F0EAE2"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#F59E0B"}, + "error": {"type": "color", "value": "#EF4444"} + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/store-settings.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/store-settings.pen new file mode 100644 index 00000000..eac8e951 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/admin/store-settings.pen @@ -0,0 +1,2002 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "SettingsScreen", + "x": 0, + "y": 0, + "name": "Admin/StoreSettings", + "reusable": true, + "clip": true, + "width": 1440, + "height": 1192, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "SidebarSettings", + "name": "Sidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-surface", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$border-default" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "LogoAreaSet", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "LogoIconSet", + "width": 48, + "height": 48, + "fill": "#FFFFFF33", + "cornerRadius": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoTxSet", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "bold" + } + ] + }, + { + "type": "text", + "id": "BrandNameSet", + "fill": "#FFFFFF", + "content": "EggyMon Kitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + }, + { + "type": "text", + "id": "BrandSubSet", + "fill": "#FFFFFFB3", + "content": "Quản lý cửa hàng", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NavAreaSet", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [ + 16, + 12 + ], + "children": [ + { + "type": "text", + "id": "NvLblOvSet", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvDashSet", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcDshSet", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxDshSet", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NvLblStSet", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvOrdSet", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcOrdSet", + "width": 20, + "height": 20, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxOrdSet", + "fill": "$text-secondary", + "content": "Quản lý đơn hàng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvStfSet", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcStfSet", + "width": 20, + "height": 20, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxStfSet", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvSetActive", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcSetAct", + "width": 20, + "height": 20, + "iconFontName": "settings-2", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "TxSetAct", + "fill": "#FFFFFF", + "content": "Cài đặt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NvLblBzSet", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "NvRptSet", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcRptSet", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxRptSet", + "fill": "$text-secondary", + "content": "Báo cáo", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NvLoySet", + "width": "fill_container", + "cornerRadius": 10, + "gap": 12, + "padding": [ + 12, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcLoySet", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TxLoySet", + "fill": "$text-secondary", + "content": "Loyalty", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "UserAreaSet", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DividerSet", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "UserRowSet", + "width": "fill_container", + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AvatarSet", + "width": 40, + "height": 40, + "fill": "$orange-primary", + "cornerRadius": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvTxSet", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "bold" + } + ] + }, + { + "type": "frame", + "id": "UsrInfoSet", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "UsrNmSet", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "UsrRlSet", + "fill": "$text-secondary", + "content": "Store Manager", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContentSet", + "name": "Main Content", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "HeaderSet", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TitleSet", + "fill": "$text-primary", + "content": "Cài đặt cửa hàng", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "bold" + }, + { + "type": "frame", + "id": "SaveBtnSet", + "fill": "$orange-primary", + "cornerRadius": 10, + "gap": 8, + "padding": [ + 10, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcSaveSet", + "width": 18, + "height": 18, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SaveTxSet", + "fill": "#FFFFFF", + "content": "Lưu thay đổi", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TwoColLayout", + "width": "fill_container", + "height": "fill_container", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "LeftColSet", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "StoreInfoCard", + "name": "Store Info", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 20, + "padding": 24, + "children": [ + { + "type": "text", + "id": "InfoTitle", + "fill": "$text-primary", + "content": "Thông tin cửa hàng", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "InputName", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblName", + "fill": "$text-secondary", + "content": "Tên cửa hàng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldName", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValName", + "fill": "$text-primary", + "content": "EggyMon Kitchen - Chi nhánh 1", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "InputAddr", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblAddr", + "fill": "$text-secondary", + "content": "Địa chỉ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldAddr", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValAddr", + "fill": "$text-primary", + "content": "123 Nguyễn Huệ, Q.1, TP.HCM", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "InputRowPhEmail", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "InputPhone", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblPhone", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldPhone", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValPhone", + "fill": "$text-primary", + "content": "0912 345 678", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "InputEmail", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblEmail", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldEmail", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValEmail", + "fill": "$text-primary", + "content": "chinhanh1@eggymon.vn", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "HoursCard", + "name": "Opening Hours", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 16, + "padding": 24, + "children": [ + { + "type": "text", + "id": "HoursTitle", + "fill": "$text-primary", + "content": "Giờ hoạt động", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "DayMon", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblMon", + "fill": "$text-primary", + "content": "Thứ 2", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeMon", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartMon", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsMonVal", + "fill": "$text-primary", + "content": "07:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepMon", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndMon", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeMonVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleMon", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotMon", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DayTue", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblTue", + "fill": "$text-primary", + "content": "Thứ 3", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeTue", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartTue", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsTueVal", + "fill": "$text-primary", + "content": "07:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepTue", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndTue", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeTueVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleTue", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotTue", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DayWed", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblWed", + "fill": "$text-primary", + "content": "Thứ 4", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeWed", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartWed", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsWedVal", + "fill": "$text-primary", + "content": "07:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepWed", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndWed", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeWedVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleWed", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotWed", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DayThu", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblThu", + "fill": "$text-primary", + "content": "Thứ 5", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeThu", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartThu", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsThuVal", + "fill": "$text-primary", + "content": "07:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepThu", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndThu", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeThuVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleThu", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotThu", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DayFri", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblFri", + "fill": "$text-primary", + "content": "Thứ 6", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeFri", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartFri", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsFriVal", + "fill": "$text-primary", + "content": "07:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepFri", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndFri", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeFriVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleFri", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotFri", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DaySat", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblSat", + "fill": "$text-primary", + "content": "Thứ 7", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeSat", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartSat", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsSatVal", + "fill": "$text-primary", + "content": "08:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepSat", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndSat", + "width": 80, + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeSatVal", + "fill": "$text-primary", + "content": "22:00", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleSat", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotSat", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DaySun", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DayLblSun", + "fill": "$text-tertiary", + "content": "Chủ nhật", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TimeSun", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TmStartSun", + "width": 80, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TsSunVal", + "fill": "$text-tertiary", + "content": "--:--", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "TmSepSun", + "fill": "$text-tertiary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "TmEndSun", + "width": 80, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TeSunVal", + "fill": "$text-tertiary", + "content": "--:--", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToggleSun", + "width": 44, + "height": 24, + "fill": "$border-default", + "cornerRadius": 12, + "padding": [ + 0, + 2 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TogDotSun", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RightColSet", + "width": 380, + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "StoreImageArea", + "width": "fill_container", + "height": 200, + "fill": "$bg-interactive", + "cornerRadius": 14, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcImgUpload", + "width": 48, + "height": 48, + "iconFontName": "image", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "UploadText", + "fill": "$text-tertiary", + "content": "Tải ảnh cửa hàng", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "UploadHint", + "fill": "$text-tertiary", + "content": "PNG, JPG (tối đa 5MB)", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SocialCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 16, + "padding": 24, + "children": [ + { + "type": "text", + "id": "SocialTitle", + "fill": "$text-primary", + "content": "Mạng xã hội", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "InputFb", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblFb", + "fill": "$text-secondary", + "content": "Facebook", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldFb", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValFb", + "fill": "$text-tertiary", + "content": "facebook.com/eggymonkitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "InputIg", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblIg", + "fill": "$text-secondary", + "content": "Instagram", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldIg", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValIg", + "fill": "$text-tertiary", + "content": "@eggymonkitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "InputTk", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblTk", + "fill": "$text-secondary", + "content": "TikTok", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldTk", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValTk", + "fill": "$text-tertiary", + "content": "@eggymonkitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TaxPayCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 14, + "layout": "vertical", + "gap": 16, + "padding": 24, + "children": [ + { + "type": "text", + "id": "TaxTitle", + "fill": "$text-primary", + "content": "Thuế & Thanh toán", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "InputTax", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "LblTax", + "fill": "$text-secondary", + "content": "Thuế suất", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "FldTax", + "width": "fill_container", + "height": 42, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ValTax", + "fill": "$text-primary", + "content": "10%", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "LblPayMethod", + "fill": "$text-secondary", + "content": "Phương thức thanh toán", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "CheckboxGroup", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "CbCash", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CbCashBox", + "width": 20, + "height": 20, + "fill": "$orange-primary", + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcCbCash", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "text", + "id": "CbCashTx", + "fill": "$text-primary", + "content": "Tiền mặt", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CbTransfer", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CbTransBox", + "width": 20, + "height": 20, + "fill": "$orange-primary", + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcCbTrans", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "text", + "id": "CbTransTx", + "fill": "$text-primary", + "content": "Chuyển khoản", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CbEwallet", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CbEwalBox", + "width": 20, + "height": 20, + "fill": "$orange-primary", + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IcCbEwal", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "text", + "id": "CbEwalTx", + "fill": "$text-primary", + "content": "Ví điện tử (MoMo, ZaloPay)", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CbCard", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CbCardBox", + "width": 20, + "height": 20, + "cornerRadius": 4, + "stroke": { + "align": "inside", + "thickness": 1.5, + "fill": "$border-default" + } + }, + { + "type": "text", + "id": "CbCardTx", + "fill": "$text-primary", + "content": "Thẻ tín dụng/ghi nợ", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/forgot-password.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/forgot-password.pen new file mode 100644 index 00000000..05174385 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/forgot-password.pen @@ -0,0 +1,259 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "ForgotScreen", + "x": 0, + "y": 0, + "name": "Auth/ForgotPassword", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "gap": 32, + "padding": [ + 56, + 24, + 32, + 24 + ], + "children": [ + { + "type": "frame", + "id": "ForgotTopBar", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ForgotBackBtn", + "width": 40, + "height": 40, + "fill": "$bg-elevated", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ForgotBackIcon", + "width": 20, + "height": 20, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ForgotContent", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 0, + 32 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ForgotIconWrap", + "width": 80, + "height": 80, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "padding": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ForgotKeyIcon", + "width": 40, + "height": 40, + "iconFontName": "key", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "text", + "id": "ForgotTitle", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Quên mật khẩu?", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ForgotSubtitle", + "fill": "$text-secondary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Nhập email hoặc số điện thoại để nhận mã xác nhận", + "lineHeight": 1.4, + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "ForgotForm", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "ForgotEmailField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ForgotEmailIcon", + "width": 20, + "height": 20, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ForgotEmailPlaceholder", + "fill": "$text-tertiary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Poppins", + "fontSize": 15 + } + ] + }, + { + "type": "frame", + "id": "ForgotButton", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ForgotButtonText", + "fill": "#FFFFFF", + "content": "Gửi mã xác nhận", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ForgotSpacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "text", + "id": "ForgotFooterLink", + "fill": "$orange-primary", + "content": "Quay lại đăng nhập", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/login.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/login.pen new file mode 100644 index 00000000..08335fa4 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/login.pen @@ -0,0 +1,429 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "LoginScreen", + "x": 0, + "y": 0, + "name": "Auth/Login", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": [ + 56, + 24, + 32, + 24 + ], + "children": [ + { + "type": "frame", + "id": "LoginHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LoginLogo", + "width": 64, + "height": 64, + "fill": "$brown-primary", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LoginLogoText", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LoginTitle", + "fill": "$text-primary", + "content": "Chào mừng trở lại!", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LoginSubtitle", + "fill": "$text-secondary", + "content": "Đăng nhập vào EggyMon Kitchen", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "LoginForm", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "LoginEmailField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LoginEmailIcon", + "width": 20, + "height": 20, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LoginEmailPlaceholder", + "fill": "$text-tertiary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Poppins", + "fontSize": 15 + } + ] + }, + { + "type": "frame", + "id": "LoginPasswordField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LoginPasswordIcon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LoginPasswordPlaceholder", + "fill": "$text-tertiary", + "content": "Mật khẩu", + "fontFamily": "Poppins", + "fontSize": 15 + }, + { + "type": "icon_font", + "id": "LoginPasswordEye", + "width": 20, + "height": 20, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "LoginForgotLink", + "fill": "$orange-primary", + "content": "Quên mật khẩu?", + "textAlign": "right", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LoginActions", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "LoginButton", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LoginButtonText", + "fill": "#FFFFFF", + "content": "Đăng nhập", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "LoginDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LoginDividerLeft", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "id": "LoginDividerText", + "fill": "$text-tertiary", + "content": "hoặc", + "fontFamily": "Poppins", + "fontSize": 13 + }, + { + "type": "frame", + "id": "LoginDividerRight", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "id": "LoginSocialRow", + "width": "fill_container", + "gap": 16, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "LoginGoogleBtn", + "width": 52, + "height": 52, + "fill": "#FFFFFF", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kUZ2H", + "name": "googleG", + "fill": "#EA4335", + "content": "G", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "LoginFacebookBtn", + "width": 52, + "height": 52, + "fill": "#FFFFFF", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Ul8Tr", + "name": "facebookIcon", + "width": 22, + "height": 22, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "#1877F2" + } + ] + }, + { + "type": "frame", + "id": "LoginAppleBtn", + "width": 52, + "height": 52, + "fill": "#FFFFFF", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "d2CMB", + "name": "appleIcon", + "width": 22, + "height": 22, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginSpacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "LoginFooter", + "gap": 4, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "LoginFooterText", + "fill": "$text-secondary", + "content": "Chưa có tài khoản?", + "fontFamily": "Poppins", + "fontSize": 14 + }, + { + "type": "text", + "id": "LoginFooterLink", + "fill": "$orange-primary", + "content": "Đăng ký ngay", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/otp-verify.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/otp-verify.pen new file mode 100644 index 00000000..77edbd1a --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/otp-verify.pen @@ -0,0 +1,357 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "OtpScreen", + "x": 0, + "y": 0, + "name": "Auth/OtpVerify", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": [ + 56, + 24, + 32, + 24 + ], + "children": [ + { + "type": "frame", + "id": "OtpTopBar", + "width": "fill_container", + "padding": [ + 0, + 0, + 16, + 0 + ], + "children": [ + { + "type": "frame", + "id": "OtpBackBtn", + "width": 40, + "height": 40, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "#000000" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "OtpBackIcon", + "width": 20, + "height": 20, + "iconFontName": "chevron-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "OtpContent", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OtpIconWrap", + "width": 80, + "height": 80, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "OtpShieldIcon", + "width": 40, + "height": 40, + "iconFontName": "shield-check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "text", + "id": "OtpTitle", + "fill": "$text-primary", + "content": "Nhập mã xác nhận", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "OtpSubtitle", + "fill": "$text-secondary", + "content": "Mã OTP đã được gửi đến 0912***456", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "OtpInputRow", + "width": "fill_container", + "gap": 12, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "OtpBox1", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OtpDigit1", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OtpBox2", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OtpDigit2", + "fill": "$text-primary", + "content": "7", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OtpBox3", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OtpDigit3", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OtpBox4", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1.5, + "fill": "#000000" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center" + }, + { + "type": "frame", + "id": "OtpBox5", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1.5, + "fill": "#000000" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center" + }, + { + "type": "frame", + "id": "OtpBox6", + "width": 52, + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1.5, + "fill": "#000000" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center" + } + ] + }, + { + "type": "text", + "id": "OtpTimer", + "fill": "$text-secondary", + "content": "Gửi lại mã sau 00:45", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 13 + }, + { + "type": "frame", + "id": "OtpButton", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OtpButtonText", + "fill": "#FFFFFF", + "content": "Xác nhận", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "OtpResendLink", + "fill": "$orange-primary", + "content": "Gửi lại mã OTP", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "OtpSpacer", + "width": 1, + "height": "fill_container" + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/pin-entry.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/pin-entry.pen new file mode 100644 index 00000000..5da7ab00 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/pin-entry.pen @@ -0,0 +1,562 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "PinScreen", + "x": 0, + "y": 0, + "name": "Auth/PinEntry", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "gap": 32, + "padding": [ + 56, + 24, + 32, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PinHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PinLogo", + "width": 64, + "height": 64, + "fill": "$brown-primary", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PinLogoText", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PinTitle", + "fill": "$text-primary", + "content": "Nhập mã PIN", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PinSubtitle", + "fill": "$text-secondary", + "content": "Nhập mã PIN 6 số để truy cập", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "PinDotsRow", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PinDot1", + "width": 16, + "height": 16, + "fill": "$orange-primary", + "cornerRadius": 8 + }, + { + "type": "frame", + "id": "PinDot2", + "width": 16, + "height": 16, + "fill": "$orange-primary", + "cornerRadius": 8 + }, + { + "type": "frame", + "id": "PinDot3", + "width": 16, + "height": 16, + "fill": "$orange-primary", + "cornerRadius": 8 + }, + { + "type": "frame", + "id": "PinDot4", + "width": 16, + "height": 16, + "fill": "$border-default", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "frame", + "id": "PinDot5", + "width": 16, + "height": 16, + "fill": "$border-default", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "frame", + "id": "PinDot6", + "width": 16, + "height": 16, + "fill": "$border-default", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 2, + "fill": "$border-default" + } + } + ] + }, + { + "type": "frame", + "id": "PinSpacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "PinNumpad", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PinRow1", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PinKey1", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "3UVCU", + "name": "num1", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey2", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "q1PUd", + "name": "num2", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey3", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Fq93Z", + "name": "num3", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PinRow2", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PinKey4", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GUYyP", + "name": "num4", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey5", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ryXMU", + "name": "num5", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey6", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KEWRy", + "name": "num6", + "fill": "$text-primary", + "content": "6", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PinRow3", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PinKey7", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dyDQH", + "name": "num7", + "fill": "$text-primary", + "content": "7", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey8", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Kzfef", + "name": "num8", + "fill": "$text-primary", + "content": "8", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKey9", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "bXeXd", + "name": "num9", + "fill": "$text-primary", + "content": "9", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PinRow4", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PinKeyDelete", + "width": 72, + "height": 72, + "fill": "$bg-interactive", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xjJtr", + "name": "delIcon", + "width": 24, + "height": 24, + "iconFontName": "delete", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "PinKey0", + "width": 72, + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ra3cU", + "name": "num0", + "fill": "$text-primary", + "content": "0", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PinKeyEnter", + "width": 72, + "height": 72, + "fill": "$orange-primary", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "hzhLh", + "name": "enterIcon", + "width": 24, + "height": 24, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PinFooter", + "gap": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PinSwitchUser", + "fill": "$orange-primary", + "content": "Đổi người dùng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PinFooterDivider", + "width": 1, + "height": 16, + "fill": "$border-default" + }, + { + "type": "text", + "id": "PinForgotPin", + "fill": "$orange-primary", + "content": "Quên PIN?", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/register.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/register.pen new file mode 100644 index 00000000..2307da3b --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/auth/register.pen @@ -0,0 +1,415 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "RegisterScreen", + "x": 0, + "y": 0, + "name": "Auth/Register", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "gap": 20, + "padding": [ + 48, + 24, + 32, + 24 + ], + "children": [ + { + "type": "frame", + "id": "RegisterHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RegisterLogo", + "width": 64, + "height": 64, + "fill": "$brown-primary", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RegisterLogoText", + "fill": "#FFFFFF", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "RegisterTitle", + "fill": "$text-primary", + "content": "Tạo tài khoản", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 26, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RegisterSubtitle", + "fill": "$text-secondary", + "content": "Đăng ký để nhận ưu đãi đặc biệt", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "RegisterForm", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "RegisterNameField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RegisterNameIcon", + "width": 20, + "height": 20, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RegisterNamePlaceholder", + "fill": "$text-tertiary", + "content": "Họ và tên", + "fontFamily": "Poppins", + "fontSize": 15 + } + ] + }, + { + "type": "frame", + "id": "RegisterEmailField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RegisterEmailIcon", + "width": 20, + "height": 20, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RegisterEmailPlaceholder", + "fill": "$text-tertiary", + "content": "Email", + "fontFamily": "Poppins", + "fontSize": 15 + } + ] + }, + { + "type": "frame", + "id": "RegisterPhoneField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RegisterPhoneIcon", + "width": 20, + "height": 20, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RegisterPhonePlaceholder", + "fill": "$text-tertiary", + "content": "Số điện thoại", + "fontFamily": "Poppins", + "fontSize": 15 + } + ] + }, + { + "type": "frame", + "id": "RegisterPasswordField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 8, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RegisterPasswordIcon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RegisterPasswordPlaceholder", + "fill": "$text-tertiary", + "content": "Mật khẩu", + "fontFamily": "Poppins", + "fontSize": 15 + }, + { + "type": "icon_font", + "id": "RegisterPasswordEye", + "width": 20, + "height": 20, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "RegisterConfirmField", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 8, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RegisterConfirmIcon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RegisterConfirmPlaceholder", + "fill": "$text-tertiary", + "content": "Xác nhận mật khẩu", + "fontFamily": "Poppins", + "fontSize": 15 + }, + { + "type": "icon_font", + "id": "RegisterConfirmEye", + "width": 20, + "height": 20, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RegisterTermsRow", + "width": "fill_container", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RegisterCheckbox", + "width": 22, + "height": 22, + "fill": "$bg-elevated", + "cornerRadius": 4, + "stroke": { + "thickness": 1.5, + "fill": "$text-tertiary" + } + }, + { + "type": "text", + "id": "RegisterTermsText", + "fill": "$text-secondary", + "content": "Tôi đồng ý với Điều khoản sử dụng", + "fontFamily": "Poppins", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RegisterButton", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RegisterButtonText", + "fill": "#FFFFFF", + "content": "Đăng ký", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "RegisterSpacer", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "RegisterFooter", + "gap": 4, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "RegisterFooterText", + "fill": "$text-secondary", + "content": "Đã có tài khoản?", + "fontFamily": "Poppins", + "fontSize": 14 + }, + { + "type": "text", + "id": "RegisterFooterLink", + "fill": "$orange-primary", + "content": "Đăng nhập", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/membership-card.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/membership-card.pen new file mode 100644 index 00000000..2bbb1938 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/membership-card.pen @@ -0,0 +1,940 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "MembershipCardScreen", + "x": 0, + "y": 0, + "name": "Screen/MembershipCard", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "MemberCardTopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MemberCardBackIcon", + "name": "BackIcon", + "width": 24, + "height": 24, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "MemberCardTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Thẻ thành viên", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "MemberCardSettingsIcon", + "name": "SettingsIcon", + "width": 24, + "height": 24, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "MemberCardContent", + "name": "Content", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MembershipCardFrame", + "name": "MembershipCard", + "width": "fill_container", + "height": 190, + "fill": "$brown-primary", + "cornerRadius": 20, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000020", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 16, + "spread": -2 + }, + "layout": "vertical", + "gap": 14, + "padding": [ + 22, + 20 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "CardTopRow", + "name": "CardTopRow", + "width": "fill_container", + "gap": 12, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CardLogoRow", + "name": "LogoRow", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CardLogo", + "name": "Logo", + "width": 36, + "height": 36, + "fill": "#FFFFFF", + "cornerRadius": 8, + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "CardLogoText", + "name": "LogoText", + "content": "EK", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CardBrandName", + "name": "BrandName", + "content": "EggyMon Kitchen", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "GV2KT", + "name": "logoIcon", + "width": 28, + "height": 28, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "Pd7fO", + "name": "logoText", + "fill": "#FFFFFF", + "content": "Eggymon Kitchen", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TierBadge", + "name": "TierBadge", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FFD700", + "position": 0 + }, + { + "color": "#FFC700", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000010", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 4 + }, + "gap": 4, + "padding": [ + 5, + 10 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TierBadgeIcon", + "name": "TierIcon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "text", + "id": "TierBadgeText", + "name": "TierText", + "content": "Gold Member", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "icon_font", + "id": "8eSos", + "name": "tierIcon", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#8B6914" + }, + { + "type": "text", + "id": "fANNn", + "name": "tierText", + "fill": "#8B6914", + "content": "Vàng", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CardMiddleSection", + "name": "MiddleSection", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "MemberName", + "name": "MemberName", + "fill": "#FFFFFF", + "content": "Nguyễn Văn A", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "MemberId", + "name": "MemberId", + "fill": "#DCC8AF", + "content": "EK-2024-001234", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "CardBottomRow", + "name": "BottomRow", + "width": "fill_container", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CardPoints", + "name": "Points", + "fill": "#FFFFFF", + "content": "2,450 điểm", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "YKSsI", + "name": "pointsLabel", + "fill": "#D4C4B0", + "content": "Điểm tích lũy", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "O4mLl", + "name": "pointsIcon", + "width": 14, + "height": 14, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "#FFD700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QRCodeSection", + "name": "QRCodeSection", + "layout": "vertical", + "gap": 8, + "padding": [ + 8, + 0, + 0, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QRCodeFrame", + "name": "QRCodeFrame", + "width": 160, + "height": 160, + "fill": "#FFFFFF", + "cornerRadius": 16, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000008", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 8 + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QRCodeIcon", + "name": "QRIcon", + "width": 90, + "height": 90, + "iconFontName": "qr-code", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "QRCodeLabel", + "name": "QRLabel", + "fill": "$text-secondary", + "content": "QR Code", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "QRScanText", + "name": "ScanText", + "fill": "$text-secondary", + "content": "Quét mã để tích điểm", + "fontFamily": "Poppins", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "QuickActionsRow", + "name": "QuickActions", + "width": "fill_container", + "gap": 20, + "padding": [ + 0, + 20 + ], + "justifyContent": "space_around", + "children": [ + { + "type": "frame", + "id": "ActionHistory", + "name": "ActionHistory", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ActionHistoryIconBg", + "name": "IconBg", + "width": 44, + "height": 44, + "fill": "$bg-elevated", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionHistoryIcon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "j5qFJ", + "name": "historyIcon", + "width": 20, + "height": 20, + "iconFontName": "history", + "iconFontFamily": "lucide", + "fill": "$brown-primary" + } + ] + }, + { + "type": "text", + "id": "ActionHistoryLabel", + "name": "Label", + "fill": "$text-primary", + "content": "Lịch sử", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ActionRewards", + "name": "ActionRewards", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ActionRewardsIconBg", + "name": "IconBg", + "width": 44, + "height": 44, + "fill": "$bg-elevated", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionRewardsIcon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "jyeYW", + "name": "rewardsIcon", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "text", + "id": "ActionRewardsLabel", + "name": "Label", + "fill": "$text-primary", + "content": "Ưu đãi", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ActionReferral", + "name": "ActionReferral", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ActionReferralIconBg", + "name": "IconBg", + "width": 44, + "height": 44, + "fill": "$bg-elevated", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionReferralIcon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "641iq", + "name": "referralIcon", + "width": 20, + "height": 20, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$brown-primary" + } + ] + }, + { + "type": "text", + "id": "ActionReferralLabel", + "name": "Label", + "fill": "$text-primary", + "content": "Giới thiệu", + "fontFamily": "Poppins", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RecentActivitySection", + "name": "RecentActivity", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "padding": [ + 0, + 20, + 20, + 20 + ], + "children": [ + { + "type": "text", + "id": "RecentActivityTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Hoạt động gần đây", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "ActivityItem1", + "name": "ActivityItem1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Activity1IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#DCFCE7", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Activity1Icon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "lCR3h", + "name": "activity1Icon", + "width": 18, + "height": 18, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Activity1Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Activity1Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Mua hàng - Combo bánh mì", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Activity1Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "10/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Activity1Points", + "name": "Points", + "fill": "$success", + "content": "+50 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ActivityItem2", + "name": "ActivityItem2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Activity2IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#FFF3E0", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Activity2Icon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "cDqsu", + "name": "activity2Icon", + "width": 18, + "height": 18, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$warning" + } + ] + }, + { + "type": "frame", + "id": "Activity2Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Activity2Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Đổi ưu đãi - Giảm 20%", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Activity2Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "08/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Activity2Points", + "name": "Points", + "fill": "$error", + "content": "-100 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ActivityItem3", + "name": "ActivityItem3", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Activity3IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#DCFCE7", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Activity3Icon", + "name": "Icon", + "width": 0, + "height": 0, + "iconFontFamily": "lucide" + }, + { + "type": "icon_font", + "id": "DDn1O", + "name": "activity3Icon", + "width": 18, + "height": 18, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Activity3Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Activity3Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Mua hàng - Trà sữa", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Activity3Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "05/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Activity3Points", + "name": "Points", + "fill": "$success", + "content": "+30 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/points-history.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/points-history.pen new file mode 100644 index 00000000..3779e2cf --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/points-history.pen @@ -0,0 +1,799 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "PointsHistoryScreen", + "x": 0, + "y": 0, + "name": "Screen/PointsHistory", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PointsTopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PointsBackIcon", + "name": "BackIcon", + "width": 24, + "height": 24, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "PointsTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Lịch sử điểm", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "PointsFilterIcon", + "name": "FilterIcon", + "width": 24, + "height": 24, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "PointsScrollContent", + "name": "ScrollContent", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "PointsSummaryCard", + "name": "SummaryCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "text", + "id": "SummaryLabel", + "name": "Label", + "fill": "$text-secondary", + "content": "Tổng điểm hiện tại", + "fontFamily": "Poppins", + "fontSize": 14 + }, + { + "type": "text", + "id": "SummaryTotal", + "name": "TotalPoints", + "fill": "$orange-primary", + "content": "2,450", + "fontFamily": "Poppins", + "fontSize": 36, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SummaryStatsRow", + "name": "StatsRow", + "width": "fill_container", + "gap": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SummaryEarned", + "name": "Earned", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EarnedLabel", + "name": "Label", + "fill": "$text-tertiary", + "content": "Đã tích", + "fontFamily": "Poppins", + "fontSize": 12 + }, + { + "type": "text", + "id": "EarnedValue", + "name": "Value", + "fill": "$success", + "content": "3,200", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SummaryDivider", + "name": "Divider", + "width": 1, + "height": 40, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "SummaryUsed", + "name": "Used", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "UsedLabel", + "name": "Label", + "fill": "$text-tertiary", + "content": "Đã dùng", + "fontFamily": "Poppins", + "fontSize": 12 + }, + { + "type": "text", + "id": "UsedValue", + "name": "Value", + "fill": "$text-secondary", + "content": "750", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MonthFilterTabs", + "name": "MonthFilter", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MonthTab1", + "name": "TabT1", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab1Text", + "fill": "$text-secondary", + "content": "T1", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MonthTab2", + "name": "TabT2", + "fill": "$orange-primary", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab2Text", + "fill": "$bg-surface", + "content": "T2", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "MonthTab3", + "name": "TabT3", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab3Text", + "fill": "$text-secondary", + "content": "T3", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MonthTab4", + "name": "TabT4", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab4Text", + "fill": "$text-secondary", + "content": "T4", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MonthTab5", + "name": "TabT5", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab5Text", + "fill": "$text-secondary", + "content": "T5", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MonthTab6", + "name": "TabT6", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "MonthTab6Text", + "fill": "$text-secondary", + "content": "T6", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TransactionList", + "name": "TransactionList", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "TxItem1", + "name": "Transaction1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 14, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Tx1IconBg", + "name": "IconBg", + "width": 40, + "height": 40, + "fill": "#DCFCE7", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Tx1Icon", + "name": "Icon", + "width": 24, + "height": 24, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Tx1Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Tx1Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Mua hàng - Combo bánh mì", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Tx1Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "10/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Tx1Points", + "name": "Points", + "fill": "$success", + "content": "+50 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TxItem2", + "name": "Transaction2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 14, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Tx2IconBg", + "name": "IconBg", + "width": 40, + "height": 40, + "fill": "#FFF3E0", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Tx2Icon", + "name": "Icon", + "width": 24, + "height": 24, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$warning" + } + ] + }, + { + "type": "frame", + "id": "Tx2Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Tx2Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Đổi ưu đãi - Giảm 20%", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Tx2Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "08/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Tx2Points", + "name": "Points", + "fill": "$orange-primary", + "content": "-100 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TxItem3", + "name": "Transaction3", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 14, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Tx3IconBg", + "name": "IconBg", + "width": 40, + "height": 40, + "fill": "#DCFCE7", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Tx3Icon", + "name": "Icon", + "width": 24, + "height": 24, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Tx3Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Tx3Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Mua hàng - Trà sữa", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Tx3Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "05/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Tx3Points", + "name": "Points", + "fill": "$success", + "content": "+30 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TxItem4", + "name": "Transaction4", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 14, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Tx4IconBg", + "name": "IconBg", + "width": 40, + "height": 40, + "fill": "#FFF3E0", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Tx4Icon", + "name": "Icon", + "width": 24, + "height": 24, + "iconFontName": "cake", + "iconFontFamily": "lucide", + "fill": "$warning" + } + ] + }, + { + "type": "frame", + "id": "Tx4Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Tx4Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Thưởng sinh nhật", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Tx4Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "01/02/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Tx4Points", + "name": "Points", + "fill": "$success", + "content": "+200 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TxItem5", + "name": "Transaction5", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 14, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Tx5IconBg", + "name": "IconBg", + "width": 40, + "height": 40, + "fill": "#DCFCE7", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Tx5Icon", + "name": "Icon", + "width": 24, + "height": 24, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Tx5Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Tx5Desc", + "name": "Description", + "fill": "$text-primary", + "content": "Mua hàng - Cơm trưa", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Tx5Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "28/01/2025", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "text", + "id": "Tx5Points", + "name": "Points", + "fill": "$success", + "content": "+45 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/referral-program.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/referral-program.pen new file mode 100644 index 00000000..a5a40f12 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/referral-program.pen @@ -0,0 +1,997 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "ReferralProgramScreen", + "x": 0, + "y": 0, + "name": "Screen/ReferralProgram", + "reusable": true, + "width": 390, + "height": 1022, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ReferralTopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ReferralBackIcon", + "name": "BackIcon", + "width": 24, + "height": 24, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "ReferralScreenTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Giới thiệu bạn bè", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "ReferralTopBarSpacer", + "name": "Spacer", + "width": "fill_container", + "height": 24 + } + ] + }, + { + "type": "frame", + "id": "ReferralScrollContent", + "name": "ScrollContent", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "padding": [ + 16, + 16, + 32, + 16 + ], + "children": [ + { + "type": "frame", + "id": "ReferralHeroBanner", + "name": "HeroBanner", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 8, + "padding": 18, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HeroIconBg", + "name": "IconBg", + "width": 56, + "height": 56, + "fill": "$bg-interactive", + "cornerRadius": 28, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "HeroUsersIcon", + "name": "Icon", + "width": 28, + "height": 28, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$brown-primary" + } + ] + }, + { + "type": "text", + "id": "HeroTitle", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Giới thiệu bạn bè", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 19, + "fontWeight": "600" + }, + { + "type": "text", + "id": "HeroSubtitle", + "name": "Subtitle", + "fill": "$text-secondary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Nhận 100 điểm cho mỗi bạn bè đăng ký!", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "ReferralCodeCard", + "name": "ReferralCodeCard", + "width": "fill_container", + "fill": "$brown-primary", + "cornerRadius": 16, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#FFFFFF33" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#6B442320", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 12 + }, + "layout": "vertical", + "gap": 14, + "padding": 16, + "children": [ + { + "type": "text", + "id": "CodeLabel", + "name": "Label", + "fill": "#FFFFFFCC", + "content": "Mã giới thiệu của bạn", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600", + "letterSpacing": 0.3 + }, + { + "type": "frame", + "id": "CodeBox", + "name": "CodeBox", + "width": "fill_container", + "fill": "#FFFFFF1A", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#FFFFFF1A" + }, + "layout": "vertical", + "padding": [ + 14, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CodeValue", + "name": "Code", + "fill": "#FFFFFF", + "content": "EGGY-VAN-A2024", + "textAlign": "center", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "CodeActionRow", + "name": "ActionRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CopyButton", + "name": "CopyButton", + "width": "fill_container", + "height": 44, + "fill": "#FFFFFF1A", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#FFFFFF1A" + }, + "gap": 6, + "padding": [ + 12, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CopyIcon", + "name": "Icon", + "width": 16, + "height": 16, + "iconFontName": "copy", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "CopyText", + "name": "Text", + "fill": "#FFFFFF", + "content": "Sao chép", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ShareButton", + "name": "ShareButton", + "width": "fill_container", + "height": 44, + "fill": "$orange-primary", + "cornerRadius": 10, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#FF6B3533", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 4 + }, + "gap": 6, + "padding": [ + 12, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ShareIcon", + "name": "Icon", + "width": 16, + "height": 16, + "iconFontName": "share-2", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ShareText", + "name": "Text", + "fill": "#FFFFFF", + "content": "Chia sẻ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReferralStatsRow", + "name": "StatsRow", + "width": "fill_container", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "StatReferred", + "name": "Referred", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000008", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 3 + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "StatReferredLabel", + "name": "Label", + "fill": "$text-secondary", + "content": "Đã giới thiệu", + "fontFamily": "Poppins", + "fontSize": 12 + }, + { + "type": "text", + "id": "StatReferredValue", + "name": "Value", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "StatPointsEarned", + "name": "PointsEarned", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000008", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 3 + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "StatPointsLabel", + "name": "Label", + "fill": "$text-secondary", + "content": "Điểm nhận", + "fontFamily": "Poppins", + "fontSize": 12 + }, + { + "type": "text", + "id": "StatPointsValue", + "name": "Value", + "fill": "$orange-primary", + "content": "500", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "HowItWorksSection", + "name": "HowItWorks", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "text", + "id": "HowItWorksTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Cách thức hoạt động", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600", + "letterSpacing": 0.2 + }, + { + "type": "frame", + "id": "Step1", + "name": "Step1", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step1IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step1Icon", + "name": "Icon", + "width": 18, + "height": 18, + "iconFontName": "share", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Step1Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step1Label", + "name": "Label", + "fill": "$text-tertiary", + "content": "Bước 1", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 0.5 + }, + { + "type": "text", + "id": "Step1Text", + "name": "Text", + "fill": "$text-primary", + "content": "Chia sẻ mã cho bạn bè", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step2", + "name": "Step2", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step2IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step2Icon", + "name": "Icon", + "width": 18, + "height": 18, + "iconFontName": "user-plus", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Step2Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step2Label", + "name": "Label", + "fill": "$text-tertiary", + "content": "Bước 2", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 0.5 + }, + { + "type": "text", + "id": "Step2Text", + "name": "Text", + "fill": "$text-primary", + "content": "Bạn bè đăng ký & mua hàng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step3", + "name": "Step3", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step3IconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step3Icon", + "name": "Icon", + "width": 18, + "height": 18, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Step3Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step3Label", + "name": "Label", + "fill": "$text-tertiary", + "content": "Bước 3", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 0.5 + }, + { + "type": "text", + "id": "Step3Text", + "name": "Text", + "fill": "$text-primary", + "content": "Cả hai nhận 100 điểm!", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FriendsListSection", + "name": "FriendsList", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "text", + "id": "FriendsListTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Bạn bè đã giới thiệu", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600", + "letterSpacing": 0.2 + }, + { + "type": "frame", + "id": "FriendItem1", + "name": "Friend1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Friend1Avatar", + "name": "Avatar", + "width": 44, + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 24, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Friend1Initial", + "name": "Initial", + "fill": "$brown-primary", + "content": "TB", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Friend1Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "Friend1Name", + "name": "Name", + "fill": "$text-primary", + "content": "Trần Bình", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Friend1Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "Tham gia 05/01/2025", + "fontFamily": "Poppins", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "Friend1Points", + "name": "Points", + "fill": "$success", + "content": "+100 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FriendItem2", + "name": "Friend2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Friend2Avatar", + "name": "Avatar", + "width": 44, + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 24, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Friend2Initial", + "name": "Initial", + "fill": "$brown-primary", + "content": "LH", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Friend2Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "Friend2Name", + "name": "Name", + "fill": "$text-primary", + "content": "Lê Hương", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Friend2Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "Tham gia 20/12/2024", + "fontFamily": "Poppins", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "Friend2Points", + "name": "Points", + "fill": "$success", + "content": "+100 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FriendItem3", + "name": "Friend3", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Friend3Avatar", + "name": "Avatar", + "width": 44, + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 24, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Friend3Initial", + "name": "Initial", + "fill": "$brown-primary", + "content": "PM", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Friend3Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "Friend3Name", + "name": "Name", + "fill": "$text-primary", + "content": "Phạm Minh", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Friend3Date", + "name": "Date", + "fill": "$text-tertiary", + "content": "Tham gia 15/11/2024", + "fontFamily": "Poppins", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "Friend3Points", + "name": "Points", + "fill": "$success", + "content": "+100 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/rewards-catalog.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/rewards-catalog.pen new file mode 100644 index 00000000..7f63b381 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/rewards-catalog.pen @@ -0,0 +1,979 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "RewardsCatalogScreen", + "x": 0, + "y": 0, + "name": "Screen/RewardsCatalog", + "reusable": true, + "width": 390, + "height": 911, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "RewardsTopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RewardsBackIcon", + "name": "BackIcon", + "width": 24, + "height": 24, + "iconFontName": "chevron-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "frame", + "id": "wU2Gs", + "name": "titleWrapper", + "width": "fill_container", + "height": "fill_container", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RewardsScreenTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Đổi thưởng", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + } + ] + }, + { + "type": "icon_font", + "id": "RewardsFilterIcon", + "name": "FilterIcon", + "width": 24, + "height": 24, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "RewardsScrollContent", + "name": "ScrollContent", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 16, + 20, + 20, + 20 + ], + "children": [ + { + "type": "frame", + "id": "PointsBalanceBar", + "name": "PointsBalance", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "padding": [ + 14, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BalanceLeft", + "name": "Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BalanceIcon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "coins", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "BalanceText", + "name": "Text", + "fill": "$text-primary", + "content": "Bạn có 2,450 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "BalanceArrow", + "name": "Arrow", + "width": 20, + "height": 20, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabs", + "name": "CategoryTabs", + "width": "fill_container", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CatTabAll", + "name": "TabAll", + "fill": "$orange-primary", + "cornerRadius": 20, + "padding": [ + 8, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CatTabAllText", + "fill": "#FFFFFF", + "content": "Tất cả", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CatTabDiscount", + "name": "TabDiscount", + "fill": "$bg-interactive", + "cornerRadius": 20, + "padding": [ + 8, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CatTabDiscountText", + "fill": "$text-secondary", + "content": "Giảm giá", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatTabFree", + "name": "TabFree", + "fill": "$bg-interactive", + "cornerRadius": 20, + "padding": [ + 8, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CatTabFreeText", + "fill": "$text-secondary", + "content": "Miễn phí", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatTabGifts", + "name": "TabGifts", + "fill": "$bg-interactive", + "cornerRadius": 20, + "padding": [ + 8, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CatTabGiftsText", + "fill": "$text-secondary", + "content": "Quà tặng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RewardsGrid", + "name": "RewardsGrid", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "4yWVT", + "name": "row1", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "RewardCard1", + "name": "RewardCoffee", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward1ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward1Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Reward1Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward1Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "1 ly cà phê miễn phí", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward1Points", + "name": "Points", + "fill": "$orange-primary", + "content": "200 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward1Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward1BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RewardCard2", + "name": "RewardDiscount", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward2ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward2Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "percent", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Reward2Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward2Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Giảm 20% đơn tiếp theo", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward2Points", + "name": "Points", + "fill": "$orange-primary", + "content": "100 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward2Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward2BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Dw1Yp", + "name": "row2", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "RewardCard3", + "name": "RewardCombo", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward3ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward3Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "sandwich", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Reward3Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward3Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Combo bánh + nước -50%", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward3Points", + "name": "Points", + "fill": "$orange-primary", + "content": "350 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward3Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward3BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RewardCard4", + "name": "RewardShirt", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward4ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward4Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "shirt", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "Reward4Tag", + "name": "Tag", + "fill": "$error", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward4TagText", + "fill": "#FFFFFF", + "content": "Sắp hết", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Reward4Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward4Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Áo thun EggyMon", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward4Points", + "name": "Points", + "fill": "$orange-primary", + "content": "500 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward4Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward4BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "x81EV", + "name": "row3", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "RewardCard5", + "name": "RewardMealSet", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward5ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward5Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Reward5Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward5Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Set ăn miễn phí", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward5Points", + "name": "Points", + "fill": "$orange-primary", + "content": "800 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward5Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward5BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RewardCard6", + "name": "RewardVIP", + "width": 166, + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Reward6ImageArea", + "name": "ImageArea", + "width": "fill_container", + "height": 100, + "fill": "#FFE5D9", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Reward6Icon", + "name": "Icon", + "width": 48, + "height": 48, + "iconFontName": "crown", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Reward6Info", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "Reward6Title", + "name": "Title", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Nâng hạng VIP", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Reward6Points", + "name": "Points", + "fill": "$orange-primary", + "content": "1000 điểm", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Reward6Button", + "name": "Button", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Reward6BtnText", + "name": "BtnText", + "fill": "#FFFFFF", + "content": "Đổi ngay", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/tier-progress.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/tier-progress.pen new file mode 100644 index 00000000..cb98a618 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/loyalty/tier-progress.pen @@ -0,0 +1,693 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "TierProgressScreen", + "x": 0, + "y": 0, + "name": "Screen/TierProgress", + "reusable": true, + "width": 390, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TierTopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "gap": 8, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TierBackIcon", + "name": "BackIcon", + "width": 24, + "height": 24, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "TierScreenTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Hạng thành viên", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "TierScrollContent", + "name": "ScrollContent", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "CurrentTierCard", + "name": "CurrentTierCard", + "width": "fill_container", + "fill": "#FFD700", + "cornerRadius": 20, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000015", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 12 + }, + "layout": "vertical", + "gap": 16, + "padding": 24, + "children": [ + { + "type": "icon_font", + "id": "TierCrownIcon", + "name": "CrownIcon", + "width": 32, + "height": 32, + "iconFontName": "crown", + "iconFontFamily": "lucide", + "fill": "#1F2937" + }, + { + "type": "text", + "id": "TierCurrentLabel", + "name": "TierLabel", + "fill": "#1F2937", + "content": "Gold Member", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TierMemberName", + "name": "MemberName", + "fill": "#374151", + "content": "Nguyễn Văn A", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "500" + }, + { + "type": "text", + "id": "TierPointsProgress", + "name": "PointsProgress", + "fill": "#4B5563", + "content": "2,450 / 5,000 điểm", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "TierProgressBarBg", + "name": "ProgressBarBg", + "width": "fill_container", + "height": 12, + "fill": "#FFFFFF66", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "TierProgressBarFill", + "name": "ProgressBarFill", + "width": 148, + "height": 12, + "fill": "#FFFFFF", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "TierRemainingText", + "name": "RemainingText", + "fill": "#6B7280", + "content": "Còn 2,550 điểm để lên Platinum", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "TierRoadmapSection", + "name": "TierRoadmap", + "width": "fill_container", + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TierRoadmapBronze", + "name": "BronzeTier", + "width": "fill_container", + "fill": "#F9FAFB", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#E5E7EB" + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BronzeIconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#CD7F32", + "cornerRadius": 18, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BronzeCheckIcon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "BronzeInfo", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "BronzeName", + "name": "Name", + "fill": "#1F2937", + "content": "Bronze", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "BronzeDesc", + "name": "Description", + "fill": "#6B7280", + "content": "0 điểm - Tích điểm cơ bản", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "TierConnectorLine1", + "name": "Connector1", + "width": 2, + "height": 20, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "TierRoadmapSilver", + "name": "SilverTier", + "width": "fill_container", + "fill": "#F9FAFB", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#E5E7EB" + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SilverIconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#C0C0C0", + "cornerRadius": 18, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SilverCheckIcon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "SilverInfo", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SilverName", + "name": "Name", + "fill": "#1F2937", + "content": "Silver", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SilverDesc", + "name": "Description", + "fill": "#6B7280", + "content": "500 điểm - Giảm 5% mọi đơn", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "TierConnectorLine2", + "name": "Connector2", + "width": 2, + "height": 20, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "TierRoadmapGold", + "name": "GoldTier", + "width": "fill_container", + "fill": "#FFF8E1", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 2, + "fill": "#FFD700" + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "GoldIconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#FFD700", + "cornerRadius": 18, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "GoldStarIcon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#1F2937" + } + ] + }, + { + "type": "frame", + "id": "GoldInfo", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "GoldName", + "name": "Name", + "fill": "#1F2937", + "content": "Gold (Hiện tại)", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "text", + "id": "GoldDesc", + "name": "Description", + "fill": "#1F2937", + "content": "2,000 điểm - Giảm 10%, x2 điểm", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "TierConnectorLine3", + "name": "Connector3", + "width": 2, + "height": 20, + "fill": "$border-default" + }, + { + "type": "frame", + "id": "TierRoadmapPlatinum", + "name": "PlatinumTier", + "opacity": 0.6, + "width": "fill_container", + "fill": "#F9FAFB", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#E5E7EB" + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatinumIconBg", + "name": "IconBg", + "width": 36, + "height": 36, + "fill": "#A78BFA", + "cornerRadius": 18, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PlatinumLockIcon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "PlatinumInfo", + "name": "Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PlatinumName", + "name": "Name", + "fill": "#1F2937", + "content": "Platinum", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PlatinumDesc", + "name": "Description", + "fill": "#6B7280", + "content": "5,000 điểm - Giảm 15%, x3 điểm, VIP", + "fontFamily": "Poppins", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "GoldBenefitsSection", + "name": "GoldBenefits", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000010", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 8 + }, + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "text", + "id": "BenefitsTitle", + "name": "Title", + "fill": "$text-primary", + "content": "Quyền lợi Gold", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Benefit1", + "name": "Benefit1", + "width": "fill_container", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Benefit1Icon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "tag", + "iconFontFamily": "lucide", + "fill": "#10B981" + }, + { + "type": "text", + "id": "Benefit1Text", + "name": "Text", + "fill": "$text-primary", + "content": "Giảm 10% tất cả đơn hàng", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "Benefit2", + "name": "Benefit2", + "width": "fill_container", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Benefit2Icon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "text", + "id": "Benefit2Text", + "name": "Text", + "fill": "$text-primary", + "content": "Tích điểm x2", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Benefit3", + "name": "Benefit3", + "width": "fill_container", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Benefit3Icon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "#EC4899" + }, + { + "type": "text", + "id": "Benefit3Text", + "name": "Text", + "fill": "$text-primary", + "content": "Ưu đãi sinh nhật đặc biệt", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "Benefit4", + "name": "Benefit4", + "width": "fill_container", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Benefit4Icon", + "name": "Icon", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#8B5CF6" + }, + { + "type": "text", + "id": "Benefit4Text", + "name": "Text", + "fill": "$text-primary", + "content": "Ưu tiên phục vụ", + "fontFamily": "Poppins", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/cart-checkout.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/cart-checkout.pen new file mode 100644 index 00000000..95b9f9c1 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/cart-checkout.pen @@ -0,0 +1,1015 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "CartCheckoutScreen", + "x": 0, + "y": 0, + "name": "POS/CartCheckout", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CartTopBar", + "name": "CartTopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CartBackIcon", + "name": "CartBackIcon", + "width": 24, + "height": 24, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "CartTopTitle", + "name": "CartTopTitle", + "fill": "$text-primary", + "content": "Giỏ hàng", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CartClearAll", + "name": "CartClearAll", + "fill": "$orange-primary", + "content": "Xóa tất cả", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CartScrollContent", + "name": "CartScrollContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 16, + 16, + 80, + 16 + ], + "children": [ + { + "type": "frame", + "id": "CartItem1", + "name": "CartItem1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "CartItem1Img", + "name": "CartItem1Img", + "width": 60, + "height": 60, + "fill": "#FFE5D9", + "cornerRadius": 10 + }, + { + "type": "frame", + "id": "CartItem1Info", + "name": "CartItem1Info", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CartItem1Name", + "name": "CartItem1Name", + "fill": "$text-primary", + "content": "Cơm trứng chiên", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CartItem1Options", + "name": "CartItem1Options", + "fill": "$text-secondary", + "content": "Vừa, +Trứng", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "CartItem1Bottom", + "name": "CartItem1Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem1Qty", + "name": "CartItem1Qty", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem1QtyMinus", + "name": "CartItem1QtyMinus", + "width": 28, + "height": 28, + "fill": "$bg-interactive", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem1MinusText", + "name": "CartItem1MinusText", + "fill": "$text-primary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "CartItem1QtyNum", + "name": "CartItem1QtyNum", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CartItem1QtyPlus", + "name": "CartItem1QtyPlus", + "width": 28, + "height": 28, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem1PlusText", + "name": "CartItem1PlusText", + "fill": "#FFFFFF", + "content": "+", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CartItem1Price", + "name": "CartItem1Price", + "fill": "$orange-primary", + "content": "100,000d", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CartItem2", + "name": "CartItem2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "CartItem2Img", + "name": "CartItem2Img", + "width": 60, + "height": 60, + "fill": "#E5F0FF", + "cornerRadius": 10 + }, + { + "type": "frame", + "id": "CartItem2Info", + "name": "CartItem2Info", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CartItem2Name", + "name": "CartItem2Name", + "fill": "$text-primary", + "content": "Trà sữa oolong", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CartItem2Options", + "name": "CartItem2Options", + "fill": "$text-secondary", + "content": "Size L", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "CartItem2Bottom", + "name": "CartItem2Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem2Qty", + "name": "CartItem2Qty", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem2QtyMinus", + "name": "CartItem2QtyMinus", + "width": 28, + "height": 28, + "fill": "$bg-interactive", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem2MinusText", + "name": "CartItem2MinusText", + "fill": "$text-primary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "CartItem2QtyNum", + "name": "CartItem2QtyNum", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CartItem2QtyPlus", + "name": "CartItem2QtyPlus", + "width": 28, + "height": 28, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem2PlusText", + "name": "CartItem2PlusText", + "fill": "#FFFFFF", + "content": "+", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CartItem2Price", + "name": "CartItem2Price", + "fill": "$orange-primary", + "content": "40,000d", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CartItem3", + "name": "CartItem3", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "gap": 12, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "CartItem3Img", + "name": "CartItem3Img", + "width": 60, + "height": 60, + "fill": "#F0FFE5", + "cornerRadius": 10 + }, + { + "type": "frame", + "id": "CartItem3Info", + "name": "CartItem3Info", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CartItem3Name", + "name": "CartItem3Name", + "fill": "$text-primary", + "content": "Bánh mì trứng ốp la", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CartItem3Options", + "name": "CartItem3Options", + "fill": "$text-secondary", + "content": "Ghi chú: Không hành", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "CartItem3Bottom", + "name": "CartItem3Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem3Qty", + "name": "CartItem3Qty", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CartItem3QtyMinus", + "name": "CartItem3QtyMinus", + "width": 28, + "height": 28, + "fill": "$bg-interactive", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem3MinusText", + "name": "CartItem3MinusText", + "fill": "$text-primary", + "content": "-", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "CartItem3QtyNum", + "name": "CartItem3QtyNum", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CartItem3QtyPlus", + "name": "CartItem3QtyPlus", + "width": 28, + "height": 28, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartItem3PlusText", + "name": "CartItem3PlusText", + "fill": "#FFFFFF", + "content": "+", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CartItem3Price", + "name": "CartItem3Price", + "fill": "$orange-primary", + "content": "25,000d", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "VoucherSection", + "name": "VoucherSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 8, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "VoucherIcon", + "name": "VoucherIcon", + "width": 20, + "height": 20, + "iconFontName": "ticket", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "VoucherInput", + "name": "VoucherInput", + "fill": "$text-tertiary", + "content": "Nhập mã giảm giá", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "VoucherApply", + "name": "VoucherApply", + "fill": "$orange-primary", + "cornerRadius": 8, + "padding": [ + 6, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VoucherApplyText", + "name": "VoucherApplyText", + "fill": "#FFFFFF", + "content": "Áp dụng", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoyaltyRow", + "name": "LoyaltyRow", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "padding": [ + 12, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LoyaltyLeft", + "name": "LoyaltyLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LoyaltyIcon", + "name": "LoyaltyIcon", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "LoyaltyText", + "name": "LoyaltyText", + "fill": "$text-primary", + "content": "Dùng 200 điểm (-20,000đ)", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "LoyaltyToggle", + "name": "LoyaltyToggle", + "width": 44, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "padding": 2, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LoyaltyToggleThumb", + "name": "LoyaltyToggleThumb", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "OrderTypeSection", + "name": "OrderTypeSection", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "OrderTypeDineIn", + "name": "OrderTypeDineIn", + "width": "fill_container", + "height": 56, + "fill": "$orange-primary", + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DineInIcon", + "name": "DineInIcon", + "width": 24, + "height": 24, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "DineInText", + "name": "DineInText", + "fill": "#FFFFFF", + "content": "Tại quán", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "OrderTypeTakeaway", + "name": "OrderTypeTakeaway", + "width": "fill_container", + "height": 56, + "fill": "$bg-interactive", + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TakeawayIcon", + "name": "TakeawayIcon", + "width": 24, + "height": 24, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TakeawayText", + "name": "TakeawayText", + "fill": "$text-secondary", + "content": "Mang đi", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PickupTimeSection", + "name": "PickupTimeSection", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PickupNow", + "name": "PickupNow", + "width": "fill_container", + "height": 44, + "fill": "$orange-primary", + "cornerRadius": 10, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PickupNowText", + "name": "PickupNowText", + "fill": "#FFFFFF", + "content": "Nhận ngay", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PickupSchedule", + "name": "PickupSchedule", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PickupScheduleText", + "name": "PickupScheduleText", + "fill": "$text-secondary", + "content": "Đặt trước", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PickupScheduleTime", + "name": "PickupScheduleTime", + "fill": "$text-primary", + "content": "15:30", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PriceSummary", + "name": "PriceSummary", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 10, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "SummarySubtotal", + "name": "SummarySubtotal", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SubtotalLabel", + "name": "SubtotalLabel", + "fill": "$text-secondary", + "content": "Tạm tính", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "SubtotalValue", + "name": "SubtotalValue", + "fill": "$text-primary", + "content": "165,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SummaryVoucher", + "name": "SummaryVoucher", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VoucherDiscLabel", + "name": "VoucherDiscLabel", + "fill": "$text-secondary", + "content": "Giảm giá voucher", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "VoucherDiscValue", + "name": "VoucherDiscValue", + "fill": "$success", + "content": "-15,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SummaryLoyalty", + "name": "SummaryLoyalty", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LoyaltyDiscLabel", + "name": "LoyaltyDiscLabel", + "fill": "$text-secondary", + "content": "Điểm loyalty", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "LoyaltyDiscValue", + "name": "LoyaltyDiscValue", + "fill": "$success", + "content": "-20,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SummaryDivider", + "name": "SummaryDivider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "SummaryTotal", + "name": "SummaryTotal", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TotalLabel", + "name": "TotalLabel", + "fill": "$text-primary", + "content": "Tổng cộng", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TotalValue", + "name": "TotalValue", + "fill": "$orange-primary", + "content": "130,000d", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CartBottomBar", + "name": "CartBottomBar", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "layout": "vertical", + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "frame", + "id": "CheckoutBtn", + "name": "CheckoutBtn", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CheckoutBtnText", + "name": "CheckoutBtnText", + "fill": "#FFFFFF", + "content": "Đặt hàng - 130,000đ", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/item-detail.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/item-detail.pen new file mode 100644 index 00000000..0e6cd3fa --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/item-detail.pen @@ -0,0 +1,854 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "ItemDetailScreen", + "x": 0, + "y": 0, + "name": "POS/ItemDetail", + "reusable": true, + "width": 390, + "height": 1176, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DetailTopBar", + "name": "DetailTopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DetailBackIcon", + "name": "DetailBackIcon", + "width": 24, + "height": 24, + "iconFontName": "chevron-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "DetailTopTitle", + "name": "DetailTopTitle", + "fill": "$text-primary", + "content": "Chi tiết món", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "DetailFavIcon", + "name": "DetailFavIcon", + "width": 24, + "height": 24, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "DetailScrollContent", + "name": "DetailScrollContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DetailImageArea", + "name": "DetailImageArea", + "metadata": { + "type": "unsplash", + "username": "madeline_sd", + "link": "https://unsplash.com/@madeline_sd", + "author": "Madeline Liu" + }, + "width": "fill_container", + "height": 240, + "fill": { + "type": "image", + "enabled": true, + "url": "https://images.unsplash.com/photo-1717749790652-f3db782af52e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzA4MjA1ODV8&ixlib=rb-4.1.0&q=80&w=1080", + "mode": "fill" + }, + "cornerRadius": [ + 0, + 0, + 24, + 24 + ], + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center" + }, + { + "type": "frame", + "id": "DetailInfoSection", + "name": "DetailInfoSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "DetailItemTitle", + "name": "DetailItemTitle", + "fill": "$text-primary", + "content": "Cơm trứng chiên đặc biệt", + "fontFamily": "Poppins", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "DetailMetaRow", + "name": "DetailMetaRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "DetailRatingGroup", + "name": "DetailRatingGroup", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "jItXZ", + "name": "DetailStarIcon", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$warning" + }, + { + "type": "text", + "id": "aTYHX", + "name": "DetailRatingText", + "fill": "$text-secondary", + "content": "4.8", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DetailTimeGroup", + "name": "DetailTimeGroup", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "su4KQ", + "name": "DetailClockIcon", + "width": 14, + "height": 14, + "iconFontName": "clock-3", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "KK8z7", + "name": "DetailTimeText", + "fill": "$text-secondary", + "content": "15-20 phút", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "DetailPrice", + "name": "DetailPrice", + "fill": "$orange-primary", + "content": "45,000d", + "fontFamily": "Poppins", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "DetailDesc", + "name": "DetailDesc", + "fill": "$text-secondary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Cơm trắng dẻo thơm với trứng chiên vàng giòn, kèm xúc xích, rau xà lách và nước tương đặc biệt.", + "lineHeight": 1.5, + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SizeSection", + "name": "SizeSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "SizeLabel", + "name": "SizeLabel", + "fill": "$text-primary", + "content": "Kích cỡ", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SizeOptions", + "name": "SizeOptions", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SizeSmall", + "name": "SizeSmall", + "width": "fill_container", + "height": 42, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "8sOQJ", + "name": "SizeSmallText", + "fill": "$text-secondary", + "content": "Nhỏ", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SizeMedium", + "name": "SizeMedium", + "width": "fill_container", + "height": 42, + "fill": "$orange-primary", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LsatE", + "name": "SizeMediumText", + "fill": "$bg-surface", + "content": "Vừa", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SizeLarge", + "name": "SizeLarge", + "width": "fill_container", + "height": 42, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "C5HoM", + "name": "SizeLargeText", + "fill": "$text-secondary", + "content": "Lớn +10,000đ", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ToppingSection", + "name": "ToppingSection", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "ToppingLabel", + "name": "ToppingLabel", + "fill": "$text-primary", + "content": "Thêm topping", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Topping1", + "name": "Topping1", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 4 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Topping1Left", + "name": "Topping1Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "82R7Z", + "name": "Topping1Check", + "width": 20, + "height": 20, + "cornerRadius": 6, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "text", + "id": "shhUO", + "name": "Topping1Name", + "fill": "$text-primary", + "content": "Trứng ốp la", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "Topping1Price", + "name": "Topping1Price", + "fill": "$text-secondary", + "content": "+5,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Topping2", + "name": "Topping2", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 4 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Topping2Left", + "name": "Topping2Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "V0gge", + "name": "Topping2Check", + "width": 20, + "height": 20, + "fill": "$orange-primary", + "cornerRadius": 6, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6UlRe", + "name": "t2Icon", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + }, + { + "type": "text", + "id": "hHSLJ", + "name": "Topping2Name", + "fill": "$text-primary", + "content": "Phô mai", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "Topping2Price", + "name": "Topping2Price", + "fill": "$text-secondary", + "content": "+8,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Topping3", + "name": "Topping3", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 4 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Topping3Left", + "name": "Topping3Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "raejk", + "name": "Topping3Check", + "width": 20, + "height": 20, + "cornerRadius": 6, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "text", + "id": "j1UGc", + "name": "Topping3Name", + "fill": "$text-primary", + "content": "Xúc xích", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "Topping3Price", + "name": "Topping3Price", + "fill": "$text-secondary", + "content": "+6,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Topping4", + "name": "Topping4", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 4 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Topping4Left", + "name": "Topping4Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RrI77", + "name": "Topping4Check", + "width": 20, + "height": 20, + "cornerRadius": 6, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "text", + "id": "GjPTt", + "name": "Topping4Name", + "fill": "$text-primary", + "content": "Rau củ", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "Topping4Price", + "name": "Topping4Price", + "fill": "$text-secondary", + "content": "+3,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NoteSection", + "name": "NoteSection", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "padding": [ + 12, + 20, + 20, + 20 + ], + "children": [ + { + "type": "text", + "id": "NoteLabel", + "name": "NoteLabel", + "fill": "$text-primary", + "content": "Ghi chú đặc biệt", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "NoteInput", + "name": "NoteInput", + "width": "fill_container", + "height": 72, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1.5, + "fill": "$border-default" + }, + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "NotePlaceholder", + "name": "NotePlaceholder", + "fill": "$text-tertiary", + "content": "VD: Ít muối, không hành...", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QtySection", + "name": "QtySection", + "width": "fill_container", + "gap": 20, + "padding": [ + 12, + 20, + 20, + 20 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QtyMinus", + "name": "QtyMinus", + "width": 40, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QtyMinusIcon", + "name": "QtyMinusIcon", + "width": 20, + "height": 20, + "iconFontName": "minus", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "text", + "id": "QtyValue", + "name": "QtyValue", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "QtyPlus", + "name": "QtyPlus", + "width": 40, + "height": 40, + "fill": "$orange-primary", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QtyPlusIcon", + "name": "QtyPlusIcon", + "width": 20, + "height": 20, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DetailBottomBar", + "name": "DetailBottomBar", + "width": "fill_container", + "height": 80, + "fill": "$bg-surface", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DetailTotalGroup", + "name": "DetailTotalGroup", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "DetailTotalLabel", + "name": "DetailTotalLabel", + "fill": "$text-secondary", + "content": "Tổng cộng", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "DetailTotalPrice", + "name": "DetailTotalPrice", + "fill": "$text-primary", + "content": "55,000d", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "AddToCartBtn", + "name": "AddToCartBtn", + "width": 200, + "height": 50, + "fill": "$orange-primary", + "cornerRadius": 30, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "AddToCartIcon", + "name": "AddToCartIcon", + "width": 20, + "height": 20, + "iconFontName": "shopping-cart", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + }, + { + "type": "text", + "id": "AddToCartText", + "name": "AddToCartText", + "fill": "$bg-surface", + "content": "Thêm vào giỏ", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/menu-browse.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/menu-browse.pen new file mode 100644 index 00000000..fb811f16 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/menu-browse.pen @@ -0,0 +1,1053 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "MenuBrowseScreen", + "x": 0, + "y": 0, + "name": "POS/MenuBrowse", + "reusable": true, + "width": 390, + "height": 1079, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TopBar", + "name": "TopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MenuIcon", + "name": "MenuIcon", + "width": 24, + "height": 24, + "iconFontName": "menu", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "TopBarTitle", + "name": "TopBarTitle", + "fill": "$text-primary", + "content": "EggyMon Kitchen", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CartIconWrapper", + "name": "CartIconWrapper", + "width": 40, + "height": 40, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CartIcon", + "name": "CartIcon", + "width": 24, + "height": 24, + "iconFontName": "shopping-cart", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "frame", + "id": "CartBadge", + "name": "CartBadge", + "width": 18, + "height": 18, + "fill": "$orange-primary", + "cornerRadius": 9, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CartBadgeText", + "name": "CartBadgeText", + "content": "3", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "fOWkI", + "name": "badgeText", + "fill": "$bg-surface", + "content": "3", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ContentScroll", + "name": "ContentScroll", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "frame", + "id": "SearchBar", + "name": "SearchBar", + "width": "fill_container", + "height": 44, + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 8, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SearchIcon", + "name": "SearchIcon", + "width": 20, + "height": 20, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SearchPlaceholder", + "name": "SearchPlaceholder", + "fill": "$text-tertiary", + "content": "Tìm món...", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CategoryTabs", + "name": "CategoryTabs", + "width": "fill_container", + "height": 36, + "gap": 8, + "children": [ + { + "type": "frame", + "id": "CatAll", + "name": "CatAll", + "height": 36, + "fill": "$orange-primary", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CF72W", + "name": "allText", + "fill": "$bg-surface", + "content": "Tất cả", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CatMain", + "name": "CatMain", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dHJWk", + "name": "mainText", + "fill": "$text-primary", + "content": "Món chính", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatDrink", + "name": "CatDrink", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KA3Si", + "name": "drinkText", + "fill": "$text-primary", + "content": "Đồ uống", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatSnack", + "name": "CatSnack", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "BXRiu", + "name": "snackText", + "fill": "$text-primary", + "content": "Ăn vặt", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatCombo", + "name": "CatCombo", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "WM7WW", + "name": "comboText", + "fill": "$text-primary", + "content": "Combo", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CatDessert", + "name": "CatDessert", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 18, + "layout": "vertical", + "padding": [ + 6, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GHibU", + "name": "dessertText", + "fill": "$text-primary", + "content": "Tráng miệng", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FeaturedBanner", + "name": "FeaturedBanner", + "width": "fill_container", + "height": 120, + "fill": "$brown-primary", + "cornerRadius": 16, + "layout": "vertical", + "gap": 4, + "padding": 20, + "children": [ + { + "type": "text", + "id": "BannerTitle", + "name": "BannerTitle", + "fill": "$bg-surface", + "content": "Combo trưa giảm 30%", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "BannerPrice", + "name": "BannerPrice", + "fill": "$orange-light", + "content": "Chỉ 69,000đ", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MenuGridRow1", + "name": "MenuGridRow1", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "MenuItem1", + "name": "MenuItem1", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "zt7kq", + "name": "item1Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "CsHDM", + "name": "item1Name", + "fill": "$text-primary", + "content": "Cơm gà teriyaki", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "89Hob", + "name": "priceRow1", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "1pzQZ", + "name": "item1Price", + "fill": "$orange-primary", + "content": "45,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "9BC9k", + "name": "item1Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "92Faw", + "name": "item1AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MenuItem2", + "name": "MenuItem2", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "y6EKg", + "name": "item2Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "MVXlO", + "name": "item2Name", + "fill": "$text-primary", + "content": "Phở bò", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "25Sdf", + "name": "priceRow2", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CPIeK", + "name": "item2Price", + "fill": "$orange-primary", + "content": "50,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "YWKW6", + "name": "item2Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "URAJW", + "name": "item2AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MenuGridRow2", + "name": "MenuGridRow2", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "MenuItem3", + "name": "MenuItem3", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "GM4Gu", + "name": "item3Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "Upoxv", + "name": "item3Name", + "fill": "$text-primary", + "content": "Bún chả", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Yh7LM", + "name": "priceRow3", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "qrMZA", + "name": "item3Price", + "fill": "$orange-primary", + "content": "42,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ijsNs", + "name": "item3Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dgaNU", + "name": "item3AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MenuItem4", + "name": "MenuItem4", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "0ZFUG", + "name": "item4Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "KgqY6", + "name": "item4Name", + "fill": "$text-primary", + "content": "Bánh mì thịt", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "AW0w1", + "name": "priceRow4", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "6eCJ4", + "name": "item4Price", + "fill": "$orange-primary", + "content": "25,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "yQz43", + "name": "item4Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "v14Wm", + "name": "item4AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MenuGridRow3", + "name": "MenuGridRow3", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "MenuItem5", + "name": "MenuItem5", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "8zzN0", + "name": "item5Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "R1mte", + "name": "item5Name", + "fill": "$text-primary", + "content": "Trà sữa trân châu", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "14HRJ", + "name": "priceRow5", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "bZ8KW", + "name": "item5Price", + "fill": "$orange-primary", + "content": "35,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "FUAte", + "name": "item5Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "4G4VS", + "name": "item5AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MenuItem6", + "name": "MenuItem6", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "Yo0RH", + "name": "item6Img", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "cornerRadius": 12 + }, + { + "type": "text", + "id": "ZcVLk", + "name": "item6Name", + "fill": "$text-primary", + "content": "Cà phê sữa đá", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCyz5", + "name": "priceRow6", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oVw0w", + "name": "item6Price", + "fill": "$orange-primary", + "content": "30,000đ", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "QfORC", + "name": "item6Add", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "0qBJX", + "name": "item6AddIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "BottomNavBar", + "name": "BottomNavBar", + "width": "fill_container", + "height": 64, + "fill": "$bg-surface", + "padding": [ + 8, + 0 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NavHome", + "name": "NavHome", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NavHomeIcon", + "name": "NavHomeIcon", + "width": 24, + "height": 24, + "iconFontName": "house", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "NavHomeText", + "name": "NavHomeText", + "fill": "$orange-primary", + "content": "Home", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NavMenu", + "name": "NavMenu", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NavMenuIcon", + "name": "NavMenuIcon", + "width": 24, + "height": 24, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavMenuText", + "name": "NavMenuText", + "fill": "$text-secondary", + "content": "Menu", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavOrders", + "name": "NavOrders", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NavOrdersIcon", + "name": "NavOrdersIcon", + "width": 24, + "height": 24, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavOrdersText", + "name": "NavOrdersText", + "fill": "$text-secondary", + "content": "Orders", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavProfile", + "name": "NavProfile", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NavProfileIcon", + "name": "NavProfileIcon", + "width": 24, + "height": 24, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NavProfileText", + "name": "NavProfileText", + "fill": "$text-secondary", + "content": "Profile", + "fontFamily": "Poppins", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-complete.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-complete.pen new file mode 100644 index 00000000..d1ea229c --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-complete.pen @@ -0,0 +1,483 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "OrderCompleteScreen", + "x": 0, + "y": 0, + "name": "POS/OrderComplete", + "reusable": true, + "width": 390, + "height": 952, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CompleteScrollContent", + "name": "CompleteScrollContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [ + 40, + 20, + 20, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SuccessIconWrap", + "name": "SuccessIconWrap", + "width": 100, + "height": 100, + "fill": "#22C55E20", + "cornerRadius": 50, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SuccessCheckIcon", + "name": "SuccessCheckIcon", + "width": 48, + "height": 48, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$success" + } + ] + }, + { + "type": "text", + "id": "CompleteTitle", + "name": "CompleteTitle", + "fill": "$text-primary", + "content": "Đơn hàng sẵn sàng!", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CompleteSubtitle", + "name": "CompleteSubtitle", + "fill": "$text-secondary", + "content": "Vui lòng đến quầy nhận món", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "OrderInfoCard", + "name": "OrderInfoCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 20, + "layout": "vertical", + "gap": 12, + "padding": 24, + "children": [ + { + "type": "text", + "id": "OrderInfoLabel", + "name": "OrderInfoLabel", + "fill": "$text-secondary", + "content": "Mã đơn hàng", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderInfoId", + "name": "OrderInfoId", + "fill": "$text-primary", + "content": "#EK-0087", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "CustomerNameRow", + "name": "CustomerNameRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CustomerNameLabel", + "name": "CustomerNameLabel", + "fill": "$text-secondary", + "content": "Tên khách", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "CustomerNameValue", + "name": "CustomerNameValue", + "fill": "$text-primary", + "content": "Nguyễn Văn A", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "OrderTypeRow", + "name": "OrderTypeRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OrderTypeLabel", + "name": "OrderTypeLabel", + "fill": "$text-secondary", + "content": "Hình thức", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderTypeValue", + "name": "OrderTypeValue", + "fill": "$text-primary", + "content": "Tại quán", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "OrderInfoDivider", + "name": "OrderInfoDivider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "text", + "id": "ItemsSummary", + "name": "ItemsSummary", + "fill": "$text-primary", + "content": "3 mon - 130,000d", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PickupNumberCard", + "name": "PickupNumberCard", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 20, + "layout": "vertical", + "gap": 4, + "padding": [ + 24, + 20 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PickupNumberLabel", + "name": "PickupNumberLabel", + "fill": "$bg-surface", + "content": "Số thứ tự", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PickupNumberValue", + "name": "PickupNumberValue", + "fill": "$bg-surface", + "content": "087", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 64, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "RatingSection", + "name": "RatingSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "gap": 12, + "padding": 20, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RatingSectionTitle", + "name": "RatingSectionTitle", + "fill": "$text-primary", + "content": "Đánh giá trải nghiệm", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "StarRow", + "name": "StarRow", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RatingStar1", + "name": "RatingStar1", + "width": 32, + "height": 32, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "RatingStar2", + "name": "RatingStar2", + "width": 32, + "height": 32, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "RatingStar3", + "name": "RatingStar3", + "width": 32, + "height": 32, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "RatingStar4", + "name": "RatingStar4", + "width": 32, + "height": 32, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "RatingStar5", + "name": "RatingStar5", + "width": 32, + "height": 32, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "RatingTextArea", + "name": "RatingTextArea", + "width": "fill_container", + "height": 72, + "fill": "$bg-surface", + "cornerRadius": 12, + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "RatingPlaceholder", + "name": "RatingPlaceholder", + "fill": "$text-tertiary", + "content": "Chia sẻ cảm nhận của bạn...", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CompleteBottomBar", + "name": "CompleteBottomBar", + "width": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "gap": 10, + "padding": [ + 12, + 20, + 20, + 20 + ], + "children": [ + { + "type": "frame", + "id": "OrderMoreBtn", + "name": "OrderMoreBtn", + "width": "fill_container", + "height": 52, + "fill": "$orange-primary", + "cornerRadius": 30, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OrderMoreText", + "name": "OrderMoreText", + "fill": "$bg-surface", + "content": "Đặt thêm món", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "GoHomeBtn", + "name": "GoHomeBtn", + "width": "fill_container", + "height": 44, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GoHomeText", + "name": "GoHomeText", + "fill": "$text-primary", + "content": "Về trang chủ", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-tracking.pen b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-tracking.pen new file mode 100644 index 00000000..059c5f11 --- /dev/null +++ b/pencil-design/src/pages/eggymon-kitchen-landingpage/pos/order-tracking.pen @@ -0,0 +1,787 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "OrderTrackingScreen", + "x": 0, + "y": 0, + "name": "POS/OrderTracking", + "reusable": true, + "width": 390, + "height": 903, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TrackTopBar", + "name": "TrackTopBar", + "width": "fill_container", + "height": 56, + "fill": "$bg-surface", + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrackBackIcon", + "name": "TrackBackIcon", + "width": 24, + "height": 24, + "iconFontName": "chevron-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "TrackTopTitle", + "name": "TrackTopTitle", + "fill": "$text-primary", + "content": "Theo dõi đơn hàng", + "fontFamily": "Poppins", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "TrackPhoneIcon", + "name": "TrackPhoneIcon", + "width": 24, + "height": 24, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "TrackScrollContent", + "name": "TrackScrollContent", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 16, + 16, + 24, + 16 + ], + "children": [ + { + "type": "frame", + "id": "OrderIdRow", + "name": "OrderIdRow", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OrderIdText", + "name": "OrderIdText", + "fill": "$text-primary", + "content": "#EK-0087", + "fontFamily": "Poppins", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "OrderTimeText", + "name": "OrderTimeText", + "fill": "$text-secondary", + "content": "14:32 - 10/02/2025", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "StatusTimeline", + "name": "StatusTimeline", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "padding": 20, + "children": [ + { + "type": "frame", + "id": "Step1", + "name": "Step1", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Step1DotCol", + "name": "Step1DotCol", + "width": 24, + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step1Dot", + "name": "Step1Dot", + "width": 24, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step1Check", + "name": "Step1Check", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + }, + { + "type": "frame", + "id": "Step1Line", + "name": "Step1Line", + "width": 2, + "height": 28, + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Step1Content", + "name": "Step1Content", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step1Title", + "name": "Step1Title", + "fill": "$text-primary", + "content": "Đã nhận đơn", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Step1Time", + "name": "Step1Time", + "fill": "$text-secondary", + "content": "14:32", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step2", + "name": "Step2", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Step2DotCol", + "name": "Step2DotCol", + "width": 24, + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step2Dot", + "name": "Step2Dot", + "width": 24, + "height": 24, + "fill": "$success", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step2Check", + "name": "Step2Check", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + }, + { + "type": "frame", + "id": "Step2Line", + "name": "Step2Line", + "width": 2, + "height": 28, + "fill": "$success" + } + ] + }, + { + "type": "frame", + "id": "Step2Content", + "name": "Step2Content", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step2Title", + "name": "Step2Title", + "fill": "$text-primary", + "content": "Đã xác nhận", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Step2Time", + "name": "Step2Time", + "fill": "$text-secondary", + "content": "14:33", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step3", + "name": "Step3", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Step3DotCol", + "name": "Step3DotCol", + "width": 24, + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step3Dot", + "name": "Step3Dot", + "width": 24, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Step3ActiveIcon", + "name": "Step3ActiveIcon", + "width": 16, + "height": 16, + "iconFontName": "loader", + "iconFontFamily": "lucide", + "fill": "$bg-surface" + } + ] + }, + { + "type": "frame", + "id": "Step3Line", + "name": "Step3Line", + "width": 2, + "height": 28, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "id": "Step3Content", + "name": "Step3Content", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step3Title", + "name": "Step3Title", + "fill": "$orange-primary", + "content": "Đang chế biến", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Step3Time", + "name": "Step3Time", + "fill": "$text-secondary", + "content": "Dự kiến 10-15 phút", + "fontFamily": "Poppins", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step4", + "name": "Step4", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Step4DotCol", + "name": "Step4DotCol", + "width": 24, + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step4Dot", + "name": "Step4Dot", + "width": 24, + "height": 24, + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center" + }, + { + "type": "frame", + "id": "Step4Line", + "name": "Step4Line", + "width": 2, + "height": 28, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "id": "Step4Content", + "name": "Step4Content", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step4Title", + "name": "Step4Title", + "fill": "$text-tertiary", + "content": "Sẵn sàng lấy", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Step5", + "name": "Step5", + "width": "fill_container", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "Step5DotCol", + "name": "Step5DotCol", + "width": 24, + "layout": "vertical", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Step5Dot", + "name": "Step5Dot", + "width": 24, + "height": 24, + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center" + } + ] + }, + { + "type": "frame", + "id": "Step5Content", + "name": "Step5Content", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Step5Title", + "name": "Step5Title", + "fill": "$text-tertiary", + "content": "Hoàn thành", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "EstimatedTimeCard", + "name": "EstimatedTimeCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "gap": 8, + "padding": 20, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EstClockIcon", + "name": "EstClockIcon", + "width": 20, + "height": 20, + "iconFontName": "timer", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "EstLabel", + "name": "EstLabel", + "fill": "$text-secondary", + "content": "Dự kiến hoàn thành", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "EstTime", + "name": "EstTime", + "fill": "$orange-primary", + "content": "14:47", + "fontFamily": "Poppins", + "fontSize": 36, + "fontWeight": "700" + }, + { + "type": "text", + "id": "EstRemaining", + "name": "EstRemaining", + "fill": "$text-tertiary", + "content": "Còn khoảng 12 phút", + "fontFamily": "Poppins", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ProgressBarBg", + "name": "ProgressBarBg", + "width": "fill_container", + "height": 6, + "fill": "$border-subtle", + "cornerRadius": 3, + "children": [ + { + "type": "frame", + "id": "ProgressBarFill", + "name": "ProgressBarFill", + "width": "fill_container", + "height": 6, + "fill": "$orange-primary", + "cornerRadius": 3 + } + ] + } + ] + }, + { + "type": "frame", + "id": "OrderDetailsCard", + "name": "OrderDetailsCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "layout": "vertical", + "gap": 12, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "text", + "id": "OrderDetailsTitle", + "name": "OrderDetailsTitle", + "fill": "$text-primary", + "content": "Chi tiết đơn hàng", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "OrderDetailItem1", + "name": "OrderDetailItem1", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "ODItem1Name", + "name": "ODItem1Name", + "fill": "$text-primary", + "content": "Cơm trứng chiên x2", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ODItem1Price", + "name": "ODItem1Price", + "fill": "$text-primary", + "content": "100,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "OrderDetailItem2", + "name": "OrderDetailItem2", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "ODItem2Name", + "name": "ODItem2Name", + "fill": "$text-primary", + "content": "Trà sữa oolong x1", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ODItem2Price", + "name": "ODItem2Price", + "fill": "$text-primary", + "content": "40,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "OrderDetailItem3", + "name": "OrderDetailItem3", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "ODItem3Name", + "name": "ODItem3Name", + "fill": "$text-primary", + "content": "Bánh mì trứng ốp la x1", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ODItem3Price", + "name": "ODItem3Price", + "fill": "$text-primary", + "content": "25,000d", + "fontFamily": "Poppins", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "OrderDetailDivider", + "name": "OrderDetailDivider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "OrderDetailTotal", + "name": "OrderDetailTotal", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "ODTotalLabel", + "name": "ODTotalLabel", + "fill": "$text-primary", + "content": "Tổng cộng", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ODTotalValue", + "name": "ODTotalValue", + "fill": "$orange-primary", + "content": "130,000d", + "fontFamily": "Poppins", + "fontSize": 16, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CancelOrderBtn", + "name": "CancelOrderBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CancelOrderText", + "name": "CancelOrderText", + "fill": "$error", + "content": "Hủy đơn", + "fontFamily": "Poppins", + "fontSize": 15, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#FAF8F4" + }, + "bg-surface": { + "type": "color", + "value": "#FFFFFF" + }, + "bg-elevated": { + "type": "color", + "value": "#FFF8F0" + }, + "bg-interactive": { + "type": "color", + "value": "#F5EDE4" + }, + "brown-primary": { + "type": "color", + "value": "#6B4423" + }, + "brown-dark": { + "type": "color", + "value": "#4A2E15" + }, + "orange-primary": { + "type": "color", + "value": "#FF6B35" + }, + "orange-light": { + "type": "color", + "value": "#FF8A5C" + }, + "text-primary": { + "type": "color", + "value": "#2C2C2C" + }, + "text-secondary": { + "type": "color", + "value": "#6B6B6B" + }, + "text-tertiary": { + "type": "color", + "value": "#9B9B9B" + }, + "border-default": { + "type": "color", + "value": "#E5DDD4" + }, + "border-subtle": { + "type": "color", + "value": "#F0EAE2" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#F59E0B" + }, + "error": { + "type": "color", + "value": "#EF4444" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/onboarding-products.pen b/pencil-design/src/pages/tPOS/admin/onboarding-products.pen index c9451f24..5ce4b72f 100644 --- a/pencil-design/src/pages/tPOS/admin/onboarding-products.pen +++ b/pencil-design/src/pages/tPOS/admin/onboarding-products.pen @@ -2,145 +2,1158 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "OB3Root", "name": "Admin/OnboardingProducts", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "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"} - ]} - ]} - ]} - ]} - ]} + { + "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, + "fontFamily": "Roboto" + } + ] + }, + { + "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, + "fontFamily": "Roboto" + } + ] + }, + { + "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, + "fontFamily": "Roboto" + } + ] + }, + { + "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"}} -} + "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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/onboarding-store.pen b/pencil-design/src/pages/tPOS/admin/onboarding-store.pen index a13117c1..b358074d 100644 --- a/pencil-design/src/pages/tPOS/admin/onboarding-store.pen +++ b/pencil-design/src/pages/tPOS/admin/onboarding-store.pen @@ -12,139 +12,921 @@ "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", + "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": "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], + "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"} - ]} - ]} - ]} + { + "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, + "fontFamily": "Roboto" + }, + { + "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, + "fontFamily": "Roboto" + }, + { + "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, + "fontFamily": "Roboto" + }, + { + "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, + "fontFamily": "Roboto" + }, + { + "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, + "fontFamily": "Roboto" + }, + { + "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"} + "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" + } } -} +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/product-catalog.pen b/pencil-design/src/pages/tPOS/admin/product-catalog.pen index ff7d5c6e..5af19ae8 100644 --- a/pencil-design/src/pages/tPOS/admin/product-catalog.pen +++ b/pencil-design/src/pages/tPOS/admin/product-catalog.pen @@ -938,7 +938,8 @@ "type": "text", "id": "PCCat1Emoji", "content": "☕", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -986,7 +987,8 @@ "type": "text", "id": "PCCat2Emoji", "content": "🧋", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -1033,7 +1035,8 @@ "type": "text", "id": "PCCat3Emoji", "content": "🧃", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -1080,7 +1083,8 @@ "type": "text", "id": "PCCat4Emoji", "content": "🍰", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -1127,7 +1131,8 @@ "type": "text", "id": "PCCat5Emoji", "content": "🧊", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -1174,7 +1179,8 @@ "type": "text", "id": "PCCat6Emoji", "content": "🍕", - "fontSize": 16 + "fontSize": 16, + "fontFamily": "Roboto" }, { "type": "text", @@ -1314,7 +1320,8 @@ "type": "text", "id": "PCP1ImgT", "content": "☕", - "fontSize": 48 + "fontSize": 48, + "fontFamily": "Roboto" } ] }, @@ -1416,7 +1423,8 @@ "type": "text", "id": "PCP2ImgT", "content": "🍵", - "fontSize": 48 + "fontSize": 48, + "fontFamily": "Roboto" } ] }, @@ -1518,7 +1526,8 @@ "type": "text", "id": "PCP3ImgT", "content": "🥤", - "fontSize": 48 + "fontSize": 48, + "fontFamily": "Roboto" } ] }, @@ -1620,7 +1629,8 @@ "type": "text", "id": "PCP4ImgT", "content": "🍫", - "fontSize": 48 + "fontSize": 48, + "fontFamily": "Roboto" } ] }, diff --git a/pencil-design/src/pages/tPOS/admin/store-create.pen b/pencil-design/src/pages/tPOS/admin/store-create.pen index 80e33fe9..dcc27f1a 100644 --- a/pencil-design/src/pages/tPOS/admin/store-create.pen +++ b/pencil-design/src/pages/tPOS/admin/store-create.pen @@ -1314,7 +1314,8 @@ "type": "text", "id": "SCBiz1E", "content": "☕", - "fontSize": 24 + "fontSize": 24, + "fontFamily": "Roboto" }, { "type": "text", @@ -1343,7 +1344,8 @@ "type": "text", "id": "SCBiz2E", "content": "🍽️", - "fontSize": 24 + "fontSize": 24, + "fontFamily": "Roboto" }, { "type": "text", @@ -1372,7 +1374,8 @@ "type": "text", "id": "SCBiz3E", "content": "🎤", - "fontSize": 24 + "fontSize": 24, + "fontFamily": "Roboto" }, { "type": "text", @@ -1401,7 +1404,8 @@ "type": "text", "id": "SCBiz4E", "content": "💆", - "fontSize": 24 + "fontSize": 24, + "fontFamily": "Roboto" }, { "type": "text", @@ -1430,7 +1434,8 @@ "type": "text", "id": "SCBiz5E", "content": "🛒", - "fontSize": 24 + "fontSize": 24, + "fontFamily": "Roboto" }, { "type": "text",