diff --git a/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen b/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen index 9d8db0a5..c174a426 100644 --- a/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen +++ b/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen @@ -2,148 +2,1702 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "AttendDash", "name": "Admin/AttendanceDashboard", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "type": "frame", + "id": "AttendDash", + "name": "Admin/AttendanceDashboard", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "clip": true, "children": [ - {"type": "frame", "id": "ATSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "ATLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATLogoIc", "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": "ATLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "ATLogoGr", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ATLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "ATLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ATNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "ATNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "ATNavAtt", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ATNavAttI", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ATNavAttT", "fill": "#FFFFFF", "content": "Chấm công", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ATUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ATUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ATUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ATUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "ATUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "ATMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "ATHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ATTitle", "fill": "$text-primary", "content": "Tổng hợp chấm công", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "ATActions", "gap": 12, "children": [ - {"type": "frame", "id": "ATDateR", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ATDateI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ATDateT", "fill": "$text-primary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ATExport", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ATExpI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ATExpT", "fill": "$text-secondary", "content": "Export", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "ATContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [ - {"type": "frame", "id": "ATStats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "ATS1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ATS1L", "fill": "$text-tertiary", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ATS1V", "fill": "#22C55E", "content": "85%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "frame", "id": "ATS1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ - {"type": "frame", "id": "ATS1Fl", "width": 204, "height": 6, "fill": "#22C55E", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "ATS2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ATS2L", "fill": "$text-tertiary", "content": "Đi muộn", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ATS2V", "fill": "#F59E0B", "content": "10%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "frame", "id": "ATS2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ - {"type": "frame", "id": "ATS2Fl", "width": 24, "height": 6, "fill": "#F59E0B", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "ATS3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ATS3L", "fill": "$text-tertiary", "content": "Vắng mặt", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ATS3V", "fill": "#EF4444", "content": "5%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "frame", "id": "ATS3Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ - {"type": "frame", "id": "ATS3Fl", "width": 12, "height": 6, "fill": "#EF4444", "cornerRadius": 100} - ]} - ]} - ]}, - {"type": "frame", "id": "ATTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "ATTHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ATTH1", "width": 180, "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH2", "width": 120, "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH3", "width": 100, "fill": "$text-tertiary", "content": "Giờ vào", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH4", "width": 100, "fill": "$text-tertiary", "content": "Giờ ra", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH5", "width": 80, "fill": "$text-tertiary", "content": "Tổng giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH6", "width": 80, "fill": "$text-tertiary", "content": "OT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ATTH7", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ATR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR1N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "ATR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "ATR1D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR1In", "width": 100, "fill": "$text-primary", "content": "05:58", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR1Out", "width": 100, "fill": "$text-primary", "content": "14:05", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR1H", "width": 80, "fill": "$text-primary", "content": "8h 07m", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR1OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "ATR1St", "children": [{"type": "frame", "id": "ATR1StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR1StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "ATR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR2N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "ATR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "ATR2D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR2In", "width": 100, "fill": "#F59E0B", "content": "14:23", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "ATR2Out", "width": 100, "fill": "$text-primary", "content": "22:15", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR2H", "width": 80, "fill": "$text-primary", "content": "7h 52m", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR2OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "ATR2St", "children": [{"type": "frame", "id": "ATR2StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR2StT", "fill": "#F59E0B", "content": "Muộn 23p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "ATR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR3N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "ATR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "ATR3D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR3In", "width": 100, "fill": "$text-primary", "content": "21:55", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR3Out", "width": 100, "fill": "$text-primary", "content": "06:10", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR3H", "width": 80, "fill": "$text-primary", "content": "8h 15m", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR3OT", "width": 80, "fill": "$orange-primary", "content": "0h 15m", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "ATR3St", "children": [{"type": "frame", "id": "ATR3StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR3StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "ATR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR4N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "ATR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "ATR4D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR4In", "width": 100, "fill": "#EF4444", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR4Out", "width": 100, "fill": "#EF4444", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR4H", "width": 80, "fill": "#EF4444", "content": "0h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR4OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "ATR4St", "children": [{"type": "frame", "id": "ATR4StB", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR4StT", "fill": "#EF4444", "content": "Vắng mặt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "ATR5", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR5N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ATR5Av", "width": 32, "height": 32, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR5AvT", "fill": "#FFFFFF", "content": "VT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "ATR5Nm", "fill": "$text-primary", "content": "Võ Thảo", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "ATR5D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR5In", "width": 100, "fill": "$text-primary", "content": "06:02", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR5Out", "width": 100, "fill": "$text-primary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR5H", "width": 80, "fill": "$text-primary", "content": "7h 58m", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ATR5OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "ATR5St", "children": [{"type": "frame", "id": "ATR5StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR5StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "ATSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ATLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATLogoIc", + "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": "ATLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "ATLogoGr", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ATLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ATLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "ATNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ATNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ATNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ATNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "ATNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ATNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ATNavStaffT", + "fill": "#FFFFFF", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "ATNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ATNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ATNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ATNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ATNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ATNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ATNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ATNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATUsr", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATUsrAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATUsrAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ATUsrInf", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ATUsrN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATUsrR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ATHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATTitle", + "fill": "$text-primary", + "content": "Tổng hợp chấm công", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "ATActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "ATDateR", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATDateI", + "width": 16, + "height": 16, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATDateT", + "fill": "$text-primary", + "content": "01/02 - 11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "ATExport", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ATExpI", + "width": 16, + "height": 16, + "iconFontName": "download", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ATExpT", + "fill": "$text-secondary", + "content": "Export", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "ATStats", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "ATS1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ATS1L", + "fill": "$text-tertiary", + "content": "Đúng giờ", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "ATS1V", + "fill": "#22C55E", + "content": "85%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "ATS1Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 100, + "children": [ + { + "type": "frame", + "id": "ATS1Fl", + "width": 204, + "height": 6, + "fill": "#22C55E", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATS2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ATS2L", + "fill": "$text-tertiary", + "content": "Đi muộn", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "ATS2V", + "fill": "#F59E0B", + "content": "10%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "ATS2Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 100, + "children": [ + { + "type": "frame", + "id": "ATS2Fl", + "width": 24, + "height": 6, + "fill": "#F59E0B", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATS3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ATS3L", + "fill": "$text-tertiary", + "content": "Vắng mặt", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "ATS3V", + "fill": "#EF4444", + "content": "5%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "ATS3Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 100, + "children": [ + { + "type": "frame", + "id": "ATS3Fl", + "width": 12, + "height": 6, + "fill": "#EF4444", + "cornerRadius": 100 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATTable", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ATTHead", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ATTH1", + "width": 180, + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH2", + "width": 120, + "fill": "$text-tertiary", + "content": "Ngày", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH3", + "width": 100, + "fill": "$text-tertiary", + "content": "Giờ vào", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH4", + "width": 100, + "fill": "$text-tertiary", + "content": "Giờ ra", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH5", + "width": 80, + "fill": "$text-tertiary", + "content": "Tổng giờ", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH6", + "width": 80, + "fill": "$text-tertiary", + "content": "OT", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATTH7", + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ATR1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR1N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR1Av", + "width": 32, + "height": 32, + "fill": "#8B5CF6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATR1AvT", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ATR1Nm", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "ATR1D", + "width": 120, + "fill": "$text-primary", + "content": "11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR1In", + "width": 100, + "fill": "$text-primary", + "content": "05:58", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR1Out", + "width": 100, + "fill": "$text-primary", + "content": "14:05", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR1H", + "width": 80, + "fill": "$text-primary", + "content": "8h 07m", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR1OT", + "width": 80, + "fill": "$text-tertiary", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "ATR1St", + "children": [ + { + "type": "frame", + "id": "ATR1StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ATR1StT", + "fill": "#22C55E", + "content": "Đúng giờ", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATR2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR2N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR2Av", + "width": 32, + "height": 32, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATR2AvT", + "fill": "#FFFFFF", + "content": "LM", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ATR2Nm", + "fill": "$text-primary", + "content": "Lê Minh", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "ATR2D", + "width": 120, + "fill": "$text-primary", + "content": "11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR2In", + "width": 100, + "fill": "#F59E0B", + "content": "14:23", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ATR2Out", + "width": 100, + "fill": "$text-primary", + "content": "22:15", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR2H", + "width": 80, + "fill": "$text-primary", + "content": "7h 52m", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR2OT", + "width": 80, + "fill": "$text-tertiary", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "ATR2St", + "children": [ + { + "type": "frame", + "id": "ATR2StB", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ATR2StT", + "fill": "#F59E0B", + "content": "Muộn 23p", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATR3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR3N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR3Av", + "width": 32, + "height": 32, + "fill": "#EF4444", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATR3AvT", + "fill": "#FFFFFF", + "content": "PH", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ATR3Nm", + "fill": "$text-primary", + "content": "Phạm Hương", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "ATR3D", + "width": 120, + "fill": "$text-primary", + "content": "11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR3In", + "width": 100, + "fill": "$text-primary", + "content": "21:55", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR3Out", + "width": 100, + "fill": "$text-primary", + "content": "06:10", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR3H", + "width": 80, + "fill": "$text-primary", + "content": "8h 15m", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR3OT", + "width": 80, + "fill": "$orange-primary", + "content": "0h 15m", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "ATR3St", + "children": [ + { + "type": "frame", + "id": "ATR3StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ATR3StT", + "fill": "#22C55E", + "content": "Đúng giờ", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATR4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR4N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR4Av", + "width": 32, + "height": 32, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATR4AvT", + "fill": "#FFFFFF", + "content": "NB", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ATR4Nm", + "fill": "$text-primary", + "content": "Nguyễn Bảo", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "ATR4D", + "width": 120, + "fill": "$text-primary", + "content": "11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR4In", + "width": 100, + "fill": "#EF4444", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR4Out", + "width": 100, + "fill": "#EF4444", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR4H", + "width": 80, + "fill": "#EF4444", + "content": "0h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR4OT", + "width": 80, + "fill": "$text-tertiary", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "ATR4St", + "children": [ + { + "type": "frame", + "id": "ATR4StB", + "fill": "#EF444420", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ATR4StT", + "fill": "#EF4444", + "content": "Vắng mặt", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ATR5", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR5N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ATR5Av", + "width": 32, + "height": 32, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ATR5AvT", + "fill": "#FFFFFF", + "content": "VT", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ATR5Nm", + "fill": "$text-primary", + "content": "Võ Thảo", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "ATR5D", + "width": 120, + "fill": "$text-primary", + "content": "11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR5In", + "width": 100, + "fill": "$text-primary", + "content": "06:02", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR5Out", + "width": 100, + "fill": "$text-primary", + "content": "14:00", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR5H", + "width": 80, + "fill": "$text-primary", + "content": "7h 58m", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ATR5OT", + "width": 80, + "fill": "$text-tertiary", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "ATR5St", + "children": [ + { + "type": "frame", + "id": "ATR5StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ATR5StT", + "fill": "#22C55E", + "content": "Đúng giờ", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ], - "variables": {"bg-elevated":{"type":"color","value":"#1A1A1D"},"bg-interactive":{"type":"color","value":"#2A2A2E"},"bg-page":{"type":"color","value":"#0A0A0B"},"border-default":{"type":"color","value":"#2A2A2E"},"border-subtle":{"type":"color","value":"#1F1F23"},"orange-primary":{"type":"color","value":"#FF5C00"},"text-primary":{"type":"color","value":"#FFFFFF"},"text-secondary":{"type":"color","value":"#ADADB0"},"text-tertiary":{"type":"color","value":"#8B8B90"}} -} + "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/audit-log.pen b/pencil-design/src/pages/tPOS/admin/audit-log.pen index 7a00d919..7b107f79 100644 --- a/pencil-design/src/pages/tPOS/admin/audit-log.pen +++ b/pencil-design/src/pages/tPOS/admin/audit-log.pen @@ -12,234 +12,1888 @@ "clip": true, "children": [ { - "type": "frame", "id": "ALSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "ALSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "ALSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "ALLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ALLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "ALLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ALSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "ALNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "ALNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ALNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "ALNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ALNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "ALNavLog", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALNavLogI", "width": 20, "height": 20, "iconFontName": "scroll-text", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ALNavLogT", "fill": "#FFFFFF", "content": "Nhật ký", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ALNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ALNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ALNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ALNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "ALSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ALUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ALUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "ALUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "ALSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "ALLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ALLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ALLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "ALNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ALNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ALNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "ALNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ALNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "ALNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ALNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ALNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ALNavSetT", + "fill": "#FFFFFF", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "ALSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ALUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ALUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "ALUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "ALMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "ALMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "ALHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ALHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "ALBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "ALBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ALBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ALBread2", "fill": "$orange-primary", "content": "Nhật ký", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "ALHeaderTitle", "fill": "$text-primary", "content": "Nhật ký hoạt động", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ALHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "ALDateRange", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALDateI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "ALDateT", "fill": "$text-primary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "ALDateChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "ALFilterUser", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALFilterUserI", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ALFilterUserT", "fill": "$text-secondary", "content": "Người dùng", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "ALFilterUserChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "ALFilterAction", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ALFilterActI", "width": 16, "height": 16, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ALFilterActT", "fill": "$text-secondary", "content": "Hành động", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "ALFilterActChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 0, "clip": true, "children": [ - {"type": "frame", "id": "ALTableHead", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": [10, 10, 0, 0], "padding": [14, 20], "children": [ - {"type": "text", "id": "ALTh1", "width": 160, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "text", "id": "ALTh2", "width": 160, "fill": "$text-tertiary", "content": "Người dùng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "text", "id": "ALTh3", "width": "fill_container", "fill": "$text-tertiary", "content": "Hành động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "text", "id": "ALTh4", "width": 140, "fill": "$text-tertiary", "content": "Địa chỉ IP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "text", "id": "ALTh5", "width": 100, "fill": "$text-tertiary", "content": "Module", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ALRow1", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR1C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:45:12", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR1C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR1Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR1AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR1Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR1C3", "width": "fill_container", "fill": "$text-primary", "content": "Đăng nhập hệ thống", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR1C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR1Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR1BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR1BadgeT", "fill": "#3B82F6", "content": "Xác thực", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow2", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR2C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:32:05", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR2C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR2Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR2AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR2Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR2C3", "width": "fill_container", "fill": "$text-primary", "content": "Thay đổi giá SP \"Cà phê sữa đá\"", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR2C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR2Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR2BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR2BadgeT", "fill": "#F59E0B", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow3", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR3C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 09:15:30", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR3C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR3Av", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR3AvT", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR3Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR3C3", "width": "fill_container", "fill": "#EF4444", "content": "Void đơn hàng #1234", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "ALR3C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.102", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR3Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR3BadgeF", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR3BadgeT", "fill": "#EF4444", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow4", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR4C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:55:18", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR4C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR4Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR4AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR4Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR4C3", "width": "fill_container", "fill": "$text-primary", "content": "Thêm nhân viên \"Trần Văn B\"", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR4C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR4Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR4BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR4BadgeT", "fill": "#22C55E", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow5", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR5C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:40:22", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR5C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR5Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR5AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR5Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR5C3", "width": "fill_container", "fill": "$text-primary", "content": "Export báo cáo doanh thu T1/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR5C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR5Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR5BadgeF", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR5BadgeT", "fill": "#8B5CF6", "content": "Báo cáo", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow6", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR6C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:20:10", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR6C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR6Av", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR6AvT", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR6Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR6C3", "width": "fill_container", "fill": "$text-primary", "content": "Cập nhật menu danh mục \"Đồ uống\"", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR6C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.102", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR6Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR6BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR6BadgeT", "fill": "#F59E0B", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow7", "width": "fill_container", "fill": "$bg-elevated", "padding": [14, 20], "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "ALR7C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 08:05:33", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR7C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR7Av", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR7AvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR7Name", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR7C3", "width": "fill_container", "fill": "$text-primary", "content": "Thay đổi quyền role \"Thu ngân\"", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR7C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.100", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR7Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR7BadgeF", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR7BadgeT", "fill": "$orange-primary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ALRow8", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": [0, 0, 10, 10], "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "ALR8C1", "width": 160, "fill": "$text-secondary", "content": "11/02/2026 07:50:45", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR8C2", "width": 160, "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "ALR8Av", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ALR8AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ALR8Name", "fill": "$text-primary", "content": "Ngọc Anh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "ALR8C3", "width": "fill_container", "fill": "$text-primary", "content": "Đăng nhập hệ thống", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ALR8C4", "width": 140, "fill": "$text-tertiary", "content": "192.168.1.101", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "ALR8Badge", "width": 100, "children": [ - {"type": "frame", "id": "ALR8BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ALR8BadgeT", "fill": "#3B82F6", "content": "Xác thực", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "ALHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "ALBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALBread1", + "fill": "$text-tertiary", + "content": "Hệ thống", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "ALBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "ALBread2", + "fill": "$orange-primary", + "content": "Nhật ký", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "ALHeaderTitle", + "fill": "$text-primary", + "content": "Nhật ký hoạt động", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ALHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "ALDateRange", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALDateI", + "width": 16, + "height": 16, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "ALDateT", + "fill": "$text-primary", + "content": "01/02 - 11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "ALDateChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "ALFilterUser", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALFilterUserI", + "width": 16, + "height": 16, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALFilterUserT", + "fill": "$text-secondary", + "content": "Người dùng", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "ALFilterUserChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "ALFilterAction", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ALFilterActI", + "width": 16, + "height": 16, + "iconFontName": "filter", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ALFilterActT", + "fill": "$text-secondary", + "content": "Hành động", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "ALFilterActChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALContent", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 0, + "clip": true, + "children": [ + { + "type": "frame", + "id": "ALTableHead", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [ + 10, + 10, + 0, + 0 + ], + "padding": [ + 14, + 20 + ], + "children": [ + { + "type": "text", + "id": "ALTh1", + "width": 160, + "fill": "$text-tertiary", + "content": "Thời gian", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ALTh2", + "width": 160, + "fill": "$text-tertiary", + "content": "Người dùng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ALTh3", + "width": "fill_container", + "fill": "$text-tertiary", + "content": "Hành động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ALTh4", + "width": 140, + "fill": "$text-tertiary", + "content": "Địa chỉ IP", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ALTh5", + "width": 100, + "fill": "$text-tertiary", + "content": "Module", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ALRow1", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR1C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 09:45:12", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR1C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR1Av", + "width": 28, + "height": 28, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR1AvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR1Name", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR1C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Đăng nhập hệ thống", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR1C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.100", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR1Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR1BadgeF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR1BadgeT", + "fill": "#3B82F6", + "content": "Xác thực", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow2", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR2C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 09:32:05", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR2C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR2Av", + "width": 28, + "height": 28, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR2AvT", + "fill": "#FFFFFF", + "content": "NA", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR2Name", + "fill": "$text-primary", + "content": "Ngọc Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR2C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Thay đổi giá SP \"Cà phê sữa đá\"", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR2C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.101", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR2Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR2BadgeF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR2BadgeT", + "fill": "#F59E0B", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow3", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR3C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 09:15:30", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR3C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR3Av", + "width": 28, + "height": 28, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR3AvT", + "fill": "#FFFFFF", + "content": "MT", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR3Name", + "fill": "$text-primary", + "content": "Minh Tuấn", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR3C3", + "width": "fill_container", + "fill": "#EF4444", + "content": "Void đơn hàng #1234", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ALR3C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.102", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR3Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR3BadgeF", + "fill": "#EF444420", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR3BadgeT", + "fill": "#EF4444", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow4", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR4C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 08:55:18", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR4C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR4Av", + "width": 28, + "height": 28, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR4AvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR4Name", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR4C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Thêm nhân viên \"Trần Văn B\"", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR4C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.100", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR4Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR4BadgeF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR4BadgeT", + "fill": "#22C55E", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow5", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR5C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 08:40:22", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR5C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR5Av", + "width": 28, + "height": 28, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR5AvT", + "fill": "#FFFFFF", + "content": "NA", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR5Name", + "fill": "$text-primary", + "content": "Ngọc Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR5C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Export báo cáo doanh thu T1/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR5C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.101", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR5Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR5BadgeF", + "fill": "#8B5CF620", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR5BadgeT", + "fill": "#8B5CF6", + "content": "Báo cáo", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow6", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR6C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 08:20:10", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR6C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR6Av", + "width": 28, + "height": 28, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR6AvT", + "fill": "#FFFFFF", + "content": "MT", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR6Name", + "fill": "$text-primary", + "content": "Minh Tuấn", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR6C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Cập nhật menu danh mục \"Đồ uống\"", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR6C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.102", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR6Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR6BadgeF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR6BadgeT", + "fill": "#F59E0B", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow7", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "ALR7C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 08:05:33", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR7C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR7Av", + "width": 28, + "height": 28, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR7AvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR7Name", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR7C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Thay đổi quyền role \"Thu ngân\"", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR7C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.100", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR7Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR7BadgeF", + "fill": "#FF5C0020", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR7BadgeT", + "fill": "$orange-primary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ALRow8", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": [ + 0, + 0, + 10, + 10 + ], + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR8C1", + "width": 160, + "fill": "$text-secondary", + "content": "11/02/2026 07:50:45", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR8C2", + "width": 160, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ALR8Av", + "width": 28, + "height": 28, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ALR8AvT", + "fill": "#FFFFFF", + "content": "NA", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ALR8Name", + "fill": "$text-primary", + "content": "Ngọc Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "ALR8C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Đăng nhập hệ thống", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "ALR8C4", + "width": 140, + "fill": "$text-tertiary", + "content": "192.168.1.101", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ALR8Badge", + "width": 100, + "children": [ + { + "type": "frame", + "id": "ALR8BadgeF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "ALR8BadgeT", + "fill": "#3B82F6", + "content": "Xác thực", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/customer-database.pen b/pencil-design/src/pages/tPOS/admin/customer-database.pen index 0db377b6..fab746d6 100644 --- a/pencil-design/src/pages/tPOS/admin/customer-database.pen +++ b/pencil-design/src/pages/tPOS/admin/customer-database.pen @@ -12,220 +12,1727 @@ "clip": true, "children": [ { - "type": "frame", "id": "CDSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "CDSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "CDSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "CDLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CDLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "CDLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "CDSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "CDNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "CDNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CDNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "CDNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CDNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CDNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CDNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CDNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "CDNavCust", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavCustI", "width": 20, "height": 20, "iconFontName": "contact", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CDNavCustT", "fill": "#FFFFFF", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CDNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CDNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "CDNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CDNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CDSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CDUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CDUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "CDSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "CDLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CDLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CDLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CDSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CDNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CDNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CDNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "CDNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CDNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CDNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CDNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CDNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CDNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CDNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "CDNavCustT", + "fill": "#FFFFFF", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "CDNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CDNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CDNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CDSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CDUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CDUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "CDMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "CDMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "CDHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CDHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "CDBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CDBread1", "fill": "$text-tertiary", "content": "Kinh doanh", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "CDBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "CDBread2", "fill": "$orange-primary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "CDHeaderTitle", "fill": "$text-primary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CDHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDSearchBox", "width": 240, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CDSearchP", "fill": "$text-tertiary", "content": "Tìm khách hàng...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CDAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CDAddT", "fill": "#FFFFFF", "content": "Thêm KH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "CDContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [ - {"type": "frame", "id": "CDTabs", "width": "fill_container", "gap": 0, "children": [ - {"type": "frame", "id": "CDTab1", "padding": [10, 20], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "CDTab1T", "fill": "$orange-primary", "content": "Tất cả (156)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CDTab2", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "CDTab2T", "fill": "$text-tertiary", "content": "VIP (23)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDTab3", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "CDTab3T", "fill": "$text-tertiary", "content": "Thường xuyên (45)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDTab4", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "CDTab4T", "fill": "$text-tertiary", "content": "Mới (88)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CDTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "CDTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "CDTh1", "width": 200, "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh2", "width": 130, "fill": "$text-tertiary", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh3", "width": 100, "fill": "$text-tertiary", "content": "Nhóm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh4", "width": 130, "fill": "$text-tertiary", "content": "Tổng chi tiêu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh5", "width": 80, "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh6", "width": 80, "fill": "$text-tertiary", "content": "Điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CDTh7", "width": 110, "fill": "$text-tertiary", "content": "Lần cuối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CDRow1", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR1Name", "width": 200, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR1Av", "width": 36, "height": 36, "fill": "#7C3AED", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDR1AvT", "fill": "#FFFFFF", "content": "NV", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CDR1NameT", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDR1Phone", "width": 130, "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CDR1Group", "width": 100, "children": [ - {"type": "frame", "id": "CDR1GroupF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "CDR1GroupT", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "CDR1Spent", "width": 130, "fill": "$text-primary", "content": "15,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR1Orders", "width": 80, "fill": "$text-secondary", "content": "142", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "CDR1Points", "width": 80, "fill": "$orange-primary", "content": "1,520", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR1Last", "width": 110, "fill": "$text-secondary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CDRow2", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR2Name", "width": 200, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR2Av", "width": 36, "height": 36, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDR2AvT", "fill": "#FFFFFF", "content": "TT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CDR2NameT", "fill": "$text-primary", "content": "Trần Thị Bình", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDR2Phone", "width": 130, "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CDR2Group", "width": 100, "children": [ - {"type": "frame", "id": "CDR2GroupF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "CDR2GroupT", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "CDR2Spent", "width": 130, "fill": "$text-primary", "content": "12,800,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR2Orders", "width": 80, "fill": "$text-secondary", "content": "98", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "CDR2Points", "width": 80, "fill": "$orange-primary", "content": "1,280", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR2Last", "width": 110, "fill": "$text-secondary", "content": "Hôm qua", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CDRow3", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR3Name", "width": 200, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR3Av", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDR3AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CDR3NameT", "fill": "$text-primary", "content": "Lê Hoàng Cường", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDR3Phone", "width": 130, "fill": "$text-secondary", "content": "0923 456 789", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CDR3Group", "width": 100, "children": [ - {"type": "frame", "id": "CDR3GroupF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "CDR3GroupT", "fill": "#3B82F6", "content": "Thường xuyên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "CDR3Spent", "width": 130, "fill": "$text-primary", "content": "4,500,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR3Orders", "width": 80, "fill": "$text-secondary", "content": "52", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "CDR3Points", "width": 80, "fill": "$orange-primary", "content": "450", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR3Last", "width": 110, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CDRow4", "width": "fill_container", "height": 60, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR4Name", "width": 200, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR4Av", "width": 36, "height": 36, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDR4AvT", "fill": "#FFFFFF", "content": "PD", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CDR4NameT", "fill": "$text-primary", "content": "Phạm Đình Dũng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDR4Phone", "width": 130, "fill": "$text-secondary", "content": "0934 567 890", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CDR4Group", "width": 100, "children": [ - {"type": "frame", "id": "CDR4GroupF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "CDR4GroupT", "fill": "#3B82F6", "content": "Thường xuyên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "CDR4Spent", "width": 130, "fill": "$text-primary", "content": "3,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR4Orders", "width": 80, "fill": "$text-secondary", "content": "38", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "CDR4Points", "width": 80, "fill": "$orange-primary", "content": "320", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR4Last", "width": 110, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CDRow5", "width": "fill_container", "height": 60, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR5Name", "width": 200, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDR5Av", "width": 36, "height": 36, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CDR5AvT", "fill": "#FFFFFF", "content": "HM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CDR5NameT", "fill": "$text-primary", "content": "Hoàng Mai Lan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CDR5Phone", "width": 130, "fill": "$text-secondary", "content": "0945 678 901", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CDR5Group", "width": 100, "children": [ - {"type": "frame", "id": "CDR5GroupF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "CDR5GroupT", "fill": "#22C55E", "content": "Mới", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "CDR5Spent", "width": 130, "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR5Orders", "width": 80, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "CDR5Points", "width": 80, "fill": "$orange-primary", "content": "18", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CDR5Last", "width": 110, "fill": "$text-secondary", "content": "22/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]} + { + "type": "frame", + "id": "CDHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "CDBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDBread1", + "fill": "$text-tertiary", + "content": "Kinh doanh", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "CDBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "CDBread2", + "fill": "$orange-primary", + "content": "Khách hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "CDHeaderTitle", + "fill": "$text-primary", + "content": "Khách hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CDHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDSearchBox", + "width": 240, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CDSearchP", + "fill": "$text-tertiary", + "content": "Tìm khách hàng...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "CDAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CDAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "CDAddT", + "fill": "#FFFFFF", + "content": "Thêm KH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CDContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "CDTabs", + "width": "fill_container", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "CDTab1", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 2, + "fill": "$orange-primary", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "CDTab1T", + "fill": "$orange-primary", + "content": "Tất cả (156)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CDTab2", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "CDTab2T", + "fill": "$text-tertiary", + "content": "VIP (23)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDTab3", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "CDTab3T", + "fill": "$text-tertiary", + "content": "Thường xuyên (45)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CDTab4", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "CDTab4T", + "fill": "$text-tertiary", + "content": "Mới (88)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CDTable", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CDTableHead", + "width": "fill_container", + "height": 48, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDTh1", + "width": 200, + "fill": "$text-tertiary", + "content": "Khách hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh2", + "width": 130, + "fill": "$text-tertiary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh3", + "width": 100, + "fill": "$text-tertiary", + "content": "Nhóm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh4", + "width": 130, + "fill": "$text-tertiary", + "content": "Tổng chi tiêu", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh5", + "width": 80, + "fill": "$text-tertiary", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh6", + "width": 80, + "fill": "$text-tertiary", + "content": "Điểm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDTh7", + "width": 110, + "fill": "$text-tertiary", + "content": "Lần cuối", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "CDRow1", + "width": "fill_container", + "height": 60, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR1Name", + "width": 200, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR1Av", + "width": 36, + "height": 36, + "fill": "#7C3AED", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDR1AvT", + "fill": "#FFFFFF", + "content": "NV", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CDR1NameT", + "fill": "$text-primary", + "content": "Nguyễn Văn An", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDR1Phone", + "width": 130, + "fill": "$text-secondary", + "content": "0901 234 567", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CDR1Group", + "width": 100, + "children": [ + { + "type": "frame", + "id": "CDR1GroupF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "CDR1GroupT", + "fill": "#F59E0B", + "content": "VIP", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CDR1Spent", + "width": 130, + "fill": "$text-primary", + "content": "15,200,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR1Orders", + "width": 80, + "fill": "$text-secondary", + "content": "142", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "CDR1Points", + "width": 80, + "fill": "$orange-primary", + "content": "1,520", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR1Last", + "width": 110, + "fill": "$text-secondary", + "content": "Hôm nay", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "CDRow2", + "width": "fill_container", + "height": 60, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR2Name", + "width": 200, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR2Av", + "width": 36, + "height": 36, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDR2AvT", + "fill": "#FFFFFF", + "content": "TT", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CDR2NameT", + "fill": "$text-primary", + "content": "Trần Thị Bình", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDR2Phone", + "width": 130, + "fill": "$text-secondary", + "content": "0912 345 678", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CDR2Group", + "width": 100, + "children": [ + { + "type": "frame", + "id": "CDR2GroupF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "CDR2GroupT", + "fill": "#F59E0B", + "content": "VIP", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CDR2Spent", + "width": 130, + "fill": "$text-primary", + "content": "12,800,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR2Orders", + "width": 80, + "fill": "$text-secondary", + "content": "98", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "CDR2Points", + "width": 80, + "fill": "$orange-primary", + "content": "1,280", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR2Last", + "width": 110, + "fill": "$text-secondary", + "content": "Hôm qua", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "CDRow3", + "width": "fill_container", + "height": 60, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR3Name", + "width": 200, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR3Av", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDR3AvT", + "fill": "#FFFFFF", + "content": "LH", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CDR3NameT", + "fill": "$text-primary", + "content": "Lê Hoàng Cường", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDR3Phone", + "width": 130, + "fill": "$text-secondary", + "content": "0923 456 789", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CDR3Group", + "width": 100, + "children": [ + { + "type": "frame", + "id": "CDR3GroupF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "CDR3GroupT", + "fill": "#3B82F6", + "content": "Thường xuyên", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CDR3Spent", + "width": 130, + "fill": "$text-primary", + "content": "4,500,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR3Orders", + "width": 80, + "fill": "$text-secondary", + "content": "52", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "CDR3Points", + "width": 80, + "fill": "$orange-primary", + "content": "450", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR3Last", + "width": 110, + "fill": "$text-secondary", + "content": "20/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "CDRow4", + "width": "fill_container", + "height": 60, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR4Name", + "width": 200, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR4Av", + "width": 36, + "height": 36, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDR4AvT", + "fill": "#FFFFFF", + "content": "PD", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CDR4NameT", + "fill": "$text-primary", + "content": "Phạm Đình Dũng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDR4Phone", + "width": 130, + "fill": "$text-secondary", + "content": "0934 567 890", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CDR4Group", + "width": 100, + "children": [ + { + "type": "frame", + "id": "CDR4GroupF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "CDR4GroupT", + "fill": "#3B82F6", + "content": "Thường xuyên", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CDR4Spent", + "width": 130, + "fill": "$text-primary", + "content": "3,200,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR4Orders", + "width": 80, + "fill": "$text-secondary", + "content": "38", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "CDR4Points", + "width": 80, + "fill": "$orange-primary", + "content": "320", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR4Last", + "width": 110, + "fill": "$text-secondary", + "content": "18/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "CDRow5", + "width": "fill_container", + "height": 60, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR5Name", + "width": 200, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CDR5Av", + "width": 36, + "height": 36, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CDR5AvT", + "fill": "#FFFFFF", + "content": "HM", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CDR5NameT", + "fill": "$text-primary", + "content": "Hoàng Mai Lan", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CDR5Phone", + "width": 130, + "fill": "$text-secondary", + "content": "0945 678 901", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CDR5Group", + "width": 100, + "children": [ + { + "type": "frame", + "id": "CDR5GroupF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "CDR5GroupT", + "fill": "#22C55E", + "content": "Mới", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "CDR5Spent", + "width": 130, + "fill": "$text-primary", + "content": "185,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR5Orders", + "width": 80, + "fill": "$text-secondary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "CDR5Points", + "width": 80, + "fill": "$orange-primary", + "content": "18", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CDR5Last", + "width": 110, + "fill": "$text-secondary", + "content": "22/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/customer-feedback.pen b/pencil-design/src/pages/tPOS/admin/customer-feedback.pen index 49391697..c56b49bd 100644 --- a/pencil-design/src/pages/tPOS/admin/customer-feedback.pen +++ b/pencil-design/src/pages/tPOS/admin/customer-feedback.pen @@ -12,245 +12,1803 @@ "clip": true, "children": [ { - "type": "frame", "id": "CFSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "CFSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "CFSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "CFLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "CFLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "CFSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "CFNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "CFNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CFNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CFNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CFNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "CFNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CFNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CFNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CFNavFeedback", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CFNavFeedbackI", "width": 20, "height": 20, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CFNavFeedbackT", "fill": "#FFFFFF", "content": "Đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "CFNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "CFNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CFNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CFNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CFSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CFUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CFUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "CFSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "CFLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CFLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CFNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CFNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CFNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CFNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "CFNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CFNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CFNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CFNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CFNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CFNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CFNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "CFNavCustT", + "fill": "#FFFFFF", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "CFNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "CFNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "CFNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "CFNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CFUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CFUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "CFMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "CFMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "CFHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CFHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "CFHeaderTitle", "fill": "$text-primary", "content": "Đánh giá khách hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "CFHeaderSub", "fill": "$text-tertiary", "content": "Theo dõi và quản lý phản hồi từ khách hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CFHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFFilterBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CFFilterI", "width": 18, "height": 18, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CFFilterT", "fill": "$text-secondary", "content": "Lọc đánh giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]}, - - {"type": "frame", "id": "CFContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [ - - {"type": "frame", "id": "CFSummaryRow", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "CFAvgCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFAvgLeft", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "CFAvgLabel", "fill": "$text-tertiary", "content": "Đánh giá trung bình", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CFAvgVal", "gap": 8, "alignItems": "baseline", "children": [ - {"type": "text", "id": "CFAvgNum", "fill": "$text-primary", "content": "4.2", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}, - {"type": "text", "id": "CFAvgOf", "fill": "$text-tertiary", "content": "/ 5", "fontFamily": "Roboto", "fontSize": 16} - ]}, - {"type": "frame", "id": "CFStarsRow", "gap": 4, "children": [ - {"type": "icon_font", "id": "CFStar1", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFStar2", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFStar3", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFStar4", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFStar5", "width": 20, "height": 20, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "CFAvgRight", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CFTotalNum", "fill": "$text-primary", "content": "234", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "CFTotalLabel", "fill": "$text-tertiary", "content": "tổng đánh giá", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - - {"type": "frame", "id": "CFDistCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "CFDistTitle", "fill": "$text-primary", "content": "Phân bố đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "CFBar5", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CFBar5L", "fill": "$text-secondary", "content": "5 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32}, - {"type": "frame", "id": "CFBar5BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "CFBar5Fill", "width": "45%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 6} - ]}, - {"type": "text", "id": "CFBar5V", "fill": "$text-tertiary", "content": "45%", "fontFamily": "Roboto", "fontSize": 12, "width": 36} - ]}, - {"type": "frame", "id": "CFBar4", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CFBar4L", "fill": "$text-secondary", "content": "4 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32}, - {"type": "frame", "id": "CFBar4BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "CFBar4Fill", "width": "30%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 6} - ]}, - {"type": "text", "id": "CFBar4V", "fill": "$text-tertiary", "content": "30%", "fontFamily": "Roboto", "fontSize": 12, "width": 36} - ]}, - {"type": "frame", "id": "CFBar3", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CFBar3L", "fill": "$text-secondary", "content": "3 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32}, - {"type": "frame", "id": "CFBar3BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "CFBar3Fill", "width": "15%", "height": "fill_container", "fill": "#F59E0B", "cornerRadius": 6} - ]}, - {"type": "text", "id": "CFBar3V", "fill": "$text-tertiary", "content": "15%", "fontFamily": "Roboto", "fontSize": 12, "width": 36} - ]}, - {"type": "frame", "id": "CFBar2", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CFBar2L", "fill": "$text-secondary", "content": "2 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32}, - {"type": "frame", "id": "CFBar2BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "CFBar2Fill", "width": "7%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 6} - ]}, - {"type": "text", "id": "CFBar2V", "fill": "$text-tertiary", "content": "7%", "fontFamily": "Roboto", "fontSize": 12, "width": 36} - ]}, - {"type": "frame", "id": "CFBar1", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CFBar1L", "fill": "$text-secondary", "content": "1 ★", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": 32}, - {"type": "frame", "id": "CFBar1BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "CFBar1Fill", "width": "3%", "height": "fill_container", "fill": "#EF4444", "cornerRadius": 6} - ]}, - {"type": "text", "id": "CFBar1V", "fill": "$text-tertiary", "content": "3%", "fontFamily": "Roboto", "fontSize": 12, "width": 36} - ]} - ]} - ]}, - - {"type": "text", "id": "CFRecentTitle", "fill": "$text-primary", "content": "Đánh giá gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - - {"type": "frame", "id": "CFReview1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CFRev1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev1User", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev1Av", "width": 36, "height": 36, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFRev1AvT", "fill": "#FFFFFF", "content": "NT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CFRev1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFRev1Name", "fill": "$text-primary", "content": "Nguyễn Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "CFRev1Store", "fill": "$text-tertiary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CFRev1Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [ - {"type": "frame", "id": "CFRev1Stars", "gap": 3, "children": [ - {"type": "icon_font", "id": "CFR1S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR1S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR1S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR1S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR1S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "CFRev1Date", "fill": "$text-tertiary", "content": "10/02/2026", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "CFRev1Text", "fill": "$text-secondary", "content": "Đồ ăn rất ngon, phục vụ nhanh. Nhân viên thân thiện và nhiệt tình. Sẽ quay lại lần sau!", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5} - ]}, - - {"type": "frame", "id": "CFReview2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CFRev2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev2User", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev2Av", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFRev2AvT", "fill": "#FFFFFF", "content": "TM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CFRev2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFRev2Name", "fill": "$text-primary", "content": "Trần Minh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "CFRev2Store", "fill": "$text-tertiary", "content": "GoodGo Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CFRev2Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [ - {"type": "frame", "id": "CFRev2Stars", "gap": 3, "children": [ - {"type": "icon_font", "id": "CFR2S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR2S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR2S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR2S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR2S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "CFRev2Date", "fill": "$text-tertiary", "content": "09/02/2026", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "CFRev2Text", "fill": "$text-secondary", "content": "Không gian đẹp, sạch sẽ. Món ăn hơi chậm nhưng chất lượng tốt. Giá cả hợp lý.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5} - ]}, - - {"type": "frame", "id": "CFReview3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CFRev3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev3User", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev3Av", "width": 36, "height": 36, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFRev3AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CFRev3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFRev3Name", "fill": "$text-primary", "content": "Lê Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "CFRev3Store", "fill": "$text-tertiary", "content": "GoodGo Phạm Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CFRev3Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [ - {"type": "frame", "id": "CFRev3Stars", "gap": 3, "children": [ - {"type": "icon_font", "id": "CFR3S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR3S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR3S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR3S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CFR3S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "CFRev3Date", "fill": "$text-tertiary", "content": "08/02/2026", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "CFRev3Text", "fill": "$text-secondary", "content": "Trà sữa khá ngon nhưng topping hơi ít. Mong cửa hàng cải thiện thêm.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5} - ]}, - - {"type": "frame", "id": "CFReview4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CFRev4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev4User", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CFRev4Av", "width": 36, "height": 36, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CFRev4AvT", "fill": "#FFFFFF", "content": "PD", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CFRev4Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CFRev4Name", "fill": "$text-primary", "content": "Phạm Dũng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "CFRev4Store", "fill": "$text-tertiary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CFRev4Right", "layout": "vertical", "gap": 4, "alignItems": "flex_end", "children": [ - {"type": "frame", "id": "CFRev4Stars", "gap": 3, "children": [ - {"type": "icon_font", "id": "CFR4S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR4S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CFR4S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CFR4S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CFR4S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "CFRev4Date", "fill": "$text-tertiary", "content": "07/02/2026", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "CFRev4Text", "fill": "$text-secondary", "content": "Phục vụ chậm, phải đợi 30 phút. Nhân viên không xin lỗi. Cần cải thiện dịch vụ.", "fontFamily": "Roboto", "fontSize": 13, "lineHeight": 1.5} - ]} - ]} + { + "type": "frame", + "id": "CFHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "CFHeaderTitle", + "fill": "$text-primary", + "content": "Đánh giá khách hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CFHeaderSub", + "fill": "$text-tertiary", + "content": "Theo dõi và quản lý phản hồi từ khách hàng", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "CFHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFFilterBtn", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CFFilterI", + "width": 18, + "height": 18, + "iconFontName": "filter", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "CFFilterT", + "fill": "$text-secondary", + "content": "Lọc đánh giá", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "CFSummaryRow", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "CFAvgCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "gap": 20, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFAvgLeft", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CFAvgLabel", + "fill": "$text-tertiary", + "content": "Đánh giá trung bình", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "CFAvgVal", + "gap": 8, + "alignItems": "baseline", + "children": [ + { + "type": "text", + "id": "CFAvgNum", + "fill": "$text-primary", + "content": "4.2", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CFAvgOf", + "fill": "$text-tertiary", + "content": "/ 5", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "id": "CFStarsRow", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "CFStar1", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFStar2", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFStar3", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFStar4", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFStar5", + "width": 20, + "height": 20, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFAvgRight", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFTotalNum", + "fill": "$text-primary", + "content": "234", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "text", + "id": "CFTotalLabel", + "fill": "$text-tertiary", + "content": "tổng đánh giá", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFDistCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "CFDistTitle", + "fill": "$text-primary", + "content": "Phân bố đánh giá", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CFBar5", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFBar5L", + "fill": "$text-secondary", + "content": "5 ★", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500", + "width": 32 + }, + { + "type": "frame", + "id": "CFBar5BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "CFBar5Fill", + "width": "45%", + "height": "fill_container", + "fill": "#22C55E", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "CFBar5V", + "fill": "$text-tertiary", + "content": "45%", + "fontFamily": "Roboto", + "fontSize": 12, + "width": 36 + } + ] + }, + { + "type": "frame", + "id": "CFBar4", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFBar4L", + "fill": "$text-secondary", + "content": "4 ★", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500", + "width": 32 + }, + { + "type": "frame", + "id": "CFBar4BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "CFBar4Fill", + "width": "30%", + "height": "fill_container", + "fill": "#3B82F6", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "CFBar4V", + "fill": "$text-tertiary", + "content": "30%", + "fontFamily": "Roboto", + "fontSize": 12, + "width": 36 + } + ] + }, + { + "type": "frame", + "id": "CFBar3", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFBar3L", + "fill": "$text-secondary", + "content": "3 ★", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500", + "width": 32 + }, + { + "type": "frame", + "id": "CFBar3BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "CFBar3Fill", + "width": "15%", + "height": "fill_container", + "fill": "#F59E0B", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "CFBar3V", + "fill": "$text-tertiary", + "content": "15%", + "fontFamily": "Roboto", + "fontSize": 12, + "width": 36 + } + ] + }, + { + "type": "frame", + "id": "CFBar2", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFBar2L", + "fill": "$text-secondary", + "content": "2 ★", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500", + "width": 32 + }, + { + "type": "frame", + "id": "CFBar2BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "CFBar2Fill", + "width": "7%", + "height": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "CFBar2V", + "fill": "$text-tertiary", + "content": "7%", + "fontFamily": "Roboto", + "fontSize": 12, + "width": 36 + } + ] + }, + { + "type": "frame", + "id": "CFBar1", + "width": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFBar1L", + "fill": "$text-secondary", + "content": "1 ★", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500", + "width": 32 + }, + { + "type": "frame", + "id": "CFBar1BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "CFBar1Fill", + "width": "3%", + "height": "fill_container", + "fill": "#EF4444", + "cornerRadius": 6 + } + ] + }, + { + "type": "text", + "id": "CFBar1V", + "fill": "$text-tertiary", + "content": "3%", + "fontFamily": "Roboto", + "fontSize": 12, + "width": 36 + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "CFRecentTitle", + "fill": "$text-primary", + "content": "Đánh giá gần đây", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "CFReview1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CFRev1Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev1User", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev1Av", + "width": 36, + "height": 36, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFRev1AvT", + "fill": "#FFFFFF", + "content": "NT", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CFRev1Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFRev1Name", + "fill": "$text-primary", + "content": "Nguyễn Thảo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CFRev1Store", + "fill": "$text-tertiary", + "content": "GoodGo Lê Văn Sỹ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFRev1Right", + "layout": "vertical", + "gap": 4, + "alignItems": "flex_end", + "children": [ + { + "type": "frame", + "id": "CFRev1Stars", + "gap": 3, + "children": [ + { + "type": "icon_font", + "id": "CFR1S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR1S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR1S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR1S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR1S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + }, + { + "type": "text", + "id": "CFRev1Date", + "fill": "$text-tertiary", + "content": "10/02/2026", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "text", + "id": "CFRev1Text", + "fill": "$text-secondary", + "content": "Đồ ăn rất ngon, phục vụ nhanh. Nhân viên thân thiện và nhiệt tình. Sẽ quay lại lần sau!", + "fontFamily": "Roboto", + "fontSize": 13, + "lineHeight": 1.5 + } + ] + }, + { + "type": "frame", + "id": "CFReview2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CFRev2Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev2User", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev2Av", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFRev2AvT", + "fill": "#FFFFFF", + "content": "TM", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CFRev2Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFRev2Name", + "fill": "$text-primary", + "content": "Trần Minh", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CFRev2Store", + "fill": "$text-tertiary", + "content": "GoodGo Nguyễn Huệ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFRev2Right", + "layout": "vertical", + "gap": 4, + "alignItems": "flex_end", + "children": [ + { + "type": "frame", + "id": "CFRev2Stars", + "gap": 3, + "children": [ + { + "type": "icon_font", + "id": "CFR2S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR2S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR2S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR2S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR2S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "CFRev2Date", + "fill": "$text-tertiary", + "content": "09/02/2026", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "text", + "id": "CFRev2Text", + "fill": "$text-secondary", + "content": "Không gian đẹp, sạch sẽ. Món ăn hơi chậm nhưng chất lượng tốt. Giá cả hợp lý.", + "fontFamily": "Roboto", + "fontSize": 13, + "lineHeight": 1.5 + } + ] + }, + { + "type": "frame", + "id": "CFReview3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CFRev3Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev3User", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev3Av", + "width": 36, + "height": 36, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFRev3AvT", + "fill": "#FFFFFF", + "content": "LH", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CFRev3Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFRev3Name", + "fill": "$text-primary", + "content": "Lê Hương", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CFRev3Store", + "fill": "$text-tertiary", + "content": "GoodGo Phạm Ngọc Thạch", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFRev3Right", + "layout": "vertical", + "gap": 4, + "alignItems": "flex_end", + "children": [ + { + "type": "frame", + "id": "CFRev3Stars", + "gap": 3, + "children": [ + { + "type": "icon_font", + "id": "CFR3S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR3S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR3S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR3S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "CFR3S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "CFRev3Date", + "fill": "$text-tertiary", + "content": "08/02/2026", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "text", + "id": "CFRev3Text", + "fill": "$text-secondary", + "content": "Trà sữa khá ngon nhưng topping hơi ít. Mong cửa hàng cải thiện thêm.", + "fontFamily": "Roboto", + "fontSize": 13, + "lineHeight": 1.5 + } + ] + }, + { + "type": "frame", + "id": "CFReview4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CFRev4Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev4User", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CFRev4Av", + "width": 36, + "height": 36, + "fill": "#8B5CF6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CFRev4AvT", + "fill": "#FFFFFF", + "content": "PD", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "CFRev4Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CFRev4Name", + "fill": "$text-primary", + "content": "Phạm Dũng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CFRev4Store", + "fill": "$text-tertiary", + "content": "GoodGo Lê Văn Sỹ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "CFRev4Right", + "layout": "vertical", + "gap": 4, + "alignItems": "flex_end", + "children": [ + { + "type": "frame", + "id": "CFRev4Stars", + "gap": 3, + "children": [ + { + "type": "icon_font", + "id": "CFR4S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR4S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "CFR4S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "CFR4S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "CFR4S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "CFRev4Date", + "fill": "$text-tertiary", + "content": "07/02/2026", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "text", + "id": "CFRev4Text", + "fill": "$text-secondary", + "content": "Phục vụ chậm, phải đợi 30 phút. Nhân viên không xin lỗi. Cần cải thiện dịch vụ.", + "fontFamily": "Roboto", + "fontSize": 13, + "lineHeight": 1.5 + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/device-management.pen b/pencil-design/src/pages/tPOS/admin/device-management.pen index 00413828..a865d103 100644 --- a/pencil-design/src/pages/tPOS/admin/device-management.pen +++ b/pencil-design/src/pages/tPOS/admin/device-management.pen @@ -12,228 +12,1679 @@ "clip": true, "children": [ { - "type": "frame", "id": "DMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "DMSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "DMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "DMLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "DMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "DMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "DMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "DMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "DMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "DMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "DMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "DMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "DMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "DMNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "DMNavDev", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMNavDevI", "width": 20, "height": 20, "iconFontName": "tablet-smartphone", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "DMNavDevT", "fill": "#FFFFFF", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "DMNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "DMNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "DMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "DMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "DMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "DMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "DMSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "DMLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "DMLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "DMLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "DMNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "DMNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "DMNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "DMNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "DMNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DMNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DMNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DMNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "DMNavDevT", + "fill": "#FFFFFF", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "DMNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "DMNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "DMNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "DMNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "DMNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "DMUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "DMUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "DMUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "DMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "DMMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "DMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DMHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "DMBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMBread2", "fill": "$orange-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "DMHeaderTitle", "fill": "$text-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DMHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "DMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMAddBtnI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "DMAddBtnT", "fill": "#FFFFFF", "content": "Thêm thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "DMContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 20, "clip": true, "children": [ - {"type": "frame", "id": "DMStats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "DMStat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "DMStat1L", "fill": "$text-tertiary", "content": "Tổng thiết bị", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMStat1V", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DMStat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "DMStat2L", "fill": "$text-tertiary", "content": "Đang hoạt động", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMStat2V", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DMStat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [20, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "DMStat3L", "fill": "$text-tertiary", "content": "Ngoại tuyến", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMStat3V", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "DMCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard1Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard1Icon", "width": 48, "height": 48, "fill": "#FF5C0015", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard1IconI", "width": 24, "height": 24, "iconFontName": "tablet", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "frame", "id": "DMCard1Info", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "DMCard1NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard1Name", "fill": "$text-primary", "content": "POS Terminal #1", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "DMCard1Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "DMCard1StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "DMCard1Details", "gap": 20, "children": [ - {"type": "frame", "id": "DMCard1D1", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard1D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard1D1V", "fill": "$text-secondary", "content": "iPad Pro 12.9\"", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard1D2", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard1D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard1D2V", "fill": "$text-secondary", "content": "IPD-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard1D3", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard1D3L", "fill": "$text-tertiary", "content": "Kết nối:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard1D3V", "fill": "$text-secondary", "content": "2 máy in", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard1D4", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard1D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard1D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "DMCard1Actions", "gap": 8, "children": [ - {"type": "frame", "id": "DMCard1Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard1EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "DMCard1Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard1DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]}, - {"type": "frame", "id": "DMCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard2Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard2Icon", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard2IconI", "width": 24, "height": 24, "iconFontName": "monitor", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "DMCard2Info", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "DMCard2NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard2Name", "fill": "$text-primary", "content": "Kitchen Display", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "DMCard2Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard2Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "DMCard2StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "DMCard2Details", "gap": 20, "children": [ - {"type": "frame", "id": "DMCard2D1", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard2D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard2D1V", "fill": "$text-secondary", "content": "Android Tablet", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard2D2", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard2D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard2D2V", "fill": "$text-secondary", "content": "KDS-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard2D3", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard2D3L", "fill": "$text-tertiary", "content": "Lần cuối:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard2D3V", "fill": "$text-secondary", "content": "Vừa xong", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard2D4", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard2D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard2D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "DMCard2Actions", "gap": 8, "children": [ - {"type": "frame", "id": "DMCard2Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard2EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "DMCard2Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard2DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]}, - {"type": "frame", "id": "DMCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard3Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard3Icon", "width": 48, "height": 48, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard3IconI", "width": 24, "height": 24, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "DMCard3Info", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "DMCard3NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard3Name", "fill": "$text-primary", "content": "Máy in Receipt", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "DMCard3Badge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "DMCard3Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "DMCard3StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "DMCard3Details", "gap": 20, "children": [ - {"type": "frame", "id": "DMCard3D1", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard3D1L", "fill": "$text-tertiary", "content": "Loại:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard3D1V", "fill": "$text-secondary", "content": "Star TSP143", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard3D2", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard3D2L", "fill": "$text-tertiary", "content": "S/N:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard3D2V", "fill": "$text-secondary", "content": "PRT-2024-001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard3D3", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard3D3L", "fill": "$text-tertiary", "content": "Lần cuối:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard3D3V", "fill": "$text-secondary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DMCard3D4", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "DMCard3D4L", "fill": "$text-tertiary", "content": "Cửa hàng:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "DMCard3D4V", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "DMCard3Actions", "gap": 8, "children": [ - {"type": "frame", "id": "DMCard3Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard3EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "DMCard3Del", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DMCard3DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "DMHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "DMBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMBread1", + "fill": "$text-tertiary", + "content": "Hệ thống", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMBread2", + "fill": "$orange-primary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "DMHeaderTitle", + "fill": "$text-primary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "DMHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "DMAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMAddBtnI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "DMAddBtnT", + "fill": "#FFFFFF", + "content": "Thêm thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMContent", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "DMStats", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "DMStat1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 20, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "DMStat1L", + "fill": "$text-tertiary", + "content": "Tổng thiết bị", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMStat1V", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "DMStat2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 20, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "DMStat2L", + "fill": "$text-tertiary", + "content": "Đang hoạt động", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMStat2V", + "fill": "#22C55E", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "DMStat3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 20, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "DMStat3L", + "fill": "$text-tertiary", + "content": "Ngoại tuyến", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMStat3V", + "fill": "$text-primary", + "content": "0", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard1Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard1Icon", + "width": 48, + "height": 48, + "fill": "#FF5C0015", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard1IconI", + "width": 24, + "height": 24, + "iconFontName": "tablet", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "DMCard1Info", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "DMCard1NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard1Name", + "fill": "$text-primary", + "content": "POS Terminal #1", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "DMCard1Badge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard1Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "DMCard1StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard1Details", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "DMCard1D1", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard1D1L", + "fill": "$text-tertiary", + "content": "Loại:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard1D1V", + "fill": "$text-secondary", + "content": "iPad Pro 12.9\"", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard1D2", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard1D2L", + "fill": "$text-tertiary", + "content": "S/N:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard1D2V", + "fill": "$text-secondary", + "content": "IPD-2024-001", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard1D3", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard1D3L", + "fill": "$text-tertiary", + "content": "Kết nối:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard1D3V", + "fill": "$text-secondary", + "content": "2 máy in", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard1D4", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard1D4L", + "fill": "$text-tertiary", + "content": "Cửa hàng:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard1D4V", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard1Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "DMCard1Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard1EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "DMCard1Del", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard1DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard2Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard2Icon", + "width": 48, + "height": 48, + "fill": "#3B82F620", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard2IconI", + "width": 24, + "height": 24, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "DMCard2Info", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "DMCard2NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard2Name", + "fill": "$text-primary", + "content": "Kitchen Display", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "DMCard2Badge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard2Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "DMCard2StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard2Details", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "DMCard2D1", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard2D1L", + "fill": "$text-tertiary", + "content": "Loại:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard2D1V", + "fill": "$text-secondary", + "content": "Android Tablet", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard2D2", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard2D2L", + "fill": "$text-tertiary", + "content": "S/N:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard2D2V", + "fill": "$text-secondary", + "content": "KDS-2024-001", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard2D3", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard2D3L", + "fill": "$text-tertiary", + "content": "Lần cuối:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard2D3V", + "fill": "$text-secondary", + "content": "Vừa xong", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard2D4", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard2D4L", + "fill": "$text-tertiary", + "content": "Cửa hàng:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard2D4V", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard2Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "DMCard2Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard2EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "DMCard2Del", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard2DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard3Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard3Icon", + "width": 48, + "height": 48, + "fill": "#F59E0B20", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard3IconI", + "width": 24, + "height": 24, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + }, + { + "type": "frame", + "id": "DMCard3Info", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "DMCard3NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard3Name", + "fill": "$text-primary", + "content": "Máy in Receipt", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "DMCard3Badge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DMCard3Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "DMCard3StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard3Details", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "DMCard3D1", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard3D1L", + "fill": "$text-tertiary", + "content": "Loại:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard3D1V", + "fill": "$text-secondary", + "content": "Star TSP143", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard3D2", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard3D2L", + "fill": "$text-tertiary", + "content": "S/N:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard3D2V", + "fill": "$text-secondary", + "content": "PRT-2024-001", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard3D3", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard3D3L", + "fill": "$text-tertiary", + "content": "Lần cuối:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard3D3V", + "fill": "$text-secondary", + "content": "5 phút trước", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DMCard3D4", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "DMCard3D4L", + "fill": "$text-tertiary", + "content": "Cửa hàng:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "DMCard3D4V", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DMCard3Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "DMCard3Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard3EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "DMCard3Del", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DMCard3DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/expense-management.pen b/pencil-design/src/pages/tPOS/admin/expense-management.pen index cf08d162..047275fc 100644 --- a/pencil-design/src/pages/tPOS/admin/expense-management.pen +++ b/pencil-design/src/pages/tPOS/admin/expense-management.pen @@ -12,208 +12,1700 @@ "clip": true, "children": [ { - "type": "frame", "id": "EMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "EMSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "EMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "EMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "EMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "EMLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "EMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "EMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "EMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "EMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "EMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "EMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "EMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "EMNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "EMNavExpense", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMNavExpenseI", "width": 20, "height": 20, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "EMNavExpenseT", "fill": "#FFFFFF", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "EMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "EMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "EMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "EMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "EMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "EMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "EMSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "EMLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "EMLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "EMLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "EMLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "EMNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "EMNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "EMNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "EMNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "EMNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "EMNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "EMNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "EMNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "EMNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "EMNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "EMNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "EMNavFinT", + "fill": "#FFFFFF", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "EMNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "EMNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "EMNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "EMUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "EMUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "EMUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "EMUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "EMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "EMMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "EMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "EMHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "EMHeaderTitle", "fill": "$text-primary", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "EMHeaderSub", "fill": "$text-tertiary", "content": "Quản lý và theo dõi chi phí hoạt động", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "EMHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "EMMonthPicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMMonthI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EMMonthT", "fill": "$text-secondary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "EMMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "EMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EMAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "EMAddT", "fill": "#FFFFFF", "content": "Thêm chi phí", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "EMContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [ - - {"type": "frame", "id": "EMCatRow", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "EMCat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "EMCat1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EMCat1N", "fill": "$text-secondary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "EMCat1P", "fill": "$orange-primary", "content": "65%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EMCat1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "EMCat1Fill", "width": "65%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 3} - ]} - ]}, - {"type": "frame", "id": "EMCat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "EMCat2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EMCat2N", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "EMCat2P", "fill": "#3B82F6", "content": "20%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EMCat2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "EMCat2Fill", "width": "20%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 3} - ]} - ]}, - {"type": "frame", "id": "EMCat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "EMCat3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EMCat3N", "fill": "$text-secondary", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "EMCat3P", "fill": "#22C55E", "content": "10%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EMCat3Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "EMCat3Fill", "width": "10%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 3} - ]} - ]}, - {"type": "frame", "id": "EMCat4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "EMCat4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EMCat4N", "fill": "$text-secondary", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "EMCat4P", "fill": "#F59E0B", "content": "5%", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EMCat4Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "EMCat4Fill", "width": "5%", "height": "fill_container", "fill": "#F59E0B", "cornerRadius": 3} - ]} - ]} - ]}, - - {"type": "frame", "id": "EMTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "EMTblHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [ - {"type": "text", "id": "EMTblH1", "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 80}, - {"type": "text", "id": "EMTblH2", "fill": "$text-tertiary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"}, - {"type": "text", "id": "EMTblH3", "fill": "$text-tertiary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 110}, - {"type": "text", "id": "EMTblH4", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 150}, - {"type": "text", "id": "EMTblH5", "fill": "$text-tertiary", "content": "Số tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMTblH6", "fill": "$text-tertiary", "content": "Người tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100} - ]}, - {"type": "frame", "id": "EMRow1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "EMR1D", "fill": "$text-secondary", "content": "11/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR1N", "fill": "$text-primary", "content": "Mua thịt bò Úc nhập khẩu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR1Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR1BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR1BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR1S", "fill": "$text-secondary", "content": "Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR1A", "fill": "#EF4444", "content": "-8.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR1C", "fill": "$text-secondary", "content": "Minh Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]}, - {"type": "frame", "id": "EMRow2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "EMR2D", "fill": "$text-secondary", "content": "10/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR2N", "fill": "$text-primary", "content": "Lương tháng 01 nhân viên", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR2Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR2BG", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR2BT", "fill": "#3B82F6", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR2S", "fill": "$text-secondary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR2A", "fill": "#EF4444", "content": "-45.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR2C", "fill": "$text-secondary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]}, - {"type": "frame", "id": "EMRow3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "EMR3D", "fill": "$text-secondary", "content": "09/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR3N", "fill": "$text-primary", "content": "Mua rau củ hữu cơ", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR3Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR3BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR3BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR3S", "fill": "$text-secondary", "content": "Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR3A", "fill": "#EF4444", "content": "-3.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR3C", "fill": "$text-secondary", "content": "Thanh Hà", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]}, - {"type": "frame", "id": "EMRow4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "EMR4D", "fill": "$text-secondary", "content": "08/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR4N", "fill": "$text-primary", "content": "Tiền thuê mặt bằng T2", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR4Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR4BG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR4BT", "fill": "#22C55E", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR4S", "fill": "$text-secondary", "content": "Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR4A", "fill": "#EF4444", "content": "-15.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR4C", "fill": "$text-secondary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]}, - {"type": "frame", "id": "EMRow5", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "EMR5D", "fill": "$text-secondary", "content": "07/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR5N", "fill": "$text-primary", "content": "Sửa chữa máy pha cà phê", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR5Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR5BG", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR5BT", "fill": "#F59E0B", "content": "Khác", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR5S", "fill": "$text-secondary", "content": "P. Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR5A", "fill": "#EF4444", "content": "-2.8M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR5C", "fill": "$text-secondary", "content": "Đức Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]}, - {"type": "frame", "id": "EMRow6", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "text", "id": "EMR6D", "fill": "$text-secondary", "content": "06/02", "fontFamily": "Roboto", "fontSize": 13, "width": 80}, - {"type": "text", "id": "EMR6N", "fill": "$text-primary", "content": "Mua bao bì, ly giấy", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "frame", "id": "EMR6Badge", "width": 110, "children": [ - {"type": "frame", "id": "EMR6BG", "fill": "#FF5C0020", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "EMR6BT", "fill": "$orange-primary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "EMR6S", "fill": "$text-secondary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "width": 150}, - {"type": "text", "id": "EMR6A", "fill": "#EF4444", "content": "-1.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "EMR6C", "fill": "$text-secondary", "content": "Minh Anh", "fontFamily": "Roboto", "fontSize": 13, "width": 100} - ]} - ]} - ]} + { + "type": "frame", + "id": "EMHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "EMHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "EMHeaderTitle", + "fill": "$text-primary", + "content": "Chi phí", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "EMHeaderSub", + "fill": "$text-tertiary", + "content": "Quản lý và theo dõi chi phí hoạt động", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "EMHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "EMMonthPicker", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMMonthI", + "width": 18, + "height": 18, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "EMMonthT", + "fill": "$text-secondary", + "content": "Tháng 02/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "EMMonthChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "EMAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "EMAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "EMAddT", + "fill": "#FFFFFF", + "content": "Thêm chi phí", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "EMCatRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "EMCat1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "EMCat1Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMCat1N", + "fill": "$text-secondary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "EMCat1P", + "fill": "$orange-primary", + "content": "65%", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "EMCat1Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 3, + "children": [ + { + "type": "frame", + "id": "EMCat1Fill", + "width": "65%", + "height": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 3 + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMCat2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "EMCat2Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMCat2N", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "EMCat2P", + "fill": "#3B82F6", + "content": "20%", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "EMCat2Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 3, + "children": [ + { + "type": "frame", + "id": "EMCat2Fill", + "width": "20%", + "height": "fill_container", + "fill": "#3B82F6", + "cornerRadius": 3 + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMCat3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "EMCat3Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMCat3N", + "fill": "$text-secondary", + "content": "Mặt bằng", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "EMCat3P", + "fill": "#22C55E", + "content": "10%", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "EMCat3Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 3, + "children": [ + { + "type": "frame", + "id": "EMCat3Fill", + "width": "10%", + "height": "fill_container", + "fill": "#22C55E", + "cornerRadius": 3 + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMCat4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "EMCat4Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMCat4N", + "fill": "$text-secondary", + "content": "Khác", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "EMCat4P", + "fill": "#F59E0B", + "content": "5%", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "EMCat4Bar", + "width": "fill_container", + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 3, + "children": [ + { + "type": "frame", + "id": "EMCat4Fill", + "width": "5%", + "height": "fill_container", + "fill": "#F59E0B", + "cornerRadius": 3 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "EMTable", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "EMTblHdr", + "width": "fill_container", + "padding": [ + 12, + 24 + ], + "fill": "$bg-interactive", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMTblH1", + "fill": "$text-tertiary", + "content": "Ngày", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 80 + }, + { + "type": "text", + "id": "EMTblH2", + "fill": "$text-tertiary", + "content": "Mô tả", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": "fill_container" + }, + { + "type": "text", + "id": "EMTblH3", + "fill": "$text-tertiary", + "content": "Danh mục", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 110 + }, + { + "type": "text", + "id": "EMTblH4", + "fill": "$text-tertiary", + "content": "Cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 150 + }, + { + "type": "text", + "id": "EMTblH5", + "fill": "$text-tertiary", + "content": "Số tiền", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMTblH6", + "fill": "$text-tertiary", + "content": "Người tạo", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow1", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR1D", + "fill": "$text-secondary", + "content": "11/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR1N", + "fill": "$text-primary", + "content": "Mua thịt bò Úc nhập khẩu", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR1Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR1BG", + "fill": "#FF5C0020", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR1BT", + "fill": "$orange-primary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR1S", + "fill": "$text-secondary", + "content": "Nguyễn Huệ", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR1A", + "fill": "#EF4444", + "content": "-8.5M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR1C", + "fill": "$text-secondary", + "content": "Minh Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow2", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR2D", + "fill": "$text-secondary", + "content": "10/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR2N", + "fill": "$text-primary", + "content": "Lương tháng 01 nhân viên", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR2Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR2BG", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR2BT", + "fill": "#3B82F6", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR2S", + "fill": "$text-secondary", + "content": "Tất cả", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR2A", + "fill": "#EF4444", + "content": "-45.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR2C", + "fill": "$text-secondary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow3", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR3D", + "fill": "$text-secondary", + "content": "09/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR3N", + "fill": "$text-primary", + "content": "Mua rau củ hữu cơ", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR3Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR3BG", + "fill": "#FF5C0020", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR3BT", + "fill": "$orange-primary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR3S", + "fill": "$text-secondary", + "content": "Lê Văn Sỹ", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR3A", + "fill": "#EF4444", + "content": "-3.2M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR3C", + "fill": "$text-secondary", + "content": "Thanh Hà", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow4", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR4D", + "fill": "$text-secondary", + "content": "08/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR4N", + "fill": "$text-primary", + "content": "Tiền thuê mặt bằng T2", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR4Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR4BG", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR4BT", + "fill": "#22C55E", + "content": "Mặt bằng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR4S", + "fill": "$text-secondary", + "content": "Nguyễn Huệ", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR4A", + "fill": "#EF4444", + "content": "-15.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR4C", + "fill": "$text-secondary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow5", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR5D", + "fill": "$text-secondary", + "content": "07/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR5N", + "fill": "$text-primary", + "content": "Sửa chữa máy pha cà phê", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR5Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR5BG", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR5BT", + "fill": "#F59E0B", + "content": "Khác", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR5S", + "fill": "$text-secondary", + "content": "P. Ngọc Thạch", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR5A", + "fill": "#EF4444", + "content": "-2.8M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR5C", + "fill": "$text-secondary", + "content": "Đức Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "EMRow6", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EMR6D", + "fill": "$text-secondary", + "content": "06/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 80 + }, + { + "type": "text", + "id": "EMR6N", + "fill": "$text-primary", + "content": "Mua bao bì, ly giấy", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "frame", + "id": "EMR6Badge", + "width": 110, + "children": [ + { + "type": "frame", + "id": "EMR6BG", + "fill": "#FF5C0020", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "EMR6BT", + "fill": "$orange-primary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "EMR6S", + "fill": "$text-secondary", + "content": "Tất cả", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 150 + }, + { + "type": "text", + "id": "EMR6A", + "fill": "#EF4444", + "content": "-1.5M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "EMR6C", + "fill": "$text-secondary", + "content": "Minh Anh", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/financial-overview.pen b/pencil-design/src/pages/tPOS/admin/financial-overview.pen index 63c71e59..53d57999 100644 --- a/pencil-design/src/pages/tPOS/admin/financial-overview.pen +++ b/pencil-design/src/pages/tPOS/admin/financial-overview.pen @@ -12,228 +12,1814 @@ "clip": true, "children": [ { - "type": "frame", "id": "FOSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "FOSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "FOSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FOLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "FOLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "FOLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "FOLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "FOSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "FONavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "FONavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FONavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FONavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "FONavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "FONavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FONavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FONavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "FONavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "FONavFinance", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FONavFinanceI", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "FONavFinanceT", "fill": "#FFFFFF", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FONavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FONavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FONavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "FOSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FOUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FOUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "FOUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "FOUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "FOSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "FOLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "FOLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "FOLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FONavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "FONavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "FONavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "FONavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "FONavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FONavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FONavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "FONavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "FONavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "FONavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "FONavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "FONavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "FONavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "FONavFinT", + "fill": "#FFFFFF", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "FONavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "FONavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FONavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FONavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FONavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FOUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "FOUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FOUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "FOMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "FOMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "FOHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "FOHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "FOHeaderTitle", "fill": "$text-primary", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "FOHeaderSub", "fill": "$text-tertiary", "content": "Tổng quan tình hình tài chính doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "FOHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOMonthPicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FOMonthI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FOMonthT", "fill": "$text-secondary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "FOMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "FOContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [ - - {"type": "frame", "id": "FOKpiRow", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "FOKpi1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "FOKpi1Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOKpi1Icon", "width": 32, "height": 32, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FOKpi1I", "width": 18, "height": 18, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "text", "id": "FOKpi1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOKpi1V", "fill": "$text-primary", "content": "458M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FOKpi2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "FOKpi2Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOKpi2Icon", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FOKpi2I", "width": 18, "height": 18, "iconFontName": "trending-down", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "text", "id": "FOKpi2L", "fill": "$text-tertiary", "content": "Chi phí", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOKpi2V", "fill": "$text-primary", "content": "312M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FOKpi3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "FOKpi3Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOKpi3Icon", "width": 32, "height": 32, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FOKpi3I", "width": 18, "height": 18, "iconFontName": "dollar-sign", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "text", "id": "FOKpi3L", "fill": "$text-tertiary", "content": "Lợi nhuận", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOKpi3V", "fill": "$text-primary", "content": "146M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FOKpi4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "FOKpi4Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOKpi4Icon", "width": 32, "height": 32, "fill": "#F59E0B20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FOKpi4I", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "FOKpi4L", "fill": "$text-tertiary", "content": "Biên lợi nhuận", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOKpi4V", "fill": "$text-primary", "content": "31.9%", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]} - ]}, - - {"type": "frame", "id": "FOTwoCol", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "FORevByStore", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "FORevTitle", "fill": "$text-primary", "content": "Doanh thu theo cửa hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "FOStoreBar1", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "FOSBar1Top", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "FOSBar1N", "fill": "$text-secondary", "content": "GoodGo Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "FOSBar1V", "fill": "$text-primary", "content": "185M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOSBar1BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "FOSBar1Fill", "width": "75%", "height": "fill_container", "fill": "$orange-primary", "cornerRadius": 6} - ]} - ]}, - {"type": "frame", "id": "FOStoreBar2", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "FOSBar2Top", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "FOSBar2N", "fill": "$text-secondary", "content": "GoodGo Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "FOSBar2V", "fill": "$text-primary", "content": "152M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOSBar2BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "FOSBar2Fill", "width": "60%", "height": "fill_container", "fill": "#3B82F6", "cornerRadius": 6} - ]} - ]}, - {"type": "frame", "id": "FOStoreBar3", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "FOSBar3Top", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "FOSBar3N", "fill": "$text-secondary", "content": "GoodGo Phạm Ngọc Thạch", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "FOSBar3V", "fill": "$text-primary", "content": "121M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOSBar3BG", "width": "fill_container", "height": 12, "fill": "$bg-interactive", "cornerRadius": 6, "children": [ - {"type": "frame", "id": "FOSBar3Fill", "width": "48%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 6} - ]} - ]} - ]}, - - {"type": "frame", "id": "FOExpBreak", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "FOExpTitle", "fill": "$text-primary", "content": "Chi phí breakdown", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "FOExp1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "FOExp1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOExp1Dot", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 100}, - {"type": "text", "id": "FOExp1N", "fill": "$text-secondary", "content": "Nguyên liệu", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOExp1V", "fill": "$text-primary", "content": "156M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOExp2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "FOExp2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOExp2Dot", "width": 10, "height": 10, "fill": "#3B82F6", "cornerRadius": 100}, - {"type": "text", "id": "FOExp2N", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOExp2V", "fill": "$text-primary", "content": "89M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOExp3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "FOExp3Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOExp3Dot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "FOExp3N", "fill": "$text-secondary", "content": "Mặt bằng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOExp3V", "fill": "$text-primary", "content": "45M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOExp4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [12, 0], "children": [ - {"type": "frame", "id": "FOExp4Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FOExp4Dot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "FOExp4N", "fill": "$text-secondary", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "FOExp4V", "fill": "$text-primary", "content": "22M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "FOCashFlow", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FOCFHead", "width": "fill_container", "padding": [16, 24], "children": [ - {"type": "text", "id": "FOCFTitle", "fill": "$text-primary", "content": "Dòng tiền gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FOCFHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [ - {"type": "text", "id": "FOCFH1", "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "FOCFH2", "fill": "$text-tertiary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"}, - {"type": "text", "id": "FOCFH3", "fill": "$text-tertiary", "content": "Thu/Chi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCFH4", "fill": "$text-tertiary", "content": "Số dư", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120} - ]}, - {"type": "frame", "id": "FOCFR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "FOCF1D", "fill": "$text-secondary", "content": "11/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "FOCF1N", "fill": "$text-primary", "content": "Doanh thu bán hàng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "FOCF1A", "fill": "#22C55E", "content": "+18.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCF1B", "fill": "$text-primary", "content": "245.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120} - ]}, - {"type": "frame", "id": "FOCFR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "FOCF2D", "fill": "$text-secondary", "content": "10/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "FOCF2N", "fill": "$text-primary", "content": "Nhập nguyên liệu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "FOCF2A", "fill": "#EF4444", "content": "-12.3M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCF2B", "fill": "$text-primary", "content": "226.7M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120} - ]}, - {"type": "frame", "id": "FOCFR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "FOCF3D", "fill": "$text-secondary", "content": "09/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "FOCF3N", "fill": "$text-primary", "content": "Doanh thu bán hàng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "FOCF3A", "fill": "#22C55E", "content": "+21.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCF3B", "fill": "$text-primary", "content": "239.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120} - ]}, - {"type": "frame", "id": "FOCFR4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "FOCF4D", "fill": "$text-secondary", "content": "08/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "FOCF4N", "fill": "$text-primary", "content": "Lương nhân viên", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "FOCF4A", "fill": "#EF4444", "content": "-45.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCF4B", "fill": "$text-primary", "content": "218.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120} - ]}, - {"type": "frame", "id": "FOCFR5", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "text", "id": "FOCF5D", "fill": "$text-secondary", "content": "07/02", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "FOCF5N", "fill": "$text-primary", "content": "Tiền thuê mặt bằng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "FOCF5A", "fill": "#EF4444", "content": "-15.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "FOCF5B", "fill": "$text-primary", "content": "263.0M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120} - ]} - ]} - ]} + { + "type": "frame", + "id": "FOHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FOHeaderTitle", + "fill": "$text-primary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "FOHeaderSub", + "fill": "$text-tertiary", + "content": "Tổng quan tình hình tài chính doanh nghiệp", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "FOHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOMonthPicker", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FOMonthI", + "width": 18, + "height": 18, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "FOMonthT", + "fill": "$text-secondary", + "content": "Tháng 02/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "FOMonthChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "FOKpiRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "FOKpi1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "FOKpi1Top", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOKpi1Icon", + "width": 32, + "height": 32, + "fill": "#22C55E20", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FOKpi1I", + "width": 18, + "height": 18, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "text", + "id": "FOKpi1L", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOKpi1V", + "fill": "$text-primary", + "content": "458M", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FOKpi2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "FOKpi2Top", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOKpi2Icon", + "width": 32, + "height": 32, + "fill": "#EF444420", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FOKpi2I", + "width": 18, + "height": 18, + "iconFontName": "trending-down", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "text", + "id": "FOKpi2L", + "fill": "$text-tertiary", + "content": "Chi phí", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOKpi2V", + "fill": "$text-primary", + "content": "312M", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FOKpi3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "FOKpi3Top", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOKpi3Icon", + "width": 32, + "height": 32, + "fill": "#3B82F620", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FOKpi3I", + "width": 18, + "height": 18, + "iconFontName": "dollar-sign", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "text", + "id": "FOKpi3L", + "fill": "$text-tertiary", + "content": "Lợi nhuận", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOKpi3V", + "fill": "$text-primary", + "content": "146M", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FOKpi4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "FOKpi4Top", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOKpi4Icon", + "width": 32, + "height": 32, + "fill": "#F59E0B20", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FOKpi4I", + "width": 18, + "height": 18, + "iconFontName": "percent", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + }, + { + "type": "text", + "id": "FOKpi4L", + "fill": "$text-tertiary", + "content": "Biên lợi nhuận", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOKpi4V", + "fill": "$text-primary", + "content": "31.9%", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOTwoCol", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "FORevByStore", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "FORevTitle", + "fill": "$text-primary", + "content": "Doanh thu theo cửa hàng", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "FOStoreBar1", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar1Top", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "FOSBar1N", + "fill": "$text-secondary", + "content": "GoodGo Nguyễn Huệ", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "FOSBar1V", + "fill": "$text-primary", + "content": "185M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOSBar1BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar1Fill", + "width": "75%", + "height": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOStoreBar2", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar2Top", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "FOSBar2N", + "fill": "$text-secondary", + "content": "GoodGo Lê Văn Sỹ", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "FOSBar2V", + "fill": "$text-primary", + "content": "152M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOSBar2BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar2Fill", + "width": "60%", + "height": "fill_container", + "fill": "#3B82F6", + "cornerRadius": 6 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOStoreBar3", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar3Top", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "FOSBar3N", + "fill": "$text-secondary", + "content": "GoodGo Phạm Ngọc Thạch", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "FOSBar3V", + "fill": "$text-primary", + "content": "121M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOSBar3BG", + "width": "fill_container", + "height": 12, + "fill": "$bg-interactive", + "cornerRadius": 6, + "children": [ + { + "type": "frame", + "id": "FOSBar3Fill", + "width": "48%", + "height": "fill_container", + "fill": "#22C55E", + "cornerRadius": 6 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOExpBreak", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "FOExpTitle", + "fill": "$text-primary", + "content": "Chi phí breakdown", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "FOExp1", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "FOExp1Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOExp1Dot", + "width": 10, + "height": 10, + "fill": "$orange-primary", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "FOExp1N", + "fill": "$text-secondary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOExp1V", + "fill": "$text-primary", + "content": "156M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOExp2", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "FOExp2Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOExp2Dot", + "width": 10, + "height": 10, + "fill": "#3B82F6", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "FOExp2N", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOExp2V", + "fill": "$text-primary", + "content": "89M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOExp3", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "FOExp3Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOExp3Dot", + "width": 10, + "height": 10, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "FOExp3N", + "fill": "$text-secondary", + "content": "Mặt bằng", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOExp3V", + "fill": "$text-primary", + "content": "45M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOExp4", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "padding": [ + 12, + 0 + ], + "children": [ + { + "type": "frame", + "id": "FOExp4Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FOExp4Dot", + "width": 10, + "height": 10, + "fill": "#F59E0B", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "FOExp4N", + "fill": "$text-secondary", + "content": "Khác", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "FOExp4V", + "fill": "$text-primary", + "content": "22M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FOCashFlow", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "FOCFHead", + "width": "fill_container", + "padding": [ + 16, + 24 + ], + "children": [ + { + "type": "text", + "id": "FOCFTitle", + "fill": "$text-primary", + "content": "Dòng tiền gần đây", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "FOCFHdr", + "width": "fill_container", + "padding": [ + 12, + 24 + ], + "fill": "$bg-interactive", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCFH1", + "fill": "$text-tertiary", + "content": "Ngày", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "FOCFH2", + "fill": "$text-tertiary", + "content": "Mô tả", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCFH3", + "fill": "$text-tertiary", + "content": "Thu/Chi", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCFH4", + "fill": "$text-tertiary", + "content": "Số dư", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 120 + } + ] + }, + { + "type": "frame", + "id": "FOCFR1", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCF1D", + "fill": "$text-secondary", + "content": "11/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "FOCF1N", + "fill": "$text-primary", + "content": "Doanh thu bán hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCF1A", + "fill": "#22C55E", + "content": "+18.5M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCF1B", + "fill": "$text-primary", + "content": "245.2M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + } + ] + }, + { + "type": "frame", + "id": "FOCFR2", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCF2D", + "fill": "$text-secondary", + "content": "10/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "FOCF2N", + "fill": "$text-primary", + "content": "Nhập nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCF2A", + "fill": "#EF4444", + "content": "-12.3M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCF2B", + "fill": "$text-primary", + "content": "226.7M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + } + ] + }, + { + "type": "frame", + "id": "FOCFR3", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCF3D", + "fill": "$text-secondary", + "content": "09/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "FOCF3N", + "fill": "$text-primary", + "content": "Doanh thu bán hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCF3A", + "fill": "#22C55E", + "content": "+21.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCF3B", + "fill": "$text-primary", + "content": "239.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + } + ] + }, + { + "type": "frame", + "id": "FOCFR4", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCF4D", + "fill": "$text-secondary", + "content": "08/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "FOCF4N", + "fill": "$text-primary", + "content": "Lương nhân viên", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCF4A", + "fill": "#EF4444", + "content": "-45.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCF4B", + "fill": "$text-primary", + "content": "218.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + } + ] + }, + { + "type": "frame", + "id": "FOCFR5", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FOCF5D", + "fill": "$text-secondary", + "content": "07/02", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "FOCF5N", + "fill": "$text-primary", + "content": "Tiền thuê mặt bằng", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "FOCF5A", + "fill": "#EF4444", + "content": "-15.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "FOCF5B", + "fill": "$text-primary", + "content": "263.0M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/integration-hub.pen b/pencil-design/src/pages/tPOS/admin/integration-hub.pen index ed0b67bc..b026db75 100644 --- a/pencil-design/src/pages/tPOS/admin/integration-hub.pen +++ b/pencil-design/src/pages/tPOS/admin/integration-hub.pen @@ -12,224 +12,1677 @@ "clip": true, "children": [ { - "type": "frame", "id": "IHSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "IHSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "IHSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "IHLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "IHLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "IHSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "IHNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "IHNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "IHNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "IHNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "IHNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "IHNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "IHNavInteg", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHNavIntegI", "width": 20, "height": 20, "iconFontName": "puzzle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "IHNavIntegT", "fill": "#FFFFFF", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "IHNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "IHNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "IHNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "IHNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "IHUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "IHUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IHUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "IHSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "IHLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IHLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IHNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IHNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IHNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "IHNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IHNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IHNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IHNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IHNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IHNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IHNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IHNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IHNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IHNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IHNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "IHNavSetT", + "fill": "#FFFFFF", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "IHSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "IHUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "IHUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IHUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "IHMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "IHMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "IHHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "IHHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "IHBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "IHBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IHBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IHBread2", "fill": "$orange-primary", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "IHHeaderTitle", "fill": "$text-primary", "content": "Tích hợp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "IHHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "IHSearch", "width": 280, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IHSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "IHSearchT", "fill": "$text-tertiary", "content": "Tìm kiếm tích hợp...", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "IHContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "text", "id": "IHSectionPay", "fill": "$text-tertiary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "frame", "id": "IHPayRow", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "IHCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard1IconWrap", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard1IconT", "fill": "#3B82F6", "content": "VN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard1Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHCard1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "IHCard1StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "IHCard1Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard1Name", "fill": "$text-primary", "content": "VNPay", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard1Cat", "children": [ - {"type": "frame", "id": "IHCard1CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard1CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard1Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard1BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard2IconWrap", "width": 48, "height": 48, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard2IconT", "fill": "#EC4899", "content": "M", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard2Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHCard2Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "IHCard2StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "IHCard2Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard2Name", "fill": "$text-primary", "content": "Momo", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard2Cat", "children": [ - {"type": "frame", "id": "IHCard2CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard2CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard2Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard2BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard3IconWrap", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard3IconT", "fill": "#3B82F6", "content": "Z", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard3Status", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "IHCard3StatusT", "fill": "$text-tertiary", "content": "Chưa kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard3Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard3Name", "fill": "$text-primary", "content": "ZaloPay", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard3Cat", "children": [ - {"type": "frame", "id": "IHCard3CatBg", "fill": "#3B82F615", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard3CatT", "fill": "#3B82F6", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard3Btn", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard3BtnT", "fill": "#FFFFFF", "content": "Kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "text", "id": "IHSectionDel", "fill": "$text-tertiary", "content": "GIAO HÀNG", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "frame", "id": "IHDelRow", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "IHCard4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard4IconWrap", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard4IconT", "fill": "#22C55E", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard4Status", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHCard4Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "IHCard4StatusT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "IHCard4Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard4Name", "fill": "$text-primary", "content": "Grab", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard4Cat", "children": [ - {"type": "frame", "id": "IHCard4CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard4CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard4Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard4BtnT", "fill": "#EF4444", "content": "Ngắt kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard5Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard5IconWrap", "width": 48, "height": 48, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard5IconT", "fill": "#F59E0B", "content": "S", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard5Status", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "IHCard5Dot", "width": 8, "height": 8, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "IHCard5StatusT", "fill": "#F59E0B", "content": "Đang chờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "IHCard5Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard5Name", "fill": "$text-primary", "content": "ShopeeFood", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard5Cat", "children": [ - {"type": "frame", "id": "IHCard5CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard5CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard5Btn", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard5BtnT", "fill": "$text-secondary", "content": "Đang xử lý...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "IHCard6Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "IHCard6IconWrap", "width": 48, "height": 48, "fill": "#EF444420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard6IconT", "fill": "#EF4444", "content": "GF", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IHCard6Status", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "IHCard6StatusT", "fill": "$text-tertiary", "content": "Chưa kết nối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "IHCard6Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IHCard6Name", "fill": "$text-primary", "content": "GoFood", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "IHCard6Cat", "children": [ - {"type": "frame", "id": "IHCard6CatBg", "fill": "#22C55E15", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "IHCard6CatT", "fill": "#22C55E", "content": "Giao hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "IHCard6Btn", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IHCard6BtnT", "fill": "#FFFFFF", "content": "Kết nối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "IHHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "IHBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHBread1", + "fill": "$text-tertiary", + "content": "Hệ thống", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IHBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IHBread2", + "fill": "$orange-primary", + "content": "Tích hợp", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "IHHeaderTitle", + "fill": "$text-primary", + "content": "Tích hợp", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "IHHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "IHSearch", + "width": 280, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IHSearchI", + "width": 16, + "height": 16, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IHSearchT", + "fill": "$text-tertiary", + "content": "Tìm kiếm tích hợp...", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHContent", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "text", + "id": "IHSectionPay", + "fill": "$text-tertiary", + "content": "THANH TOÁN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "IHPayRow", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "IHCard1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard1Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard1IconWrap", + "width": 48, + "height": 48, + "fill": "#3B82F620", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard1IconT", + "fill": "#3B82F6", + "content": "VN", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard1Status", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHCard1Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "IHCard1StatusT", + "fill": "#22C55E", + "content": "Đã kết nối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard1Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard1Name", + "fill": "$text-primary", + "content": "VNPay", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard1Cat", + "children": [ + { + "type": "frame", + "id": "IHCard1CatBg", + "fill": "#3B82F615", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard1CatT", + "fill": "#3B82F6", + "content": "Thanh toán", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard1Btn", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard1BtnT", + "fill": "#EF4444", + "content": "Ngắt kết nối", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard2Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard2IconWrap", + "width": 48, + "height": 48, + "fill": "#EC489920", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard2IconT", + "fill": "#EC4899", + "content": "M", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard2Status", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHCard2Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "IHCard2StatusT", + "fill": "#22C55E", + "content": "Đã kết nối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard2Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard2Name", + "fill": "$text-primary", + "content": "Momo", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard2Cat", + "children": [ + { + "type": "frame", + "id": "IHCard2CatBg", + "fill": "#3B82F615", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard2CatT", + "fill": "#3B82F6", + "content": "Thanh toán", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard2Btn", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard2BtnT", + "fill": "#EF4444", + "content": "Ngắt kết nối", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard3Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard3IconWrap", + "width": 48, + "height": 48, + "fill": "#3B82F620", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard3IconT", + "fill": "#3B82F6", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard3Status", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IHCard3StatusT", + "fill": "$text-tertiary", + "content": "Chưa kết nối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard3Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard3Name", + "fill": "$text-primary", + "content": "ZaloPay", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard3Cat", + "children": [ + { + "type": "frame", + "id": "IHCard3CatBg", + "fill": "#3B82F615", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard3CatT", + "fill": "#3B82F6", + "content": "Thanh toán", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard3Btn", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard3BtnT", + "fill": "#FFFFFF", + "content": "Kết nối", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "IHSectionDel", + "fill": "$text-tertiary", + "content": "GIAO HÀNG", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "IHDelRow", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "IHCard4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard4Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard4IconWrap", + "width": 48, + "height": 48, + "fill": "#22C55E20", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard4IconT", + "fill": "#22C55E", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard4Status", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHCard4Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "IHCard4StatusT", + "fill": "#22C55E", + "content": "Đã kết nối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard4Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard4Name", + "fill": "$text-primary", + "content": "Grab", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard4Cat", + "children": [ + { + "type": "frame", + "id": "IHCard4CatBg", + "fill": "#22C55E15", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard4CatT", + "fill": "#22C55E", + "content": "Giao hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard4Btn", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard4BtnT", + "fill": "#EF4444", + "content": "Ngắt kết nối", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard5", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard5Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard5IconWrap", + "width": 48, + "height": 48, + "fill": "#F59E0B20", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard5IconT", + "fill": "#F59E0B", + "content": "S", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard5Status", + "fill": "#F59E0B20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHCard5Dot", + "width": 8, + "height": 8, + "fill": "#F59E0B", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "IHCard5StatusT", + "fill": "#F59E0B", + "content": "Đang chờ", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard5Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard5Name", + "fill": "$text-primary", + "content": "ShopeeFood", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard5Cat", + "children": [ + { + "type": "frame", + "id": "IHCard5CatBg", + "fill": "#22C55E15", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard5CatT", + "fill": "#22C55E", + "content": "Giao hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard5Btn", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard5BtnT", + "fill": "$text-secondary", + "content": "Đang xử lý...", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard6", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IHCard6Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "flex_start", + "children": [ + { + "type": "frame", + "id": "IHCard6IconWrap", + "width": 48, + "height": 48, + "fill": "#EF444420", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard6IconT", + "fill": "#EF4444", + "content": "GF", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IHCard6Status", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IHCard6StatusT", + "fill": "$text-tertiary", + "content": "Chưa kết nối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard6Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IHCard6Name", + "fill": "$text-primary", + "content": "GoFood", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "IHCard6Cat", + "children": [ + { + "type": "frame", + "id": "IHCard6CatBg", + "fill": "#22C55E15", + "cornerRadius": 6, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "IHCard6CatT", + "fill": "#22C55E", + "content": "Giao hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IHCard6Btn", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IHCard6BtnT", + "fill": "#FFFFFF", + "content": "Kết nối", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/inventory-dashboard.pen b/pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen index 29365927..d62bfb7d 100644 --- a/pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen +++ b/pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen @@ -2,135 +2,1614 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "InvDash", "name": "Admin/InventoryDashboard", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "type": "frame", + "id": "InvDash", + "name": "Admin/InventoryDashboard", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "clip": true, "children": [ - {"type": "frame", "id": "IVSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "IVLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "IVLogoIc", "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": "IVLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "IVLogoGr", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "IVLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "IVLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "IVNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "IVNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "IVNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IVNavInvI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "IVNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "IVUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "IVUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "IVUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "IVUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "IVUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "IVMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "IVHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "IVTitle", "fill": "$text-primary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "IVActions", "gap": 12, "children": [ - {"type": "frame", "id": "IVStore", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IVStoreI", "width": 16, "height": 16, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "IVStoreT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "IVStoreChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "IVSearch", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "IVSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "IVSearchT", "fill": "$text-tertiary", "content": "Tìm sản phẩm...", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "IVContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [ - {"type": "frame", "id": "IVKPIs", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "IVK1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "IVK1L", "fill": "$text-tertiary", "content": "Tổng sản phẩm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVK1V", "fill": "$text-primary", "content": "245", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "IVK1C", "fill": "$text-tertiary", "content": "Đang kinh doanh", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "IVK2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "IVK2L", "fill": "$text-tertiary", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVK2V", "fill": "#F59E0B", "content": "12", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "IVK2C", "fill": "#F59E0B", "content": "Cần nhập thêm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "IVK3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "IVK3L", "fill": "$text-tertiary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVK3V", "fill": "#EF4444", "content": "3", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "IVK3C", "fill": "#EF4444", "content": "Ngừng bán", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "IVK4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "IVK4L", "fill": "$text-tertiary", "content": "Sắp hết hạn", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVK4V", "fill": "#EF4444", "content": "5", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "IVK4C", "fill": "#EF4444", "content": "< 7 ngày", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "IVTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "IVTHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "IVTH1", "width": 220, "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "IVTH2", "width": 120, "fill": "$text-tertiary", "content": "Mã SKU", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "IVTH3", "width": 100, "fill": "$text-tertiary", "content": "Tồn kho", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "IVTH4", "width": 100, "fill": "$text-tertiary", "content": "Ngưỡng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "IVTH5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "IVTH6", "fill": "$text-tertiary", "content": "Cập nhật", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "IVR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "IVR1N", "width": 220, "fill": "$text-primary", "content": "☕ Cà phê Arabica", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR1SKU", "width": 120, "fill": "$text-tertiary", "content": "CF-ARB-001", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR1Qty", "width": 100, "fill": "$text-primary", "content": "156 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR1Min", "width": 100, "fill": "$text-tertiary", "content": "20 kg", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR1St", "width": 120, "children": [{"type": "frame", "id": "IVR1StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR1StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR1Up", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "IVR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "IVR2N", "width": 220, "fill": "$text-primary", "content": "🥛 Sữa tươi", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR2SKU", "width": 120, "fill": "$text-tertiary", "content": "ML-FRE-002", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR2Qty", "width": 100, "fill": "#F59E0B", "content": "8 lít", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR2Min", "width": 100, "fill": "$text-tertiary", "content": "20 lít", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR2St", "width": 120, "children": [{"type": "frame", "id": "IVR2StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR2StT", "fill": "#F59E0B", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR2Up", "fill": "$text-tertiary", "content": "2 giờ trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "IVR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "IVR3N", "width": 220, "fill": "$text-primary", "content": "🍬 Đường", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR3SKU", "width": 120, "fill": "$text-tertiary", "content": "SG-WHT-003", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR3Qty", "width": 100, "fill": "$text-primary", "content": "45 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR3Min", "width": 100, "fill": "$text-tertiary", "content": "10 kg", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR3St", "width": 120, "children": [{"type": "frame", "id": "IVR3StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR3StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR3Up", "fill": "$text-tertiary", "content": "Hôm qua", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "IVR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "IVR4N", "width": 220, "fill": "$text-primary", "content": "🍵 Trà oolong", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR4SKU", "width": 120, "fill": "$text-tertiary", "content": "TE-OOL-004", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR4Qty", "width": 100, "fill": "#F59E0B", "content": "5 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR4Min", "width": 100, "fill": "$text-tertiary", "content": "15 kg", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR4St", "width": 120, "children": [{"type": "frame", "id": "IVR4StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR4StT", "fill": "#F59E0B", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR4Up", "fill": "$text-tertiary", "content": "3 ngày trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "IVR5", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "IVR5N", "width": 220, "fill": "$text-primary", "content": "🍯 Syrup vanilla", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR5SKU", "width": 120, "fill": "$text-tertiary", "content": "SY-VAN-005", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR5Qty", "width": 100, "fill": "#EF4444", "content": "0 chai", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR5Min", "width": 100, "fill": "$text-tertiary", "content": "10 chai", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR5St", "width": 120, "children": [{"type": "frame", "id": "IVR5StB", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR5StT", "fill": "#EF4444", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR5Up", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "IVR6", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "IVR6N", "width": 220, "fill": "$text-primary", "content": "🥤 Ly giấy", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "IVR6SKU", "width": 120, "fill": "$text-tertiary", "content": "CU-PAP-006", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "IVR6Qty", "width": 100, "fill": "$text-primary", "content": "500 cái", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "IVR6Min", "width": 100, "fill": "$text-tertiary", "content": "100 cái", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "IVR6St", "width": 120, "children": [{"type": "frame", "id": "IVR6StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR6StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "IVR6Up", "fill": "$text-tertiary", "content": "5 ngày trước", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "IVSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "IVLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IVLogoIc", + "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": "IVLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "IVLogoGr", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "IVLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IVLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "IVNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IVNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IVNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IVNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "IVNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IVNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IVNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "IVNavInvT", + "fill": "#FFFFFF", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "IVNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IVNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IVNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IVNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "IVNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "IVNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IVNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVUsr", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IVUsrAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVUsrAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "IVUsrInf", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "IVUsrN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVUsrR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "IVHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVTitle", + "fill": "$text-primary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "IVActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "IVStore", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVStoreI", + "width": 16, + "height": 16, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "IVStoreT", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "IVStoreChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "IVSearch", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "IVSearchI", + "width": 16, + "height": 16, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "IVSearchT", + "fill": "$text-tertiary", + "content": "Tìm sản phẩm...", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "IVKPIs", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "IVK1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "IVK1L", + "fill": "$text-tertiary", + "content": "Tổng sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVK1V", + "fill": "$text-primary", + "content": "245", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IVK1C", + "fill": "$text-tertiary", + "content": "Đang kinh doanh", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "IVK2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "IVK2L", + "fill": "$text-tertiary", + "content": "Sắp hết", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVK2V", + "fill": "#F59E0B", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IVK2C", + "fill": "#F59E0B", + "content": "Cần nhập thêm", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "IVK3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "IVK3L", + "fill": "$text-tertiary", + "content": "Hết hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVK3V", + "fill": "#EF4444", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IVK3C", + "fill": "#EF4444", + "content": "Ngừng bán", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "IVK4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "IVK4L", + "fill": "$text-tertiary", + "content": "Sắp hết hạn", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVK4V", + "fill": "#EF4444", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "IVK4C", + "fill": "#EF4444", + "content": "< 7 ngày", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "IVTable", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "IVTHead", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "IVTH1", + "width": 220, + "fill": "$text-tertiary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVTH2", + "width": 120, + "fill": "$text-tertiary", + "content": "Mã SKU", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVTH3", + "width": 100, + "fill": "$text-tertiary", + "content": "Tồn kho", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVTH4", + "width": 100, + "fill": "$text-tertiary", + "content": "Ngưỡng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVTH5", + "width": 120, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVTH6", + "fill": "$text-tertiary", + "content": "Cập nhật", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "IVR1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR1N", + "width": 220, + "fill": "$text-primary", + "content": "☕ Cà phê Arabica", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR1SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "CF-ARB-001", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR1Qty", + "width": 100, + "fill": "$text-primary", + "content": "156 kg", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR1Min", + "width": 100, + "fill": "$text-tertiary", + "content": "20 kg", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR1St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR1StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR1StT", + "fill": "#22C55E", + "content": "Đủ hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR1Up", + "fill": "$text-tertiary", + "content": "Hôm nay", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "IVR2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR2N", + "width": 220, + "fill": "$text-primary", + "content": "🥛 Sữa tươi", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR2SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "ML-FRE-002", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR2Qty", + "width": 100, + "fill": "#F59E0B", + "content": "8 lít", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR2Min", + "width": 100, + "fill": "$text-tertiary", + "content": "20 lít", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR2St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR2StB", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR2StT", + "fill": "#F59E0B", + "content": "Sắp hết", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR2Up", + "fill": "$text-tertiary", + "content": "2 giờ trước", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "IVR3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR3N", + "width": 220, + "fill": "$text-primary", + "content": "🍬 Đường", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR3SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "SG-WHT-003", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR3Qty", + "width": 100, + "fill": "$text-primary", + "content": "45 kg", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR3Min", + "width": 100, + "fill": "$text-tertiary", + "content": "10 kg", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR3St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR3StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR3StT", + "fill": "#22C55E", + "content": "Đủ hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR3Up", + "fill": "$text-tertiary", + "content": "Hôm qua", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "IVR4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR4N", + "width": 220, + "fill": "$text-primary", + "content": "🍵 Trà oolong", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR4SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "TE-OOL-004", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR4Qty", + "width": 100, + "fill": "#F59E0B", + "content": "5 kg", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR4Min", + "width": 100, + "fill": "$text-tertiary", + "content": "15 kg", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR4St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR4StB", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR4StT", + "fill": "#F59E0B", + "content": "Sắp hết", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR4Up", + "fill": "$text-tertiary", + "content": "3 ngày trước", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "IVR5", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR5N", + "width": 220, + "fill": "$text-primary", + "content": "🍯 Syrup vanilla", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR5SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "SY-VAN-005", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR5Qty", + "width": 100, + "fill": "#EF4444", + "content": "0 chai", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR5Min", + "width": 100, + "fill": "$text-tertiary", + "content": "10 chai", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR5St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR5StB", + "fill": "#EF444420", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR5StT", + "fill": "#EF4444", + "content": "Hết hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR5Up", + "fill": "$text-tertiary", + "content": "Hôm nay", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "IVR6", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "IVR6N", + "width": 220, + "fill": "$text-primary", + "content": "🥤 Ly giấy", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "IVR6SKU", + "width": 120, + "fill": "$text-tertiary", + "content": "CU-PAP-006", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "IVR6Qty", + "width": 100, + "fill": "$text-primary", + "content": "500 cái", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "IVR6Min", + "width": 100, + "fill": "$text-tertiary", + "content": "100 cái", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "IVR6St", + "width": 120, + "children": [ + { + "type": "frame", + "id": "IVR6StB", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "IVR6StT", + "fill": "#22C55E", + "content": "Đủ hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "IVR6Up", + "fill": "$text-tertiary", + "content": "5 ngày trước", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + } ] } ], - "variables": {"bg-elevated":{"type":"color","value":"#1A1A1D"},"bg-interactive":{"type":"color","value":"#2A2A2E"},"bg-page":{"type":"color","value":"#0A0A0B"},"border-default":{"type":"color","value":"#2A2A2E"},"border-subtle":{"type":"color","value":"#1F1F23"},"orange-primary":{"type":"color","value":"#FF5C00"},"text-primary":{"type":"color","value":"#FFFFFF"},"text-secondary":{"type":"color","value":"#ADADB0"},"text-tertiary":{"type":"color","value":"#8B8B90"}} -} + "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/loyalty-program.pen b/pencil-design/src/pages/tPOS/admin/loyalty-program.pen index f8c092ad..fd686d11 100644 --- a/pencil-design/src/pages/tPOS/admin/loyalty-program.pen +++ b/pencil-design/src/pages/tPOS/admin/loyalty-program.pen @@ -12,273 +12,1980 @@ "clip": true, "children": [ { - "type": "frame", "id": "LPSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "LPSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "LPSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LPLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LPLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "LPLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "LPLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "LPLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "LPSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "LPNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "LPNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "LPNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "LPNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "LPNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "LPNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "LPNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LPNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "LPNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LPNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "LPNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LPNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "LPNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "LPNavCust", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavCustI", "width": 20, "height": 20, "iconFontName": "contact", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "LPNavCustT", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "LPNavLoyalty", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavLoyaltyI", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "LPNavLoyaltyT", "fill": "#FFFFFF", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LPNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "LPNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "LPNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "LPNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "LPNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "LPSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LPUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LPUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LPUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "LPUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "LPUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "LPSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LPLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "LPLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "LPLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LPLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "LPNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "LPNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "LPNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "LPNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "LPNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LPNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LPNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LPNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LPNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "LPNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "LPNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "LPNavCustT", + "fill": "#FFFFFF", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "LPNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "LPNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "LPNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LPNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "LPNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LPUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "LPUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "LPUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LPUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "LPMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "LPMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "LPHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LPHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "LPBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "LPBread1", "fill": "$text-tertiary", "content": "Kinh doanh", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "LPBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "LPBread2", "fill": "$orange-primary", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "LPHeaderTitle", "fill": "$text-primary", "content": "Chương trình Loyalty", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LPHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "LPToggleLabel", "fill": "$text-secondary", "content": "Trạng thái:", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "LPToggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [ - {"type": "frame", "id": "LPToggleDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]}, - {"type": "text", "id": "LPToggleStatus", "fill": "#22C55E", "content": "Đang bật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "LPPointsSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "LPPointsHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "LPPointsTitle", "fill": "$text-primary", "content": "Quy tắc tích điểm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "LPPointsSave", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [ - {"type": "text", "id": "LPPointsSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPPointsRule", "width": "fill_container", "gap": 16, "alignItems": "center", "children": [ - {"type": "text", "id": "LPPointsRuleT1", "fill": "$text-secondary", "content": "Cứ mỗi", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "LPPointsInput", "width": 140, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LPPointsInputV", "fill": "$text-primary", "content": "10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "LPPointsRuleT2", "fill": "$text-secondary", "content": "chi tiêu, khách hàng nhận được", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "LPPointsInput2", "width": 80, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LPPointsInput2V", "fill": "$orange-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "LPPointsRuleT3", "fill": "$text-secondary", "content": "điểm thưởng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "LPPointsInfo", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 10, "padding": [12, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPPointsInfoI", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "LPPointsInfoT", "fill": "$text-secondary", "content": "Điểm sẽ được tích lũy tự động sau mỗi giao dịch thành công", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "LPTiersSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "LPTiersTitle", "fill": "$text-primary", "content": "Bậc thành viên", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "LPTiersGrid", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "LPTier1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#CD7F3240", "sides": ["top", "right", "bottom", "left"]}, "children": [ - {"type": "frame", "id": "LPT1Icon", "width": 48, "height": 48, "fill": "#CD7F3220", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT1IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#CD7F32"} - ]}, - {"type": "text", "id": "LPT1Name", "fill": "#CD7F32", "content": "Bronze", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "LPT1Desc", "fill": "$text-tertiary", "content": "Từ 0 điểm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LPT1Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "LPT1Benefits", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "LPT1B1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT1B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT1B1T", "fill": "$text-secondary", "content": "Tích điểm cơ bản", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "LPT1B2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT1B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT1B2T", "fill": "$text-secondary", "content": "Ưu đãi sinh nhật", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "LPTier2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#C0C0C040", "sides": ["top", "right", "bottom", "left"]}, "children": [ - {"type": "frame", "id": "LPT2Icon", "width": 48, "height": 48, "fill": "#C0C0C020", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT2IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#C0C0C0"} - ]}, - {"type": "text", "id": "LPT2Name", "fill": "#C0C0C0", "content": "Silver", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "LPT2Desc", "fill": "$text-tertiary", "content": "Từ 500 điểm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LPT2Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "LPT2Benefits", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "LPT2B1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT2B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT2B1T", "fill": "$text-secondary", "content": "Giảm 5% mọi đơn", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "LPT2B2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT2B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT2B2T", "fill": "$text-secondary", "content": "x1.5 điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "LPTier3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#FFD70040", "sides": ["top", "right", "bottom", "left"]}, "children": [ - {"type": "frame", "id": "LPT3Icon", "width": 48, "height": 48, "fill": "#FFD70020", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT3IconI", "width": 24, "height": 24, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#FFD700"} - ]}, - {"type": "text", "id": "LPT3Name", "fill": "#FFD700", "content": "Gold", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "LPT3Desc", "fill": "$text-tertiary", "content": "Từ 2,000 điểm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LPT3Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "LPT3Benefits", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "LPT3B1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT3B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT3B1T", "fill": "$text-secondary", "content": "Giảm 10% mọi đơn", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "LPT3B2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT3B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT3B2T", "fill": "$text-secondary", "content": "x2 điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "LPTier4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "#E5E4E240", "sides": ["top", "right", "bottom", "left"]}, "children": [ - {"type": "frame", "id": "LPT4Icon", "width": 48, "height": 48, "fill": "#A78BFA20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT4IconI", "width": 24, "height": 24, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#A78BFA"} - ]}, - {"type": "text", "id": "LPT4Name", "fill": "#A78BFA", "content": "Platinum", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "LPT4Desc", "fill": "$text-tertiary", "content": "Từ 5,000 điểm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LPT4Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "LPT4Benefits", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "LPT4B1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT4B1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT4B1T", "fill": "$text-secondary", "content": "Giảm 15% mọi đơn", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "LPT4B2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LPT4B2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "LPT4B2T", "fill": "$text-secondary", "content": "x3 điểm + ưu đãi VIP", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "LPRewardsSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "LPRewardsTitle", "fill": "$text-primary", "content": "Danh sách phần thưởng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "LPRewardsTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "LPRTHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "LPRTh1", "width": 250, "fill": "$text-tertiary", "content": "Tên phần thưởng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "LPRTh2", "width": 120, "fill": "$text-tertiary", "content": "Điểm cần", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "LPRTh3", "width": 150, "fill": "$text-tertiary", "content": "Loại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "LPRTh4", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LPRRow1", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "LPRR1C1", "width": 250, "fill": "$text-primary", "content": "Giảm 20% đơn hàng tiếp theo", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "LPRR1C2", "width": 120, "fill": "$orange-primary", "content": "100 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "LPRR1C3", "width": 150, "children": [ - {"type": "frame", "id": "LPRR1C3F", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR1C3T", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPRR1C4", "width": 120, "children": [ - {"type": "frame", "id": "LPRR1C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR1C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "LPRRow2", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "LPRR2C1", "width": 250, "fill": "$text-primary", "content": "1 ly cà phê miễn phí (size M)", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "LPRR2C2", "width": 120, "fill": "$orange-primary", "content": "200 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "LPRR2C3", "width": 150, "children": [ - {"type": "frame", "id": "LPRR2C3F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR2C3T", "fill": "#22C55E", "content": "Sản phẩm miễn phí", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPRR2C4", "width": 120, "children": [ - {"type": "frame", "id": "LPRR2C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR2C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "LPRRow3", "width": "fill_container", "height": 52, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "LPRR3C1", "width": 250, "fill": "$text-primary", "content": "Combo bánh + nước giảm 50%", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "LPRR3C2", "width": 120, "fill": "$orange-primary", "content": "350 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "LPRR3C3", "width": 150, "children": [ - {"type": "frame", "id": "LPRR3C3F", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR3C3T", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPRR3C4", "width": 120, "children": [ - {"type": "frame", "id": "LPRR3C4F", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR3C4T", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "LPRRow4", "width": "fill_container", "height": 52, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "LPRR4C1", "width": 250, "fill": "$text-primary", "content": "Merchandise GoodGo (ly, áo)", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "LPRR4C2", "width": 120, "fill": "$orange-primary", "content": "500 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "LPRR4C3", "width": 150, "children": [ - {"type": "frame", "id": "LPRR4C3F", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR4C3T", "fill": "#F59E0B", "content": "Quà tặng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LPRR4C4", "width": 120, "children": [ - {"type": "frame", "id": "LPRR4C4F", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "LPRR4C4T", "fill": "$text-tertiary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "LPHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LPHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "LPBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPBread1", + "fill": "$text-tertiary", + "content": "Kinh doanh", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "LPBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "LPBread2", + "fill": "$orange-primary", + "content": "Loyalty", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "LPHeaderTitle", + "fill": "$text-primary", + "content": "Chương trình Loyalty", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "LPHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPToggleLabel", + "fill": "$text-secondary", + "content": "Trạng thái:", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "LPToggle", + "width": 44, + "height": 24, + "fill": "#22C55E", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LPToggleDot", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + }, + { + "type": "text", + "id": "LPToggleStatus", + "fill": "#22C55E", + "content": "Đang bật", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "frame", + "id": "LPPointsSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "LPPointsHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPPointsTitle", + "fill": "$text-primary", + "content": "Quy tắc tích điểm", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPPointsSave", + "fill": "$orange-primary", + "cornerRadius": 8, + "padding": [ + 8, + 14 + ], + "children": [ + { + "type": "text", + "id": "LPPointsSaveT", + "fill": "#FFFFFF", + "content": "Lưu thay đổi", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPPointsRule", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPPointsRuleT1", + "fill": "$text-secondary", + "content": "Cứ mỗi", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "frame", + "id": "LPPointsInput", + "width": 140, + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPPointsInputV", + "fill": "$text-primary", + "content": "10,000₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "LPPointsRuleT2", + "fill": "$text-secondary", + "content": "chi tiêu, khách hàng nhận được", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "frame", + "id": "LPPointsInput2", + "width": 80, + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPPointsInput2V", + "fill": "$orange-primary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "LPPointsRuleT3", + "fill": "$text-secondary", + "content": "điểm thưởng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "LPPointsInfo", + "width": "fill_container", + "fill": "#FF5C0010", + "cornerRadius": 10, + "padding": [ + 12, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPPointsInfoI", + "width": 18, + "height": 18, + "iconFontName": "info", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "LPPointsInfoT", + "fill": "$text-secondary", + "content": "Điểm sẽ được tích lũy tự động sau mỗi giao dịch thành công", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPTiersSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "LPTiersTitle", + "fill": "$text-primary", + "content": "Bậc thành viên", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPTiersGrid", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "LPTier1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "#CD7F3240", + "sides": [ + "top", + "right", + "bottom", + "left" + ] + }, + "children": [ + { + "type": "frame", + "id": "LPT1Icon", + "width": 48, + "height": 48, + "fill": "#CD7F3220", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT1IconI", + "width": 24, + "height": 24, + "iconFontName": "award", + "iconFontFamily": "lucide", + "fill": "#CD7F32" + } + ] + }, + { + "type": "text", + "id": "LPT1Name", + "fill": "#CD7F32", + "content": "Bronze", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LPT1Desc", + "fill": "$text-tertiary", + "content": "Từ 0 điểm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "LPT1Divider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "LPT1Benefits", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "LPT1B1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT1B1I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT1B1T", + "fill": "$text-secondary", + "content": "Tích điểm cơ bản", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "LPT1B2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT1B2I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT1B2T", + "fill": "$text-secondary", + "content": "Ưu đãi sinh nhật", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPTier2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "#C0C0C040", + "sides": [ + "top", + "right", + "bottom", + "left" + ] + }, + "children": [ + { + "type": "frame", + "id": "LPT2Icon", + "width": 48, + "height": 48, + "fill": "#C0C0C020", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT2IconI", + "width": 24, + "height": 24, + "iconFontName": "award", + "iconFontFamily": "lucide", + "fill": "#C0C0C0" + } + ] + }, + { + "type": "text", + "id": "LPT2Name", + "fill": "#C0C0C0", + "content": "Silver", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LPT2Desc", + "fill": "$text-tertiary", + "content": "Từ 500 điểm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "LPT2Divider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "LPT2Benefits", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "LPT2B1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT2B1I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT2B1T", + "fill": "$text-secondary", + "content": "Giảm 5% mọi đơn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "LPT2B2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT2B2I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT2B2T", + "fill": "$text-secondary", + "content": "x1.5 điểm thưởng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPTier3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "#FFD70040", + "sides": [ + "top", + "right", + "bottom", + "left" + ] + }, + "children": [ + { + "type": "frame", + "id": "LPT3Icon", + "width": 48, + "height": 48, + "fill": "#FFD70020", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT3IconI", + "width": 24, + "height": 24, + "iconFontName": "award", + "iconFontFamily": "lucide", + "fill": "#FFD700" + } + ] + }, + { + "type": "text", + "id": "LPT3Name", + "fill": "#FFD700", + "content": "Gold", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LPT3Desc", + "fill": "$text-tertiary", + "content": "Từ 2,000 điểm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "LPT3Divider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "LPT3Benefits", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "LPT3B1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT3B1I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT3B1T", + "fill": "$text-secondary", + "content": "Giảm 10% mọi đơn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "LPT3B2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT3B2I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT3B2T", + "fill": "$text-secondary", + "content": "x2 điểm thưởng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPTier4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "#E5E4E240", + "sides": [ + "top", + "right", + "bottom", + "left" + ] + }, + "children": [ + { + "type": "frame", + "id": "LPT4Icon", + "width": 48, + "height": 48, + "fill": "#A78BFA20", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT4IconI", + "width": 24, + "height": 24, + "iconFontName": "crown", + "iconFontFamily": "lucide", + "fill": "#A78BFA" + } + ] + }, + { + "type": "text", + "id": "LPT4Name", + "fill": "#A78BFA", + "content": "Platinum", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LPT4Desc", + "fill": "$text-tertiary", + "content": "Từ 5,000 điểm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "LPT4Divider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "LPT4Benefits", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "LPT4B1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT4B1I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT4B1T", + "fill": "$text-secondary", + "content": "Giảm 15% mọi đơn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "LPT4B2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "LPT4B2I", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "LPT4B2T", + "fill": "$text-secondary", + "content": "x3 điểm + ưu đãi VIP", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRewardsSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "LPRewardsTitle", + "fill": "$text-primary", + "content": "Danh sách phần thưởng", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPRewardsTable", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "LPRTHead", + "width": "fill_container", + "height": 48, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPRTh1", + "width": 250, + "fill": "$text-tertiary", + "content": "Tên phần thưởng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LPRTh2", + "width": 120, + "fill": "$text-tertiary", + "content": "Điểm cần", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LPRTh3", + "width": 150, + "fill": "$text-tertiary", + "content": "Loại", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LPRTh4", + "width": 120, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "LPRRow1", + "width": "fill_container", + "height": 52, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPRR1C1", + "width": 250, + "fill": "$text-primary", + "content": "Giảm 20% đơn hàng tiếp theo", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "LPRR1C2", + "width": 120, + "fill": "$orange-primary", + "content": "100 điểm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPRR1C3", + "width": 150, + "children": [ + { + "type": "frame", + "id": "LPRR1C3F", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR1C3T", + "fill": "#3B82F6", + "content": "Giảm giá", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRR1C4", + "width": 120, + "children": [ + { + "type": "frame", + "id": "LPRR1C4F", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR1C4T", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRRow2", + "width": "fill_container", + "height": 52, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPRR2C1", + "width": 250, + "fill": "$text-primary", + "content": "1 ly cà phê miễn phí (size M)", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "LPRR2C2", + "width": 120, + "fill": "$orange-primary", + "content": "200 điểm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPRR2C3", + "width": 150, + "children": [ + { + "type": "frame", + "id": "LPRR2C3F", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR2C3T", + "fill": "#22C55E", + "content": "Sản phẩm miễn phí", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRR2C4", + "width": 120, + "children": [ + { + "type": "frame", + "id": "LPRR2C4F", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR2C4T", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRRow3", + "width": "fill_container", + "height": 52, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPRR3C1", + "width": 250, + "fill": "$text-primary", + "content": "Combo bánh + nước giảm 50%", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "LPRR3C2", + "width": 120, + "fill": "$orange-primary", + "content": "350 điểm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPRR3C3", + "width": 150, + "children": [ + { + "type": "frame", + "id": "LPRR3C3F", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR3C3T", + "fill": "#3B82F6", + "content": "Giảm giá", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRR3C4", + "width": 120, + "children": [ + { + "type": "frame", + "id": "LPRR3C4F", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR3C4T", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRRow4", + "width": "fill_container", + "height": 52, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LPRR4C1", + "width": 250, + "fill": "$text-primary", + "content": "Merchandise GoodGo (ly, áo)", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "LPRR4C2", + "width": 120, + "fill": "$orange-primary", + "content": "500 điểm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "LPRR4C3", + "width": 150, + "children": [ + { + "type": "frame", + "id": "LPRR4C3F", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR4C3T", + "fill": "#F59E0B", + "content": "Quà tặng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LPRR4C4", + "width": 120, + "children": [ + { + "type": "frame", + "id": "LPRR4C4F", + "fill": "#8B8B9020", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "LPRR4C4T", + "fill": "$text-tertiary", + "content": "Tạm ngưng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/menu-builder.pen b/pencil-design/src/pages/tPOS/admin/menu-builder.pen index 20cad7f4..2f3e73bb 100644 --- a/pencil-design/src/pages/tPOS/admin/menu-builder.pen +++ b/pencil-design/src/pages/tPOS/admin/menu-builder.pen @@ -12,198 +12,1619 @@ "clip": true, "children": [ { - "type": "frame", "id": "MBSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "MBSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "MBSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MBLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MBLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "MBLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MBLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "MBLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MBSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "MBNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "MBNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MBNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "MBNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "MBNavMenu", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBNavMenuI", "width": 20, "height": 20, "iconFontName": "layout-list", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MBNavMenuT", "fill": "#FFFFFF", "content": "Menu Builder", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MBNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MBNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "MBNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "MBNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MBNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MBNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MBNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "MBSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MBUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MBUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MBUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MBUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "MBUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "MBSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MBLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "MBLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MBLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "MBLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "MBNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MBNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MBNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MBNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "MBNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MBNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "MBNavProdT", + "fill": "#FFFFFF", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "MBNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MBNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MBNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MBNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MBNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MBNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MBUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "MBUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MBUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "MBUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "MBMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "MBMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "MBHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MBHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "MBStoreSel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBStoreSelI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "MBStoreSelT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "MBStoreSelChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "MBHeaderTitleWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MBHeaderTitle", "fill": "$text-primary", "content": "Menu chính", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "MBHeaderSub", "fill": "$text-tertiary", "content": "30 sản phẩm · Cập nhật 10/02/2026", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MBPublishBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBPublishI", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MBPublishT", "fill": "#FFFFFF", "content": "Publish", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - - {"type": "frame", "id": "MBBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "MBLeftPanel", "width": 240, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "MBLeftHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "MBLeftTitle", "fill": "$text-primary", "content": "Sản phẩm có sẵn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MBSearch", "width": "fill_container", "padding": [8, 12], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBSearchInput", "width": "fill_container", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 10], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBSearchI", "width": 14, "height": 14, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBSearchT", "fill": "$text-tertiary", "content": "Tìm sản phẩm...", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MBLeftList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [4, 0], "children": [ - {"type": "frame", "id": "MBCat1", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBCat1Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBCat1I", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "MBCat1T", "fill": "$text-primary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MBCat1Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [ - {"type": "text", "id": "MBCat1CountT", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "MBCat2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBCat2Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBCat2I", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "MBCat2T", "fill": "$text-primary", "content": "Trà sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MBCat2Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [ - {"type": "text", "id": "MBCat2CountT", "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "MBCat3", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MBCat3Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBCat3I", "width": 16, "height": 16, "iconFontName": "citrus", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "MBCat3T", "fill": "$text-primary", "content": "Nước ép", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MBCat3Count", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 8], "children": [ - {"type": "text", "id": "MBCat3CountT", "fill": "$text-secondary", "content": "10", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "MBRight", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 16, "clip": true, "children": [ - {"type": "text", "id": "MBMenuTitle", "fill": "$text-primary", "content": "Menu hiện tại", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - - {"type": "frame", "id": "MBMenuCat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "MBMenuCat1Head", "width": "fill_container", "padding": [12, 16], "fill": "#FF5C0010", "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuCat1Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuCat1DragI", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "MBMenuCat1CofI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "MBMenuCat1Title", "fill": "$text-primary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "MBMenuCat1Count", "fill": "$text-tertiary", "content": "8 sản phẩm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MBMenuItem1", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuItem1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem1Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem1T", "fill": "$text-primary", "content": "Espresso", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem1P", "fill": "$text-secondary", "content": "35,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "MBMenuItem2", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuItem2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem2T", "fill": "$text-primary", "content": "Americano", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem2P", "fill": "$text-secondary", "content": "39,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "MBMenuItem3", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuItem3L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem3T", "fill": "$text-primary", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem3P", "fill": "$text-secondary", "content": "45,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "MBMenuItem4", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MBMenuItem4L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem4Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem4T", "fill": "$text-primary", "content": "Latte", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem4P", "fill": "$text-secondary", "content": "49,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - - {"type": "frame", "id": "MBMenuCat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "MBMenuCat2Head", "width": "fill_container", "padding": [12, 16], "fill": "#A855F710", "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuCat2Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuCat2DragI", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "MBMenuCat2CupI", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "MBMenuCat2Title", "fill": "$text-primary", "content": "Trà sữa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "MBMenuCat2Count", "fill": "$text-tertiary", "content": "5 sản phẩm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MBMenuItem5", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MBMenuItem5L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem5Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem5T", "fill": "$text-primary", "content": "Trà sữa truyền thống", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem5P", "fill": "$text-secondary", "content": "35,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "MBMenuItem6", "width": "fill_container", "padding": [10, 16, 10, 40], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MBMenuItem6L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MBMenuItem6Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MBMenuItem6T", "fill": "$text-primary", "content": "Trà sữa matcha", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "MBMenuItem6P", "fill": "$text-secondary", "content": "42,000 ₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "MBHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBHeaderLeft", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBStoreSel", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBStoreSelI", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "MBStoreSelT", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "MBStoreSelChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "MBHeaderTitleWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MBHeaderTitle", + "fill": "$text-primary", + "content": "Menu chính", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "MBHeaderSub", + "fill": "$text-tertiary", + "content": "30 sản phẩm · Cập nhật 10/02/2026", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBPublishBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBPublishI", + "width": 18, + "height": 18, + "iconFontName": "send", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "MBPublishT", + "fill": "#FFFFFF", + "content": "Publish", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBBody", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "MBLeftPanel", + "width": 240, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "MBLeftHeader", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "MBLeftTitle", + "fill": "$text-primary", + "content": "Sản phẩm có sẵn", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "MBSearch", + "width": "fill_container", + "padding": [ + 8, + 12 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBSearchInput", + "width": "fill_container", + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 0, + 10 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBSearchI", + "width": 14, + "height": 14, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBSearchT", + "fill": "$text-tertiary", + "content": "Tìm sản phẩm...", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBLeftList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "frame", + "id": "MBCat1", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBCat1Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBCat1I", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "MBCat1T", + "fill": "$text-primary", + "content": "Cà phê", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBCat1Count", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "MBCat1CountT", + "fill": "$text-secondary", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBCat2", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBCat2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBCat2I", + "width": 16, + "height": 16, + "iconFontName": "cup-soda", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "MBCat2T", + "fill": "$text-primary", + "content": "Trà sữa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBCat2Count", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "MBCat2CountT", + "fill": "$text-secondary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBCat3", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBCat3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBCat3I", + "width": 16, + "height": 16, + "iconFontName": "citrus", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "MBCat3T", + "fill": "$text-primary", + "content": "Nước ép", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MBCat3Count", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "MBCat3CountT", + "fill": "$text-secondary", + "content": "10", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBRight", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 16, + "clip": true, + "children": [ + { + "type": "text", + "id": "MBMenuTitle", + "fill": "$text-primary", + "content": "Menu hiện tại", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "MBMenuCat1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "MBMenuCat1Head", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "fill": "#FF5C0010", + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuCat1Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuCat1DragI", + "width": 16, + "height": 16, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "MBMenuCat1CofI", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "MBMenuCat1Title", + "fill": "$text-primary", + "content": "Cà phê", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "MBMenuCat1Count", + "fill": "$text-tertiary", + "content": "8 sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem1", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuItem1L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem1Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem1T", + "fill": "$text-primary", + "content": "Espresso", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem1P", + "fill": "$text-secondary", + "content": "35,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem2", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuItem2L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem2T", + "fill": "$text-primary", + "content": "Americano", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem2P", + "fill": "$text-secondary", + "content": "39,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem3", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuItem3L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem3T", + "fill": "$text-primary", + "content": "Cappuccino", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem3P", + "fill": "$text-secondary", + "content": "45,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem4", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBMenuItem4L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem4Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem4T", + "fill": "$text-primary", + "content": "Latte", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem4P", + "fill": "$text-secondary", + "content": "49,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MBMenuCat2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "MBMenuCat2Head", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "fill": "#A855F710", + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuCat2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuCat2DragI", + "width": 16, + "height": 16, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "MBMenuCat2CupI", + "width": 16, + "height": 16, + "iconFontName": "cup-soda", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "MBMenuCat2Title", + "fill": "$text-primary", + "content": "Trà sữa", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "MBMenuCat2Count", + "fill": "$text-tertiary", + "content": "5 sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem5", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MBMenuItem5L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem5Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem5T", + "fill": "$text-primary", + "content": "Trà sữa truyền thống", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem5P", + "fill": "$text-secondary", + "content": "35,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "MBMenuItem6", + "width": "fill_container", + "padding": [ + 10, + 16, + 10, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MBMenuItem6L", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MBMenuItem6Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MBMenuItem6T", + "fill": "$text-primary", + "content": "Trà sữa matcha", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "text", + "id": "MBMenuItem6P", + "fill": "$text-secondary", + "content": "42,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/modifier-groups.pen b/pencil-design/src/pages/tPOS/admin/modifier-groups.pen index bd8d7e5d..b4081e19 100644 --- a/pencil-design/src/pages/tPOS/admin/modifier-groups.pen +++ b/pencil-design/src/pages/tPOS/admin/modifier-groups.pen @@ -12,187 +12,1420 @@ "clip": true, "children": [ { - "type": "frame", "id": "MGSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "MGSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "MGSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MGLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MGLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "MGLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MGLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "MGLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MGSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "MGNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "MGNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MGNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "MGNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "MGNavProducts", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGNavProductsI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MGNavProductsT", "fill": "#FFFFFF", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MGNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MGNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "MGNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "MGNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MGNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MGNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MGNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "MGSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MGUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MGUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MGUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MGUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "MGUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "MGSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "MGLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MGLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "MGLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "MGNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MGNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MGNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MGNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "MGNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "MGNavProdT", + "fill": "#FFFFFF", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "MGNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MGNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MGNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "MGNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "MGNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "MGNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "MGUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MGUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "MGUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "MGMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "MGMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "MGHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MGHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "MGBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "MGBread1", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "MGBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "MGBread2", "fill": "$orange-primary", "content": "Nhóm Modifier", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "MGHeaderTitle", "fill": "$text-primary", "content": "Nhóm Modifier", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MGHeaderRight", "children": [ - {"type": "frame", "id": "MGCreateBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCreateI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MGCreateT", "fill": "#FFFFFF", "content": "Tạo nhóm mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "MGContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [ - - {"type": "frame", "id": "MGCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "MGCard1Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MGCard1Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard1Chev", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "MGCard1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "MGCard1TitleRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "MGCard1Title", "fill": "$text-primary", "content": "Size", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "frame", "id": "MGCard1Badge", "fill": "#EF444420", "cornerRadius": 100, "padding": [3, 8], "children": [ - {"type": "text", "id": "MGCard1BadgeT", "fill": "#EF4444", "content": "Bắt buộc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "MGCard1Sub", "fill": "$text-tertiary", "content": "Chọn 1 · 3 tùy chọn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MGCard1Actions", "gap": 8, "children": [ - {"type": "frame", "id": "MGCard1Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard1EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "MGCard1Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard1DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]}, - {"type": "frame", "id": "MGCard1Body", "width": "fill_container", "padding": [0, 20], "layout": "vertical", "children": [ - {"type": "frame", "id": "MGOpt1", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MGOpt1Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGOpt1Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MGOpt1Name", "fill": "$text-primary", "content": "S", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "MGOpt1Price", "fill": "$text-secondary", "content": "0 ₫", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "MGOpt2", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "MGOpt2Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGOpt2Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MGOpt2Name", "fill": "$text-primary", "content": "M", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "MGOpt2Price", "fill": "#22C55E", "content": "+10,000 ₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MGOpt3", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MGOpt3Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGOpt3Drag", "width": 16, "height": 16, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MGOpt3Name", "fill": "$text-primary", "content": "L", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "MGOpt3Price", "fill": "#22C55E", "content": "+15,000 ₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ]}, - - {"type": "frame", "id": "MGCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "MGCard2Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MGCard2Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard2Chev", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "MGCard2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "MGCard2TitleRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "MGCard2Title", "fill": "$text-primary", "content": "Đường", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "frame", "id": "MGCard2Badge", "fill": "#EF444420", "cornerRadius": 100, "padding": [3, 8], "children": [ - {"type": "text", "id": "MGCard2BadgeT", "fill": "#EF4444", "content": "Bắt buộc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "MGCard2Sub", "fill": "$text-tertiary", "content": "Chọn 1 · 5 tùy chọn: 0%, 30%, 50%, 70%, 100%", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MGCard2Actions", "gap": 8, "children": [ - {"type": "frame", "id": "MGCard2Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard2EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "MGCard2Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard2DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "MGCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "MGCard3Head", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MGCard3Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard3Chev", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "MGCard3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "MGCard3TitleRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "MGCard3Title", "fill": "$text-primary", "content": "Topping", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "frame", "id": "MGCard3Badge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [3, 8], "children": [ - {"type": "text", "id": "MGCard3BadgeT", "fill": "#3B82F6", "content": "Tùy chọn", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "MGCard3Sub", "fill": "$text-tertiary", "content": "Chọn tối đa 3 · 6 tùy chọn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MGCard3Actions", "gap": 8, "children": [ - {"type": "frame", "id": "MGCard3Edit", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard3EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "MGCard3Del", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MGCard3DelI", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "MGHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "MGBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGBread1", + "fill": "$text-tertiary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "MGBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "MGBread2", + "fill": "$orange-primary", + "content": "Nhóm Modifier", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "MGHeaderTitle", + "fill": "$text-primary", + "content": "Nhóm Modifier", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "MGHeaderRight", + "children": [ + { + "type": "frame", + "id": "MGCreateBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCreateI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "MGCreateT", + "fill": "#FFFFFF", + "content": "Tạo nhóm mới", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "MGCard1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "MGCard1Head", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MGCard1Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard1Chev", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "frame", + "id": "MGCard1Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "MGCard1TitleRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGCard1Title", + "fill": "$text-primary", + "content": "Size", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "MGCard1Badge", + "fill": "#EF444420", + "cornerRadius": 100, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "MGCard1BadgeT", + "fill": "#EF4444", + "content": "Bắt buộc", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "MGCard1Sub", + "fill": "$text-tertiary", + "content": "Chọn 1 · 3 tùy chọn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard1Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "MGCard1Edit", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard1EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "MGCard1Del", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard1DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard1Body", + "width": "fill_container", + "padding": [ + 0, + 20 + ], + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "MGOpt1", + "width": "fill_container", + "padding": [ + 14, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MGOpt1Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGOpt1Drag", + "width": 16, + "height": 16, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGOpt1Name", + "fill": "$text-primary", + "content": "S", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "text", + "id": "MGOpt1Price", + "fill": "$text-secondary", + "content": "0 ₫", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "MGOpt2", + "width": "fill_container", + "padding": [ + 14, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "MGOpt2Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGOpt2Drag", + "width": 16, + "height": 16, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGOpt2Name", + "fill": "$text-primary", + "content": "M", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "text", + "id": "MGOpt2Price", + "fill": "#22C55E", + "content": "+10,000 ₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "MGOpt3", + "width": "fill_container", + "padding": [ + 14, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGOpt3Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGOpt3Drag", + "width": 16, + "height": 16, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "MGOpt3Name", + "fill": "$text-primary", + "content": "L", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "text", + "id": "MGOpt3Price", + "fill": "#22C55E", + "content": "+15,000 ₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "MGCard2Head", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGCard2Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard2Chev", + "width": 18, + "height": 18, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "frame", + "id": "MGCard2Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "MGCard2TitleRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGCard2Title", + "fill": "$text-primary", + "content": "Đường", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "MGCard2Badge", + "fill": "#EF444420", + "cornerRadius": 100, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "MGCard2BadgeT", + "fill": "#EF4444", + "content": "Bắt buộc", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "MGCard2Sub", + "fill": "$text-tertiary", + "content": "Chọn 1 · 5 tùy chọn: 0%, 30%, 50%, 70%, 100%", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard2Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "MGCard2Edit", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard2EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "MGCard2Del", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard2DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "MGCard3Head", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MGCard3Left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard3Chev", + "width": 18, + "height": 18, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "frame", + "id": "MGCard3Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "MGCard3TitleRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MGCard3Title", + "fill": "$text-primary", + "content": "Topping", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "MGCard3Badge", + "fill": "#3B82F620", + "cornerRadius": 100, + "padding": [ + 3, + 8 + ], + "children": [ + { + "type": "text", + "id": "MGCard3BadgeT", + "fill": "#3B82F6", + "content": "Tùy chọn", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "MGCard3Sub", + "fill": "$text-tertiary", + "content": "Chọn tối đa 3 · 6 tùy chọn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MGCard3Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "MGCard3Edit", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard3EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "MGCard3Del", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MGCard3DelI", + "width": 16, + "height": 16, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/notification-center.pen b/pencil-design/src/pages/tPOS/admin/notification-center.pen index c3ad0725..b2f61365 100644 --- a/pencil-design/src/pages/tPOS/admin/notification-center.pen +++ b/pencil-design/src/pages/tPOS/admin/notification-center.pen @@ -12,234 +12,1681 @@ "clip": true, "children": [ { - "type": "frame", "id": "NCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "NCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "NCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "NCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "NCLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "NCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "NCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "NCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "NCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "NCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "NCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "NCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "NCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "NCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "NCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "NCNavNotif", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCNavNotifI", "width": 20, "height": 20, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "NCNavNotifT", "fill": "#FFFFFF", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "NCNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "NCNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "NCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "NCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "NCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "NCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "NCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "NCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "NCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "NCSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "NCLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "NCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "NCLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "NCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "NCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "NCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "NCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NCNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NCNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "NCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "NCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "NCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "NCNavSetT", + "fill": "#FFFFFF", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "NCSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "NCUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "NCUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NCUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "NCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "NCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "NCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "NCHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "NCBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "NCBread1", "fill": "$text-tertiary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "NCBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "NCBread2", "fill": "$orange-primary", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "NCHeaderTitle", "fill": "$text-primary", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "NCHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "NCMarkAll", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCMarkAllI", "width": 16, "height": 16, "iconFontName": "check-check", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "NCMarkAllT", "fill": "$text-secondary", "content": "Đánh dấu tất cả đã đọc", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "NCContent", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "NCTabs", "gap": 0, "children": [ - {"type": "frame", "id": "NCTab1", "fill": "$orange-primary", "cornerRadius": [10, 0, 0, 10], "padding": [10, 20], "children": [ - {"type": "text", "id": "NCTab1T", "fill": "#FFFFFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "NCTab2", "fill": "$bg-interactive", "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "NCTab2T", "fill": "$text-secondary", "content": "Chưa đọc", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "NCTab2Badge", "fill": "#EF4444", "cornerRadius": 100, "padding": [2, 8], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "NCTab2BadgeT", "fill": "#FFFFFF", "content": "5", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "NCTab3", "fill": "$bg-interactive", "cornerRadius": [0, 10, 10, 0], "padding": [10, 20], "children": [ - {"type": "text", "id": "NCTab3T", "fill": "$text-secondary", "content": "Đã đọc", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "NCSettingsCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "NCSettingsHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "NCSettingsTitle", "fill": "$text-primary", "content": "Cài đặt thông báo", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "NCChannelLabels", "gap": 32, "children": [ - {"type": "frame", "id": "NCLabelEmail", "width": 60, "justifyContent": "center", "children": [ - {"type": "text", "id": "NCLabelEmailT", "fill": "$text-tertiary", "content": "Email", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "NCLabelSMS", "width": 60, "justifyContent": "center", "children": [ - {"type": "text", "id": "NCLabelSMST", "fill": "$text-tertiary", "content": "SMS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "NCLabelPush", "width": 60, "justifyContent": "center", "children": [ - {"type": "text", "id": "NCLabelPushT", "fill": "$text-tertiary", "content": "Push", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "NCDivider1", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "NCChannel1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh1Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh1Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCCh1IconI", "width": 20, "height": 20, "iconFontName": "shopping-bag", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "NCCh1Text", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "NCCh1Title", "fill": "$text-primary", "content": "Đơn hàng mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "NCCh1Desc", "fill": "$text-tertiary", "content": "Thông báo khi có đơn hàng mới được tạo", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NCCh1Toggles", "gap": 32, "children": [ - {"type": "frame", "id": "NCCh1TgEmail", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh1SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh1DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh1TgSMS", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh1SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [ - {"type": "frame", "id": "NCCh1DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh1TgPush", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh1SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh1DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "NCDivider2", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "NCChannel2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh2Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh2Icon", "width": 40, "height": 40, "fill": "#EF444415", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCCh2IconI", "width": 20, "height": 20, "iconFontName": "package-x", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "NCCh2Text", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "NCCh2Title", "fill": "$text-primary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "NCCh2Desc", "fill": "$text-tertiary", "content": "Cảnh báo khi sản phẩm sắp hết hoặc đã hết hàng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NCCh2Toggles", "gap": 32, "children": [ - {"type": "frame", "id": "NCCh2TgEmail", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh2SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh2DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh2TgSMS", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh2SwSMS", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh2DotSMS", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh2TgPush", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh2SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh2DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "NCDivider3", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "NCChannel3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh3Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh3Icon", "width": 40, "height": 40, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCCh3IconI", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "NCCh3Text", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "NCCh3Title", "fill": "$text-primary", "content": "Nhân viên check-in", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "NCCh3Desc", "fill": "$text-tertiary", "content": "Thông báo khi nhân viên check-in/check-out ca làm", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NCCh3Toggles", "gap": 32, "children": [ - {"type": "frame", "id": "NCCh3TgEmail", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh3SwEmail", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [ - {"type": "frame", "id": "NCCh3DotEmail", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh3TgSMS", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh3SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [ - {"type": "frame", "id": "NCCh3DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh3TgPush", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh3SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh3DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "NCDivider4", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "NCChannel4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh4Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "NCCh4Icon", "width": 40, "height": 40, "fill": "#F59E0B15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NCCh4IconI", "width": 20, "height": 20, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "NCCh4Text", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "NCCh4Title", "fill": "$text-primary", "content": "Doanh thu hàng ngày", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "NCCh4Desc", "fill": "$text-tertiary", "content": "Báo cáo tổng doanh thu cuối ngày", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NCCh4Toggles", "gap": 32, "children": [ - {"type": "frame", "id": "NCCh4TgEmail", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh4SwEmail", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh4DotEmail", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh4TgSMS", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh4SwSMS", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [ - {"type": "frame", "id": "NCCh4DotSMS", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "NCCh4TgPush", "width": 60, "justifyContent": "center", "children": [ - {"type": "frame", "id": "NCCh4SwPush", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "NCCh4DotPush", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "NCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "NCBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCBread1", + "fill": "$text-tertiary", + "content": "Hệ thống", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "NCBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "NCBread2", + "fill": "$orange-primary", + "content": "Thông báo", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "NCHeaderTitle", + "fill": "$text-primary", + "content": "Thông báo", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "NCHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "NCMarkAll", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCMarkAllI", + "width": 16, + "height": 16, + "iconFontName": "check-check", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "NCMarkAllT", + "fill": "$text-secondary", + "content": "Đánh dấu tất cả đã đọc", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCContent", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "frame", + "id": "NCTabs", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "NCTab1", + "fill": "$orange-primary", + "cornerRadius": [ + 10, + 0, + 0, + 10 + ], + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "NCTab1T", + "fill": "#FFFFFF", + "content": "Tất cả", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NCTab2", + "fill": "$bg-interactive", + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCTab2T", + "fill": "$text-secondary", + "content": "Chưa đọc", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "NCTab2Badge", + "fill": "#EF4444", + "cornerRadius": 100, + "padding": [ + 2, + 8 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCTab2BadgeT", + "fill": "#FFFFFF", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCTab3", + "fill": "$bg-interactive", + "cornerRadius": [ + 0, + 10, + 10, + 0 + ], + "padding": [ + 10, + 20 + ], + "children": [ + { + "type": "text", + "id": "NCTab3T", + "fill": "$text-secondary", + "content": "Đã đọc", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCSettingsCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 28, + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "NCSettingsHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NCSettingsTitle", + "fill": "$text-primary", + "content": "Cài đặt thông báo", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "NCChannelLabels", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "NCLabelEmail", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "NCLabelEmailT", + "fill": "$text-tertiary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NCLabelSMS", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "NCLabelSMST", + "fill": "$text-tertiary", + "content": "SMS", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NCLabelPush", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "NCLabelPushT", + "fill": "$text-tertiary", + "content": "Push", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCDivider1", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "NCChannel1", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh1Left", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh1Icon", + "width": 40, + "height": 40, + "fill": "#22C55E15", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCCh1IconI", + "width": 20, + "height": 20, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "NCCh1Text", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "NCCh1Title", + "fill": "$text-primary", + "content": "Đơn hàng mới", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "NCCh1Desc", + "fill": "$text-tertiary", + "content": "Thông báo khi có đơn hàng mới được tạo", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh1Toggles", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "NCCh1TgEmail", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh1SwEmail", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh1DotEmail", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh1TgSMS", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh1SwSMS", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "frame", + "id": "NCCh1DotSMS", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh1TgPush", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh1SwPush", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh1DotPush", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCDivider2", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "NCChannel2", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh2Left", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh2Icon", + "width": 40, + "height": 40, + "fill": "#EF444415", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCCh2IconI", + "width": 20, + "height": 20, + "iconFontName": "package-x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "NCCh2Text", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "NCCh2Title", + "fill": "$text-primary", + "content": "Hết hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "NCCh2Desc", + "fill": "$text-tertiary", + "content": "Cảnh báo khi sản phẩm sắp hết hoặc đã hết hàng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh2Toggles", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "NCCh2TgEmail", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh2SwEmail", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh2DotEmail", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh2TgSMS", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh2SwSMS", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh2DotSMS", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh2TgPush", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh2SwPush", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh2DotPush", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCDivider3", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "NCChannel3", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh3Left", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh3Icon", + "width": 40, + "height": 40, + "fill": "#3B82F615", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCCh3IconI", + "width": 20, + "height": 20, + "iconFontName": "user-check", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "NCCh3Text", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "NCCh3Title", + "fill": "$text-primary", + "content": "Nhân viên check-in", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "NCCh3Desc", + "fill": "$text-tertiary", + "content": "Thông báo khi nhân viên check-in/check-out ca làm", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh3Toggles", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "NCCh3TgEmail", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh3SwEmail", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "frame", + "id": "NCCh3DotEmail", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh3TgSMS", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh3SwSMS", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "frame", + "id": "NCCh3DotSMS", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh3TgPush", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh3SwPush", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh3DotPush", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCDivider4", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "frame", + "id": "NCChannel4", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh4Left", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "NCCh4Icon", + "width": 40, + "height": 40, + "fill": "#F59E0B15", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NCCh4IconI", + "width": 20, + "height": 20, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + }, + { + "type": "frame", + "id": "NCCh4Text", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "NCCh4Title", + "fill": "$text-primary", + "content": "Doanh thu hàng ngày", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "NCCh4Desc", + "fill": "$text-tertiary", + "content": "Báo cáo tổng doanh thu cuối ngày", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh4Toggles", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "NCCh4TgEmail", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh4SwEmail", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh4DotEmail", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh4TgSMS", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh4SwSMS", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "frame", + "id": "NCCh4DotSMS", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "NCCh4TgPush", + "width": 60, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "NCCh4SwPush", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "NCCh4DotPush", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/payroll-commission.pen b/pencil-design/src/pages/tPOS/admin/payroll-commission.pen index 00a04173..f7ea2d64 100644 --- a/pencil-design/src/pages/tPOS/admin/payroll-commission.pen +++ b/pencil-design/src/pages/tPOS/admin/payroll-commission.pen @@ -2,169 +2,1841 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "PayrollComm", "name": "Admin/PayrollCommission", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "type": "frame", + "id": "PayrollComm", + "name": "Admin/PayrollCommission", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "clip": true, "children": [ - {"type": "frame", "id": "PCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "PCLogoGr", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "PCLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "PCNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PCNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "PCNavPay", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavPayI", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PCNavPayT", "fill": "#FFFFFF", "content": "Bảng lương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PCUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PCUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PCUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "PCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "PCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCTitle", "fill": "$text-primary", "content": "Bảng lương & Hoa hồng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "PCActions", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCMonth", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCMonthI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCMonthT", "fill": "$text-primary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "PCMonthChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "PCExport", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCExpI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCExpT", "fill": "$text-secondary", "content": "Export", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "PCContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [ - {"type": "frame", "id": "PCKPIs", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "PCK1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCK1L", "fill": "$text-tertiary", "content": "Tổng lương", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PCK1V", "fill": "$text-primary", "content": "45,600,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "PCK1C", "fill": "#22C55E", "content": "+8.2% vs tháng trước", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "PCK2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCK2L", "fill": "$text-tertiary", "content": "Hoa hồng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PCK2V", "fill": "$orange-primary", "content": "3,200,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "PCK2C", "fill": "$text-tertiary", "content": "7 nhân viên", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "PCK3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCK3L", "fill": "$text-tertiary", "content": "Phụ cấp", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PCK3V", "fill": "#3B82F6", "content": "1,800,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "PCK3C", "fill": "$text-tertiary", "content": "Ăn trưa + đi lại", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "PCTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCTblHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "PCTH1", "width": 180, "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH2", "width": 100, "fill": "$text-tertiary", "content": "Vai trò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH3", "width": 80, "fill": "$text-tertiary", "content": "Giờ làm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH4", "width": 130, "fill": "$text-tertiary", "content": "Lương CB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH5", "width": 110, "fill": "$text-tertiary", "content": "Hoa hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH6", "width": 100, "fill": "$text-tertiary", "content": "Phụ cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH7", "width": 130, "fill": "$text-tertiary", "content": "Tổng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PCTH8", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PCR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR1N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PCR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCR1Role", "width": 100, "children": [{"type": "frame", "id": "PCR1RBdg", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR1RT", "fill": "#3B82F6", "content": "Manager", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "PCR1H", "width": 80, "fill": "$text-primary", "content": "176h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR1S", "width": 130, "fill": "$text-primary", "content": "12,000,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR1C", "width": 110, "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR1A", "width": 100, "fill": "$text-secondary", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR1T", "width": 130, "fill": "$text-primary", "content": "13,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PCR1St", "children": [{"type": "frame", "id": "PCR1StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR1StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "PCR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR2N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PCR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCR2Role", "width": 100, "children": [{"type": "frame", "id": "PCR2RBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR2RT", "fill": "#22C55E", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "PCR2H", "width": 80, "fill": "$text-primary", "content": "168h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR2S", "width": 130, "fill": "$text-primary", "content": "7,500,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR2C", "width": 110, "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR2A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR2T", "width": 130, "fill": "$text-primary", "content": "8,450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PCR2St", "children": [{"type": "frame", "id": "PCR2StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR2StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "PCR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR3N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PCR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCR3Role", "width": 100, "children": [{"type": "frame", "id": "PCR3RBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR3RT", "fill": "#F59E0B", "content": "Barista", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "PCR3H", "width": 80, "fill": "$text-primary", "content": "160h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR3S", "width": 130, "fill": "$text-primary", "content": "6,500,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR3C", "width": 110, "fill": "$orange-primary", "content": "520,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR3A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR3T", "width": 130, "fill": "$text-primary", "content": "7,320,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PCR3St", "children": [{"type": "frame", "id": "PCR3StBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR3StT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "PCR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR4N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PCR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCR4Role", "width": 100, "children": [{"type": "frame", "id": "PCR4RBdg", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR4RT", "fill": "#8B5CF6", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "PCR4H", "width": 80, "fill": "$text-primary", "content": "152h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR4S", "width": 130, "fill": "$text-primary", "content": "5,800,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR4C", "width": 110, "fill": "$orange-primary", "content": "430,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR4A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR4T", "width": 130, "fill": "$text-primary", "content": "6,530,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PCR4St", "children": [{"type": "frame", "id": "PCR4StBdg", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR4StT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "PCR5", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR5N", "width": 180, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCR5Av", "width": 32, "height": 32, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCR5AvT", "fill": "#FFFFFF", "content": "VT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PCR5Nm", "fill": "$text-primary", "content": "Võ Thảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCR5Role", "width": 100, "children": [{"type": "frame", "id": "PCR5RBdg", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR5RT", "fill": "#EF4444", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "text", "id": "PCR5H", "width": 80, "fill": "$text-primary", "content": "168h", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR5S", "width": 130, "fill": "$text-primary", "content": "6,000,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR5C", "width": 110, "fill": "$orange-primary", "content": "0₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR5A", "width": 100, "fill": "$text-secondary", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCR5T", "width": 130, "fill": "$text-primary", "content": "6,300,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PCR5St", "children": [{"type": "frame", "id": "PCR5StBdg", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "PCR5StT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "PCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCLogoIc", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "PCLogoGr", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PCNavStaffT", + "fill": "#FFFFFF", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "PCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCUsr", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCUsrAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCUsrAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PCUsrInf", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCUsrN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCUsrR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCTitle", + "fill": "$text-primary", + "content": "Bảng lương & Hoa hồng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCActions", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCMonth", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCMonthI", + "width": 16, + "height": 16, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCMonthT", + "fill": "$text-primary", + "content": "Tháng 02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "PCMonthChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "PCExport", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCExpI", + "width": 16, + "height": 16, + "iconFontName": "download", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCExpT", + "fill": "$text-secondary", + "content": "Export", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "PCKPIs", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "PCK1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCK1L", + "fill": "$text-tertiary", + "content": "Tổng lương", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PCK1V", + "fill": "$text-primary", + "content": "45,600,000₫", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCK1C", + "fill": "#22C55E", + "content": "+8.2% vs tháng trước", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "PCK2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCK2L", + "fill": "$text-tertiary", + "content": "Hoa hồng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PCK2V", + "fill": "$orange-primary", + "content": "3,200,000₫", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCK2C", + "fill": "$text-tertiary", + "content": "7 nhân viên", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "PCK3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCK3L", + "fill": "$text-tertiary", + "content": "Phụ cấp", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PCK3V", + "fill": "#3B82F6", + "content": "1,800,000₫", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCK3C", + "fill": "$text-tertiary", + "content": "Ăn trưa + đi lại", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCTable", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCTblHead", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "PCTH1", + "width": 180, + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH2", + "width": 100, + "fill": "$text-tertiary", + "content": "Vai trò", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH3", + "width": 80, + "fill": "$text-tertiary", + "content": "Giờ làm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH4", + "width": 130, + "fill": "$text-tertiary", + "content": "Lương CB", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH5", + "width": 110, + "fill": "$text-tertiary", + "content": "Hoa hồng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH6", + "width": 100, + "fill": "$text-tertiary", + "content": "Phụ cấp", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH7", + "width": 130, + "fill": "$text-tertiary", + "content": "Tổng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCTH8", + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PCR1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR1N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR1Av", + "width": 32, + "height": 32, + "fill": "#8B5CF6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCR1AvT", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PCR1Nm", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCR1Role", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PCR1RBdg", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR1RT", + "fill": "#3B82F6", + "content": "Manager", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "PCR1H", + "width": 80, + "fill": "$text-primary", + "content": "176h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR1S", + "width": 130, + "fill": "$text-primary", + "content": "12,000,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR1C", + "width": 110, + "fill": "$orange-primary", + "content": "800,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR1A", + "width": 100, + "fill": "$text-secondary", + "content": "400,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR1T", + "width": 130, + "fill": "$text-primary", + "content": "13,200,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCR1St", + "children": [ + { + "type": "frame", + "id": "PCR1StBdg", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR1StT", + "fill": "#22C55E", + "content": "Đã trả", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCR2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR2N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR2Av", + "width": 32, + "height": 32, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCR2AvT", + "fill": "#FFFFFF", + "content": "LM", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PCR2Nm", + "fill": "$text-primary", + "content": "Lê Minh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCR2Role", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PCR2RBdg", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR2RT", + "fill": "#22C55E", + "content": "Cashier", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "PCR2H", + "width": 80, + "fill": "$text-primary", + "content": "168h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR2S", + "width": 130, + "fill": "$text-primary", + "content": "7,500,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR2C", + "width": 110, + "fill": "$orange-primary", + "content": "650,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR2A", + "width": 100, + "fill": "$text-secondary", + "content": "300,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR2T", + "width": 130, + "fill": "$text-primary", + "content": "8,450,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCR2St", + "children": [ + { + "type": "frame", + "id": "PCR2StBdg", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR2StT", + "fill": "#22C55E", + "content": "Đã trả", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCR3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR3N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR3Av", + "width": 32, + "height": 32, + "fill": "#EF4444", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCR3AvT", + "fill": "#FFFFFF", + "content": "PH", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PCR3Nm", + "fill": "$text-primary", + "content": "Phạm Hương", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCR3Role", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PCR3RBdg", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR3RT", + "fill": "#F59E0B", + "content": "Barista", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "PCR3H", + "width": 80, + "fill": "$text-primary", + "content": "160h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR3S", + "width": 130, + "fill": "$text-primary", + "content": "6,500,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR3C", + "width": 110, + "fill": "$orange-primary", + "content": "520,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR3A", + "width": 100, + "fill": "$text-secondary", + "content": "300,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR3T", + "width": 130, + "fill": "$text-primary", + "content": "7,320,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCR3St", + "children": [ + { + "type": "frame", + "id": "PCR3StBdg", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR3StT", + "fill": "#F59E0B", + "content": "Chờ duyệt", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCR4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR4N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR4Av", + "width": 32, + "height": 32, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCR4AvT", + "fill": "#FFFFFF", + "content": "NB", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PCR4Nm", + "fill": "$text-primary", + "content": "Nguyễn Bảo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCR4Role", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PCR4RBdg", + "fill": "#8B5CF620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR4RT", + "fill": "#8B5CF6", + "content": "Waiter", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "PCR4H", + "width": 80, + "fill": "$text-primary", + "content": "152h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR4S", + "width": 130, + "fill": "$text-primary", + "content": "5,800,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR4C", + "width": 110, + "fill": "$orange-primary", + "content": "430,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR4A", + "width": 100, + "fill": "$text-secondary", + "content": "300,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR4T", + "width": 130, + "fill": "$text-primary", + "content": "6,530,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCR4St", + "children": [ + { + "type": "frame", + "id": "PCR4StBdg", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR4StT", + "fill": "#F59E0B", + "content": "Chờ duyệt", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCR5", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR5N", + "width": 180, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCR5Av", + "width": 32, + "height": 32, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCR5AvT", + "fill": "#FFFFFF", + "content": "VT", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "PCR5Nm", + "fill": "$text-primary", + "content": "Võ Thảo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCR5Role", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PCR5RBdg", + "fill": "#EF444420", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR5RT", + "fill": "#EF4444", + "content": "Kitchen", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "PCR5H", + "width": 80, + "fill": "$text-primary", + "content": "168h", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR5S", + "width": 130, + "fill": "$text-primary", + "content": "6,000,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR5C", + "width": 110, + "fill": "$orange-primary", + "content": "0₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR5A", + "width": 100, + "fill": "$text-secondary", + "content": "300,000₫", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCR5T", + "width": 130, + "fill": "$text-primary", + "content": "6,300,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCR5St", + "children": [ + { + "type": "frame", + "id": "PCR5StBdg", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PCR5StT", + "fill": "#22C55E", + "content": "Đã trả", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/pricing-rules.pen b/pencil-design/src/pages/tPOS/admin/pricing-rules.pen index 4e9f3cd0..36334471 100644 --- a/pencil-design/src/pages/tPOS/admin/pricing-rules.pen +++ b/pencil-design/src/pages/tPOS/admin/pricing-rules.pen @@ -12,198 +12,1517 @@ "clip": true, "children": [ { - "type": "frame", "id": "PRSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "PRSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "PRSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PRLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PRLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "PRLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "PRLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "PRSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PRNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "PRNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PRNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PRNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PRNavPromo", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRNavPromoI", "width": 20, "height": 20, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PRNavPromoT", "fill": "#FFFFFF", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PRNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PRNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PRNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PRNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PRNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PRNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PRNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "PRSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PRUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PRUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PRUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PRUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "PRSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "PRLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PRLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PRNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PRNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PRNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PRNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PRNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PRNavProdT", + "fill": "#FFFFFF", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "PRNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PRNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PRNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PRNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PRNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PRNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PRNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PRNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PRNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PRNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PRUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "PRMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "PRMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "PRHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PRHeaderTitle", "fill": "$text-primary", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "PRHeaderRight", "children": [ - {"type": "frame", "id": "PRCreateBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PRCreateI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PRCreateT", "fill": "#FFFFFF", "content": "Tạo KM mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PRTabsRow", "width": "fill_container", "fill": "$bg-elevated", "padding": [0, 32], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "PRTabActive", "padding": [12, 16], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "PRTabActiveT", "fill": "$orange-primary", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "PRTabActiveBadge", "fill": "$orange-primary", "cornerRadius": 100, "padding": [1, 6], "children": [ - {"type": "text", "id": "PRTabActiveBadgeT", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "PRTab2", "padding": [12, 16], "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "PRTab2T", "fill": "$text-secondary", "content": "Lên lịch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PRTab2Badge", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [1, 6], "children": [ - {"type": "text", "id": "PRTab2BadgeT", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PRTab3", "padding": [12, 16], "children": [ - {"type": "text", "id": "PRTab3T", "fill": "$text-secondary", "content": "Đã kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - - {"type": "frame", "id": "PRContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 0, "clip": true, "children": [ - {"type": "frame", "id": "PRTableCard", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - - {"type": "frame", "id": "PRTableHead", "width": "fill_container", "padding": [12, 20], "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "PRTh1", "width": "fill_container", "fill": "$text-tertiary", "content": "Tên chương trình", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PRTh2", "width": 120, "fill": "$text-tertiary", "content": "Loại", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PRTh3", "width": 180, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PRTh4", "width": 140, "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "PRTh5", "width": 100, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - - {"type": "frame", "id": "PRRow1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PRRow1C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow1Name", "fill": "$text-primary", "content": "Flash Sale cuối tuần", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PRRow1Desc", "fill": "$text-tertiary", "content": "Giảm 20% tất cả đồ uống", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PRRow1C2", "width": 120, "children": [ - {"type": "frame", "id": "PRRow1TypeBadge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow1TypeT", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PRRow1C3", "width": 180, "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow1Date1", "fill": "$text-secondary", "content": "08/02 - 14/02/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PRRow1Date2", "fill": "$text-tertiary", "content": "T7 & CN, 14:00-18:00", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "PRRow1C4", "width": 140, "fill": "$text-secondary", "content": "Tất cả (3)", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "PRRow1C5", "width": 100, "children": [ - {"type": "frame", "id": "PRRow1StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow1StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PRRow2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PRRow2C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow2Name", "fill": "$text-primary", "content": "Combo Sáng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PRRow2Desc", "fill": "$text-tertiary", "content": "Cà phê + Bánh mì 49K", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PRRow2C2", "width": 120, "children": [ - {"type": "frame", "id": "PRRow2TypeBadge", "fill": "#A855F720", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow2TypeT", "fill": "#A855F7", "content": "Combo", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PRRow2C3", "width": 180, "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow2Date1", "fill": "$text-secondary", "content": "01/02 - 28/02/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PRRow2Date2", "fill": "$text-tertiary", "content": "Hàng ngày, 06:00-10:00", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "PRRow2C4", "width": 140, "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "PRRow2C5", "width": 100, "children": [ - {"type": "frame", "id": "PRRow2StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow2StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PRRow3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "PRRow3C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow3Name", "fill": "$text-primary", "content": "Mua 1 tặng 1 Trà sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PRRow3Desc", "fill": "$text-tertiary", "content": "Mua ly thứ 2 giá 0đ", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PRRow3C2", "width": 120, "children": [ - {"type": "frame", "id": "PRRow3TypeBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow3TypeT", "fill": "#F59E0B", "content": "BOGO", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PRRow3C3", "width": 180, "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow3Date1", "fill": "$text-secondary", "content": "10/02 - 16/02/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PRRow3Date2", "fill": "$text-tertiary", "content": "Thứ 2-6, cả ngày", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "PRRow3C4", "width": 140, "fill": "$text-secondary", "content": "Tất cả (3)", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "PRRow3C5", "width": 100, "children": [ - {"type": "frame", "id": "PRRow3StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow3StatusT", "fill": "#22C55E", "content": "Đang chạy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PRRow4", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "frame", "id": "PRRow4C1", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow4Name", "fill": "$text-primary", "content": "Happy Hour Chiều", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PRRow4Desc", "fill": "$text-tertiary", "content": "Giảm 30% từ 15:00-17:00", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PRRow4C2", "width": 120, "children": [ - {"type": "frame", "id": "PRRow4TypeBadge", "fill": "#3B82F620", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow4TypeT", "fill": "#3B82F6", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "PRRow4C3", "width": 180, "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PRRow4Date1", "fill": "$text-secondary", "content": "15/02 - 28/02/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PRRow4Date2", "fill": "$text-tertiary", "content": "Hàng ngày, 15:00-17:00", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "PRRow4C4", "width": 140, "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "PRRow4C5", "width": 100, "children": [ - {"type": "frame", "id": "PRRow4StatusBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "PRRow4StatusT", "fill": "#F59E0B", "content": "Lên lịch", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "PRHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRHeaderTitle", + "fill": "$text-primary", + "content": "Khuyến mãi", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PRHeaderRight", + "children": [ + { + "type": "frame", + "id": "PRCreateBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PRCreateI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PRCreateT", + "fill": "#FFFFFF", + "content": "Tạo KM mới", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRTabsRow", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 0, + 32 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "PRTabActive", + "padding": [ + 12, + 16 + ], + "stroke": { + "thickness": 2, + "fill": "$orange-primary", + "sides": [ + "bottom" + ] + }, + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRTabActiveT", + "fill": "$orange-primary", + "content": "Đang chạy", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PRTabActiveBadge", + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 1, + 6 + ], + "children": [ + { + "type": "text", + "id": "PRTabActiveBadgeT", + "fill": "#FFFFFF", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRTab2", + "padding": [ + 12, + 16 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PRTab2T", + "fill": "$text-secondary", + "content": "Lên lịch", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PRTab2Badge", + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 1, + 6 + ], + "children": [ + { + "type": "text", + "id": "PRTab2BadgeT", + "fill": "$text-secondary", + "content": "2", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRTab3", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "PRTab3T", + "fill": "$text-secondary", + "content": "Đã kết thúc", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 0, + "clip": true, + "children": [ + { + "type": "frame", + "id": "PRTableCard", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PRTableHead", + "width": "fill_container", + "padding": [ + 12, + 20 + ], + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "PRTh1", + "width": "fill_container", + "fill": "$text-tertiary", + "content": "Tên chương trình", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRTh2", + "width": 120, + "fill": "$text-tertiary", + "content": "Loại", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRTh3", + "width": 180, + "fill": "$text-tertiary", + "content": "Thời gian", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRTh4", + "width": 140, + "fill": "$text-tertiary", + "content": "Cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRTh5", + "width": 100, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PRRow1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRRow1C1", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow1Name", + "fill": "$text-primary", + "content": "Flash Sale cuối tuần", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRRow1Desc", + "fill": "$text-tertiary", + "content": "Giảm 20% tất cả đồ uống", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PRRow1C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "PRRow1TypeBadge", + "fill": "#3B82F620", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow1TypeT", + "fill": "#3B82F6", + "content": "Giảm giá", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow1C3", + "width": 180, + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow1Date1", + "fill": "$text-secondary", + "content": "08/02 - 14/02/2026", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PRRow1Date2", + "fill": "$text-tertiary", + "content": "T7 & CN, 14:00-18:00", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "PRRow1C4", + "width": 140, + "fill": "$text-secondary", + "content": "Tất cả (3)", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "PRRow1C5", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PRRow1StatusBadge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow1StatusT", + "fill": "#22C55E", + "content": "Đang chạy", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRRow2C1", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow2Name", + "fill": "$text-primary", + "content": "Combo Sáng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRRow2Desc", + "fill": "$text-tertiary", + "content": "Cà phê + Bánh mì 49K", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PRRow2C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "PRRow2TypeBadge", + "fill": "#A855F720", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow2TypeT", + "fill": "#A855F7", + "content": "Combo", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow2C3", + "width": 180, + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow2Date1", + "fill": "$text-secondary", + "content": "01/02 - 28/02/2026", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PRRow2Date2", + "fill": "$text-tertiary", + "content": "Hàng ngày, 06:00-10:00", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "PRRow2C4", + "width": 140, + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "PRRow2C5", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PRRow2StatusBadge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow2StatusT", + "fill": "#22C55E", + "content": "Đang chạy", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRRow3C1", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow3Name", + "fill": "$text-primary", + "content": "Mua 1 tặng 1 Trà sữa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRRow3Desc", + "fill": "$text-tertiary", + "content": "Mua ly thứ 2 giá 0đ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PRRow3C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "PRRow3TypeBadge", + "fill": "#F59E0B20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow3TypeT", + "fill": "#F59E0B", + "content": "BOGO", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow3C3", + "width": 180, + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow3Date1", + "fill": "$text-secondary", + "content": "10/02 - 16/02/2026", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PRRow3Date2", + "fill": "$text-tertiary", + "content": "Thứ 2-6, cả ngày", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "PRRow3C4", + "width": 140, + "fill": "$text-secondary", + "content": "Tất cả (3)", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "PRRow3C5", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PRRow3StatusBadge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow3StatusT", + "fill": "#22C55E", + "content": "Đang chạy", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PRRow4C1", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow4Name", + "fill": "$text-primary", + "content": "Happy Hour Chiều", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PRRow4Desc", + "fill": "$text-tertiary", + "content": "Giảm 30% từ 15:00-17:00", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PRRow4C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "PRRow4TypeBadge", + "fill": "#3B82F620", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow4TypeT", + "fill": "#3B82F6", + "content": "Giảm giá", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PRRow4C3", + "width": 180, + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PRRow4Date1", + "fill": "$text-secondary", + "content": "15/02 - 28/02/2026", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PRRow4Date2", + "fill": "$text-tertiary", + "content": "Hàng ngày, 15:00-17:00", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "text", + "id": "PRRow4C4", + "width": 140, + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "PRRow4C5", + "width": 100, + "children": [ + { + "type": "frame", + "id": "PRRow4StatusBadge", + "fill": "#F59E0B20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PRRow4StatusT", + "fill": "#F59E0B", + "content": "Lên lịch", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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 2381bae9..ff7d5c6e 100644 --- a/pencil-design/src/pages/tPOS/admin/product-catalog.pen +++ b/pencil-design/src/pages/tPOS/admin/product-catalog.pen @@ -12,233 +12,1736 @@ "clip": true, "children": [ { - "type": "frame", "id": "PCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "PCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "PCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "PCLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "PCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "PCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "PCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCNavProd", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PCNavProdT", "fill": "#FFFFFF", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PCNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PCNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PCNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PCNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "PCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "PCSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "PCLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PCNavProdT", + "fill": "#FFFFFF", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "PCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PCUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "PCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "PCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "PCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "PCHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "PCBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "PCBread1", "fill": "$text-tertiary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PCBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PCBread2", "fill": "$orange-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "PCHeaderTitle", "fill": "$text-primary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PCHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCStoreSel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCStoreSelI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "PCStoreSelT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "PCStoreSelChevron", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "PCSearch", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PCSearchP", "fill": "$text-tertiary", "content": "Tìm sản phẩm...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "PCAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PCAddT", "fill": "#FFFFFF", "content": "Thêm sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PCBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "PCCategories", "width": 220, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCCatHeader", "width": "fill_container", "padding": [14, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCCatTitle", "fill": "$text-primary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "PCCatAdd", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "frame", "id": "PCCatList", "width": "fill_container", "height": "fill_container", "padding": 8, "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "PCCat1", "width": "fill_container", "height": 42, "fill": "#FF5C0015", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat1Emoji", "content": "☕", "fontSize": 16}, - {"type": "text", "id": "PCCat1T", "fill": "$orange-primary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "PCCat1C", "fill": "$orange-primary", "content": "12", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PCCat2", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat2Emoji", "content": "🧋", "fontSize": 16}, - {"type": "text", "id": "PCCat2T", "fill": "$text-secondary", "content": "Trà sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCCat2C", "fill": "$text-tertiary", "content": "8", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PCCat3", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat3L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat3Emoji", "content": "🧃", "fontSize": 16}, - {"type": "text", "id": "PCCat3T", "fill": "$text-secondary", "content": "Nước ép", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCCat3C", "fill": "$text-tertiary", "content": "10", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PCCat4", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat4L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat4Emoji", "content": "🍰", "fontSize": 16}, - {"type": "text", "id": "PCCat4T", "fill": "$text-secondary", "content": "Bánh ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCCat4C", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PCCat5", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat5L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat5Emoji", "content": "🧊", "fontSize": 16}, - {"type": "text", "id": "PCCat5T", "fill": "$text-secondary", "content": "Đá xay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCCat5C", "fill": "$text-tertiary", "content": "7", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PCCat6", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "PCCat6L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PCCat6Emoji", "content": "🍕", "fontSize": 16}, - {"type": "text", "id": "PCCat6T", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCCat6C", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - - {"type": "frame", "id": "PCProductGrid", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [ - {"type": "frame", "id": "PCGridHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCGridTitle", "fill": "$text-primary", "content": "Cà phê (12 sản phẩm)", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "PCGridSort", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCViewGrid", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCViewGridI", "width": 16, "height": 16, "iconFontName": "grid-2x2", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]}, - {"type": "frame", "id": "PCViewList", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCViewListI", "width": 16, "height": 16, "iconFontName": "list", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "PCGrid", "width": "fill_container", "height": "fill_container", "gap": 16, "wrap": true, "children": [ - {"type": "frame", "id": "PCP1", "width": 200, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCP1Img", "width": "fill_container", "height": 140, "fill": "#2A1F16", "cornerRadius": [14, 14, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP1ImgT", "content": "☕", "fontSize": 48} - ]}, - {"type": "frame", "id": "PCP1Info", "width": "fill_container", "padding": [12, 14], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCP1Name", "fill": "$text-primary", "content": "Cà phê đen", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "PCP1Desc", "fill": "$text-tertiary", "content": "Espresso đậm đà", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "PCP1Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "frame", "id": "PCP1Stock", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [ - {"type": "text", "id": "PCP1StockT", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "PCP2", "width": 200, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCP2Img", "width": "fill_container", "height": 140, "fill": "#1F2216", "cornerRadius": [14, 14, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP2ImgT", "content": "🍵", "fontSize": 48} - ]}, - {"type": "frame", "id": "PCP2Info", "width": "fill_container", "padding": [12, 14], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCP2Name", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "PCP2Desc", "fill": "$text-tertiary", "content": "Espresso + sữa đặc", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "PCP2Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "frame", "id": "PCP2Stock", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [ - {"type": "text", "id": "PCP2StockT", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "PCP3", "width": 200, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCP3Img", "width": "fill_container", "height": 140, "fill": "#16201F", "cornerRadius": [14, 14, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP3ImgT", "content": "🥤", "fontSize": 48} - ]}, - {"type": "frame", "id": "PCP3Info", "width": "fill_container", "padding": [12, 14], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCP3Name", "fill": "$text-primary", "content": "Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "PCP3Desc", "fill": "$text-tertiary", "content": "Espresso + sữa tươi", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "PCP3Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP3Price", "fill": "$orange-primary", "content": "49,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "frame", "id": "PCP3Stock", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [ - {"type": "text", "id": "PCP3StockT", "fill": "#F59E0B", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "PCP4", "width": 200, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [ - {"type": "frame", "id": "PCP4Img", "width": "fill_container", "height": 140, "fill": "#1A1620", "cornerRadius": [14, 14, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP4ImgT", "content": "🍫", "fontSize": 48} - ]}, - {"type": "frame", "id": "PCP4Info", "width": "fill_container", "padding": [12, 14], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCP4Name", "fill": "$text-primary", "content": "Mocha", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "PCP4Desc", "fill": "$text-tertiary", "content": "Espresso + chocolate", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "PCP4Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "PCP4Price", "fill": "$orange-primary", "content": "55,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "frame", "id": "PCP4Stock", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [ - {"type": "text", "id": "PCP4StockT", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "PCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "PCBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCBread1", + "fill": "$text-tertiary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PCBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "PCBread2", + "fill": "$orange-primary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PCHeaderTitle", + "fill": "$text-primary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PCHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCStoreSel", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCStoreSelI", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "PCStoreSelT", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "PCStoreSelChevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "PCSearch", + "width": 220, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCSearchP", + "fill": "$text-tertiary", + "content": "Tìm sản phẩm...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "PCAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PCAddT", + "fill": "#FFFFFF", + "content": "Thêm sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCBody", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "PCCategories", + "width": 220, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCCatHeader", + "width": "fill_container", + "padding": [ + 14, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCatTitle", + "fill": "$text-primary", + "content": "Danh mục", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "PCCatAdd", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "PCCatList", + "width": "fill_container", + "height": "fill_container", + "padding": 8, + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "PCCat1", + "width": "fill_container", + "height": 42, + "fill": "#FF5C0015", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat1L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat1Emoji", + "content": "☕", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat1T", + "fill": "$orange-primary", + "content": "Cà phê", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "PCCat1C", + "fill": "$orange-primary", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PCCat2", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat2L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat2Emoji", + "content": "🧋", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat2T", + "fill": "$text-secondary", + "content": "Trà sữa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCCat2C", + "fill": "$text-tertiary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PCCat3", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat3L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat3Emoji", + "content": "🧃", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat3T", + "fill": "$text-secondary", + "content": "Nước ép", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCCat3C", + "fill": "$text-tertiary", + "content": "10", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PCCat4", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat4L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat4Emoji", + "content": "🍰", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat4T", + "fill": "$text-secondary", + "content": "Bánh ngọt", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCCat4C", + "fill": "$text-tertiary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PCCat5", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat5L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat5Emoji", + "content": "🧊", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat5T", + "fill": "$text-secondary", + "content": "Đá xay", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCCat5C", + "fill": "$text-tertiary", + "content": "7", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PCCat6", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCCat6L", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCCat6Emoji", + "content": "🍕", + "fontSize": 16 + }, + { + "type": "text", + "id": "PCCat6T", + "fill": "$text-secondary", + "content": "Snack", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCCat6C", + "fill": "$text-tertiary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCProductGrid", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "PCGridHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCGridTitle", + "fill": "$text-primary", + "content": "Cà phê (12 sản phẩm)", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "PCGridSort", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCViewGrid", + "width": 36, + "height": 36, + "fill": "$orange-primary", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCViewGridI", + "width": 16, + "height": 16, + "iconFontName": "grid-2x2", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "PCViewList", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCViewListI", + "width": 16, + "height": 16, + "iconFontName": "list", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCGrid", + "width": "fill_container", + "height": "fill_container", + "gap": 16, + "wrap": true, + "children": [ + { + "type": "frame", + "id": "PCP1", + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCP1Img", + "width": "fill_container", + "height": 140, + "fill": "#2A1F16", + "cornerRadius": [ + 14, + 14, + 0, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP1ImgT", + "content": "☕", + "fontSize": 48 + } + ] + }, + { + "type": "frame", + "id": "PCP1Info", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCP1Name", + "fill": "$text-primary", + "content": "Cà phê đen", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCP1Desc", + "fill": "$text-tertiary", + "content": "Espresso đậm đà", + "fontFamily": "Roboto", + "fontSize": 11 + }, + { + "type": "frame", + "id": "PCP1Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP1Price", + "fill": "$orange-primary", + "content": "29,000₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCP1Stock", + "fill": "#22C55E20", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "PCP1StockT", + "fill": "#22C55E", + "content": "Còn hàng", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCP2", + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCP2Img", + "width": "fill_container", + "height": 140, + "fill": "#1F2216", + "cornerRadius": [ + 14, + 14, + 0, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP2ImgT", + "content": "🍵", + "fontSize": 48 + } + ] + }, + { + "type": "frame", + "id": "PCP2Info", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCP2Name", + "fill": "$text-primary", + "content": "Cà phê sữa đá", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCP2Desc", + "fill": "$text-tertiary", + "content": "Espresso + sữa đặc", + "fontFamily": "Roboto", + "fontSize": 11 + }, + { + "type": "frame", + "id": "PCP2Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP2Price", + "fill": "$orange-primary", + "content": "35,000₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCP2Stock", + "fill": "#22C55E20", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "PCP2StockT", + "fill": "#22C55E", + "content": "Còn hàng", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCP3", + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCP3Img", + "width": "fill_container", + "height": 140, + "fill": "#16201F", + "cornerRadius": [ + 14, + 14, + 0, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP3ImgT", + "content": "🥤", + "fontSize": 48 + } + ] + }, + { + "type": "frame", + "id": "PCP3Info", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCP3Name", + "fill": "$text-primary", + "content": "Latte", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCP3Desc", + "fill": "$text-tertiary", + "content": "Espresso + sữa tươi", + "fontFamily": "Roboto", + "fontSize": 11 + }, + { + "type": "frame", + "id": "PCP3Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP3Price", + "fill": "$orange-primary", + "content": "49,000₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCP3Stock", + "fill": "#F59E0B20", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "PCP3StockT", + "fill": "#F59E0B", + "content": "Sắp hết", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCP4", + "width": 200, + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PCP4Img", + "width": "fill_container", + "height": 140, + "fill": "#1A1620", + "cornerRadius": [ + 14, + 14, + 0, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP4ImgT", + "content": "🍫", + "fontSize": 48 + } + ] + }, + { + "type": "frame", + "id": "PCP4Info", + "width": "fill_container", + "padding": [ + 12, + 14 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCP4Name", + "fill": "$text-primary", + "content": "Mocha", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCP4Desc", + "fill": "$text-tertiary", + "content": "Espresso + chocolate", + "fontFamily": "Roboto", + "fontSize": 11 + }, + { + "type": "frame", + "id": "PCP4Bottom", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCP4Price", + "fill": "$orange-primary", + "content": "55,000₫", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCP4Stock", + "fill": "#22C55E20", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "PCP4StockT", + "fill": "#22C55E", + "content": "Còn hàng", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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-create.pen b/pencil-design/src/pages/tPOS/admin/product-create.pen index 4b28a053..3f9dc829 100644 --- a/pencil-design/src/pages/tPOS/admin/product-create.pen +++ b/pencil-design/src/pages/tPOS/admin/product-create.pen @@ -12,179 +12,1375 @@ "clip": true, "children": [ { - "type": "frame", "id": "PCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "PCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "PCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "PCLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "PCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "PCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "PCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PCNavProducts", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavProductsI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PCNavProductsT", "fill": "#FFFFFF", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PCNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "PCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "PCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "PCSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "PCLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PCLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PCNavProdT", + "fill": "#FFFFFF", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "PCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PCUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "PCUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "PCUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "PCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "PCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "PCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "PCHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PCBackBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCBackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "text", "id": "PCHeaderTitle", "fill": "$text-primary", "content": "Thêm sản phẩm mới", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PCHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "PCCancelBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 20], "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "text", "id": "PCCancelBtnT", "fill": "$text-primary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PCSaveBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PCSaveI", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PCSaveT", "fill": "#FFFFFF", "content": "Lưu sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "PCBody", "width": "fill_container", "height": "fill_container", "padding": 28, "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "PCFormLeft", "width": "fill_container", "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "PCInfoCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 20, "children": [ - {"type": "text", "id": "PCInfoTitle", "fill": "$text-primary", "content": "Thông tin sản phẩm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - - {"type": "frame", "id": "PCFieldName", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldNameL", "fill": "$text-secondary", "content": "Tên sản phẩm *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldNameInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldNameV", "fill": "$text-tertiary", "content": "Nhập tên sản phẩm...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - - {"type": "frame", "id": "PCFieldSKU", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldSKUL", "fill": "$text-secondary", "content": "Mã SKU", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldSKUInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldSKUV", "fill": "$text-tertiary", "content": "VD: CF-ESP-001", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - - {"type": "frame", "id": "PCFieldDesc", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldDescL", "fill": "$text-secondary", "content": "Mô tả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldDescInput", "width": "fill_container", "height": 100, "fill": "$bg-interactive", "cornerRadius": 10, "padding": 14, "children": [ - {"type": "text", "id": "PCFieldDescV", "fill": "$text-tertiary", "content": "Nhập mô tả sản phẩm...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - - {"type": "frame", "id": "PCFieldCat", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldCatL", "fill": "$text-secondary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldCatInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PCFieldCatV", "fill": "$text-tertiary", "content": "Chọn danh mục...", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "PCFieldCatChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - - {"type": "frame", "id": "PCPriceRow", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "PCFieldPrice", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldPriceL", "fill": "$text-secondary", "content": "Giá bán (₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldPriceInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldPriceV", "fill": "$text-primary", "content": "35,000", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "PCFieldCost", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldCostL", "fill": "$text-secondary", "content": "Giá vốn (₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldCostInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldCostV", "fill": "$text-primary", "content": "12,000", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "PCFormRight", "width": 360, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "PCImageCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "PCImageTitle", "fill": "$text-primary", "content": "Hình ảnh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "PCImageUpload", "width": "fill_container", "height": 160, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 12, "stroke": {"thickness": 2, "fill": "$border-default", "dashArray": [6, 4]}, "children": [ - {"type": "icon_font", "id": "PCImageUploadI", "width": 32, "height": 32, "iconFontName": "image-plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PCImageUploadT", "fill": "$text-secondary", "content": "Kéo thả hoặc nhấn để tải ảnh", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PCImageUploadS", "fill": "$text-tertiary", "content": "PNG, JPG tối đa 5MB", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - - {"type": "frame", "id": "PCStockCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "PCStockTitle", "fill": "$text-primary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "PCFieldQty", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldQtyL", "fill": "$text-secondary", "content": "Số lượng tồn kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldQtyInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldQtyV", "fill": "$text-primary", "content": "100", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "PCFieldAlert", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "PCFieldAlertL", "fill": "$text-secondary", "content": "Ngưỡng cảnh báo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PCFieldAlertInput", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "PCFieldAlertV", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "PCToggleCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "PCToggleTitle", "fill": "$text-primary", "content": "Hiển thị", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "PCTogglePOS", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "PCTogglePOSL", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PCTogglePOST", "fill": "$text-primary", "content": "Hiển thị trên POS", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PCTogglePOSSub", "fill": "$text-tertiary", "content": "Sản phẩm sẽ hiện trên màn hình POS", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PCTogglePOSSw", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "PCTogglePOSDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "PCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCHeaderLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCBackBtn", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCBackI", + "width": 18, + "height": 18, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "text", + "id": "PCHeaderTitle", + "fill": "$text-primary", + "content": "Thêm sản phẩm mới", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PCHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "PCCancelBtn", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "PCCancelBtnT", + "fill": "$text-primary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PCSaveBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PCSaveI", + "width": 18, + "height": 18, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PCSaveT", + "fill": "#FFFFFF", + "content": "Lưu sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCBody", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "gap": 24, + "clip": true, + "children": [ + { + "type": "frame", + "id": "PCFormLeft", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "PCInfoCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "text", + "id": "PCInfoTitle", + "fill": "$text-primary", + "content": "Thông tin sản phẩm", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCFieldName", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldNameL", + "fill": "$text-secondary", + "content": "Tên sản phẩm *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldNameInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldNameV", + "fill": "$text-tertiary", + "content": "Nhập tên sản phẩm...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFieldSKU", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldSKUL", + "fill": "$text-secondary", + "content": "Mã SKU", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldSKUInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldSKUV", + "fill": "$text-tertiary", + "content": "VD: CF-ESP-001", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFieldDesc", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldDescL", + "fill": "$text-secondary", + "content": "Mô tả", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldDescInput", + "width": "fill_container", + "height": 100, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": 14, + "children": [ + { + "type": "text", + "id": "PCFieldDescV", + "fill": "$text-tertiary", + "content": "Nhập mô tả sản phẩm...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFieldCat", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldCatL", + "fill": "$text-secondary", + "content": "Danh mục", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldCatInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "PCFieldCatV", + "fill": "$text-tertiary", + "content": "Chọn danh mục...", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "id": "PCFieldCatChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCPriceRow", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "PCFieldPrice", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldPriceL", + "fill": "$text-secondary", + "content": "Giá bán (₫)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldPriceInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldPriceV", + "fill": "$text-primary", + "content": "35,000", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFieldCost", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldCostL", + "fill": "$text-secondary", + "content": "Giá vốn (₫)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldCostInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldCostV", + "fill": "$text-primary", + "content": "12,000", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFormRight", + "width": 360, + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "PCImageCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "PCImageTitle", + "fill": "$text-primary", + "content": "Hình ảnh", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCImageUpload", + "width": "fill_container", + "height": 160, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 2, + "fill": "$border-default", + "dashArray": [ + 6, + 4 + ] + }, + "children": [ + { + "type": "icon_font", + "id": "PCImageUploadI", + "width": 32, + "height": 32, + "iconFontName": "image-plus", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PCImageUploadT", + "fill": "$text-secondary", + "content": "Kéo thả hoặc nhấn để tải ảnh", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "PCImageUploadS", + "fill": "$text-tertiary", + "content": "PNG, JPG tối đa 5MB", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCStockCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "PCStockTitle", + "fill": "$text-primary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCFieldQty", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldQtyL", + "fill": "$text-secondary", + "content": "Số lượng tồn kho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldQtyInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldQtyV", + "fill": "$text-primary", + "content": "100", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCFieldAlert", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "PCFieldAlertL", + "fill": "$text-secondary", + "content": "Ngưỡng cảnh báo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "PCFieldAlertInput", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PCFieldAlertV", + "fill": "$text-primary", + "content": "10", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PCToggleCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "PCToggleTitle", + "fill": "$text-primary", + "content": "Hiển thị", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "PCTogglePOS", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PCTogglePOSL", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PCTogglePOST", + "fill": "$text-primary", + "content": "Hiển thị trên POS", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "PCTogglePOSSub", + "fill": "$text-tertiary", + "content": "Sản phẩm sẽ hiện trên màn hình POS", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "PCTogglePOSSw", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "PCTogglePOSDot", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/purchase-orders.pen b/pencil-design/src/pages/tPOS/admin/purchase-orders.pen index 40813b46..47eb726c 100644 --- a/pencil-design/src/pages/tPOS/admin/purchase-orders.pen +++ b/pencil-design/src/pages/tPOS/admin/purchase-orders.pen @@ -12,188 +12,1548 @@ "clip": true, "children": [ { - "type": "frame", "id": "POSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "POSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "POSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "POLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "POLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "POLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "POLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "POLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "POSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PONavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "PONavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PONavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PONavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PONavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PONavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PONavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PONavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PONavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "PONavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PONavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PONavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "PONavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PONavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PONavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "PONavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "PONavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PONavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PONavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "POSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "POUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "POUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "POUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "POUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "POSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "POLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "POLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "POLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "POSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PONavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PONavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PONavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PONavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "PONavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PONavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PONavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PONavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PONavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PONavInvT", + "fill": "#FFFFFF", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "PONavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "PONavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PONavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PONavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "PONavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "PONavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PONavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PONavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PONavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "POSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "POUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "POUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "POMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "POMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "POHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "POHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "POBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "POBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "POBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "POBread2", "fill": "$orange-primary", "content": "Đơn đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "POHeaderTitle", "fill": "$text-primary", "content": "Đơn đặt hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "POHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "POSearchBox", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "POSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "POSearchP", "fill": "$text-tertiary", "content": "Tìm đơn hàng...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "POAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "POAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "POAddT", "fill": "#FFFFFF", "content": "Tạo PO mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "POContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [ - {"type": "frame", "id": "POTabs", "width": "fill_container", "gap": 0, "children": [ - {"type": "frame", "id": "POTab1", "padding": [10, 20], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "POTab1T", "fill": "$orange-primary", "content": "Tất cả (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "POTab2", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "POTab2T", "fill": "$text-tertiary", "content": "Draft (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "POTab3", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "POTab3T", "fill": "$text-tertiary", "content": "Chờ duyệt (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "POTab4", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "POTab4T", "fill": "$text-tertiary", "content": "Đang giao (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "POTab5", "padding": [10, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "POTab5T", "fill": "$text-tertiary", "content": "Đã nhận (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "POTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "POTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "POTh1", "width": 130, "fill": "$text-tertiary", "content": "Mã PO", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "POTh2", "width": 200, "fill": "$text-tertiary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "POTh3", "width": 140, "fill": "$text-tertiary", "content": "Ngày tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "POTh4", "width": 160, "fill": "$text-tertiary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "POTh5", "width": 100, "fill": "$text-tertiary", "content": "Số SP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "POTh6", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PORow1", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "POR1C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-001", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR1C2", "width": 200, "fill": "$text-primary", "content": "Lavazza Vietnam", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR1C3", "width": 140, "fill": "$text-secondary", "content": "15/01/2024", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR1C4", "width": 160, "fill": "$text-primary", "content": "12,500,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR1C5", "width": 100, "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "POR1Badge", "width": 120, "children": [ - {"type": "frame", "id": "POR1BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "POR1BadgeT", "fill": "#22C55E", "content": "Đã nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "PORow2", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "POR2C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-002", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR2C2", "width": 200, "fill": "$text-primary", "content": "Milo Vietnam", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR2C3", "width": 140, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR2C4", "width": 160, "fill": "$text-primary", "content": "8,200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR2C5", "width": 100, "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "POR2Badge", "width": 120, "children": [ - {"type": "frame", "id": "POR2BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "POR2BadgeT", "fill": "#3B82F6", "content": "Đang giao", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "PORow3", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "POR3C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-003", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR3C2", "width": 200, "fill": "$text-primary", "content": "Vinamilk", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR3C3", "width": 140, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR3C4", "width": 160, "fill": "$text-primary", "content": "5,800,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR3C5", "width": 100, "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "POR3Badge", "width": 120, "children": [ - {"type": "frame", "id": "POR3BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "POR3BadgeT", "fill": "#F59E0B", "content": "Chờ duyệt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "PORow4", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "POR4C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-004", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR4C2", "width": 200, "fill": "$text-primary", "content": "Fresh Garden", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR4C3", "width": 140, "fill": "$text-secondary", "content": "22/01/2024", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR4C4", "width": 160, "fill": "$text-primary", "content": "3,400,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR4C5", "width": 100, "fill": "$text-secondary", "content": "6", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "POR4Badge", "width": 120, "children": [ - {"type": "frame", "id": "POR4BadgeF", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "POR4BadgeT", "fill": "$text-tertiary", "content": "Draft", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "PORow5", "width": "fill_container", "height": 56, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "POR5C1", "width": 130, "fill": "$orange-primary", "content": "PO-2024-005", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR5C2", "width": 200, "fill": "$text-primary", "content": "Đường Biên Hòa", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR5C3", "width": 140, "fill": "$text-secondary", "content": "10/01/2024", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "POR5C4", "width": 160, "fill": "$text-primary", "content": "2,100,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "POR5C5", "width": 100, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "POR5Badge", "width": 120, "children": [ - {"type": "frame", "id": "POR5BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "POR5BadgeT", "fill": "#22C55E", "content": "Đã nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "POHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "POBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POBread1", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "POBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "POBread2", + "fill": "$orange-primary", + "content": "Đơn đặt hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "POHeaderTitle", + "fill": "$text-primary", + "content": "Đơn đặt hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "POHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POSearchBox", + "width": 220, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "POSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "POSearchP", + "fill": "$text-tertiary", + "content": "Tìm đơn hàng...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "POAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "POAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "POAddT", + "fill": "#FFFFFF", + "content": "Tạo PO mới", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "POContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "POTabs", + "width": "fill_container", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "POTab1", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 2, + "fill": "$orange-primary", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "POTab1T", + "fill": "$orange-primary", + "content": "Tất cả (5)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "POTab2", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "POTab2T", + "fill": "$text-tertiary", + "content": "Draft (1)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "POTab3", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "POTab3T", + "fill": "$text-tertiary", + "content": "Chờ duyệt (1)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "POTab4", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "POTab4T", + "fill": "$text-tertiary", + "content": "Đang giao (1)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "POTab5", + "padding": [ + 10, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "POTab5T", + "fill": "$text-tertiary", + "content": "Đã nhận (2)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "POTable", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "POTableHead", + "width": "fill_container", + "height": 48, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POTh1", + "width": 130, + "fill": "$text-tertiary", + "content": "Mã PO", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POTh2", + "width": 200, + "fill": "$text-tertiary", + "content": "Nhà cung cấp", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POTh3", + "width": 140, + "fill": "$text-tertiary", + "content": "Ngày tạo", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POTh4", + "width": 160, + "fill": "$text-tertiary", + "content": "Tổng tiền", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POTh5", + "width": 100, + "fill": "$text-tertiary", + "content": "Số SP", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POTh6", + "width": 120, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PORow1", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POR1C1", + "width": 130, + "fill": "$orange-primary", + "content": "PO-2024-001", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR1C2", + "width": 200, + "fill": "$text-primary", + "content": "Lavazza Vietnam", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR1C3", + "width": 140, + "fill": "$text-secondary", + "content": "15/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR1C4", + "width": 160, + "fill": "$text-primary", + "content": "12,500,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR1C5", + "width": 100, + "fill": "$text-secondary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "POR1Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "POR1BadgeF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "POR1BadgeT", + "fill": "#22C55E", + "content": "Đã nhận", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PORow2", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POR2C1", + "width": 130, + "fill": "$orange-primary", + "content": "PO-2024-002", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR2C2", + "width": 200, + "fill": "$text-primary", + "content": "Milo Vietnam", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR2C3", + "width": 140, + "fill": "$text-secondary", + "content": "18/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR2C4", + "width": 160, + "fill": "$text-primary", + "content": "8,200,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR2C5", + "width": 100, + "fill": "$text-secondary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "POR2Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "POR2BadgeF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "POR2BadgeT", + "fill": "#3B82F6", + "content": "Đang giao", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PORow3", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POR3C1", + "width": 130, + "fill": "$orange-primary", + "content": "PO-2024-003", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR3C2", + "width": 200, + "fill": "$text-primary", + "content": "Vinamilk", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR3C3", + "width": 140, + "fill": "$text-secondary", + "content": "20/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR3C4", + "width": 160, + "fill": "$text-primary", + "content": "5,800,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR3C5", + "width": 100, + "fill": "$text-secondary", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "POR3Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "POR3BadgeF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "POR3BadgeT", + "fill": "#F59E0B", + "content": "Chờ duyệt", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PORow4", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POR4C1", + "width": 130, + "fill": "$orange-primary", + "content": "PO-2024-004", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR4C2", + "width": 200, + "fill": "$text-primary", + "content": "Fresh Garden", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR4C3", + "width": 140, + "fill": "$text-secondary", + "content": "22/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR4C4", + "width": 160, + "fill": "$text-primary", + "content": "3,400,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR4C5", + "width": 100, + "fill": "$text-secondary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "POR4Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "POR4BadgeF", + "fill": "#8B8B9020", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "POR4BadgeT", + "fill": "$text-tertiary", + "content": "Draft", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PORow5", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "POR5C1", + "width": 130, + "fill": "$orange-primary", + "content": "PO-2024-005", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR5C2", + "width": 200, + "fill": "$text-primary", + "content": "Đường Biên Hòa", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR5C3", + "width": 140, + "fill": "$text-secondary", + "content": "10/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "POR5C4", + "width": 160, + "fill": "$text-primary", + "content": "2,100,000₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "POR5C5", + "width": 100, + "fill": "$text-secondary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "POR5Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "POR5BadgeF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "POR5BadgeT", + "fill": "#22C55E", + "content": "Đã nhận", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/revenue-analytics.pen b/pencil-design/src/pages/tPOS/admin/revenue-analytics.pen index db23ba1f..5227e565 100644 --- a/pencil-design/src/pages/tPOS/admin/revenue-analytics.pen +++ b/pencil-design/src/pages/tPOS/admin/revenue-analytics.pen @@ -12,188 +12,1589 @@ "clip": true, "children": [ { - "type": "frame", "id": "RASidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "RASidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "RASidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RALogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RALogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "RALogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RALogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "RALogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "RASidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RANavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "RANavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RANavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RANavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RANavRevenue", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RANavRevenueI", "width": 20, "height": 20, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RANavRevenueT", "fill": "#FFFFFF", "content": "Phân tích doanh thu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RANavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "RANavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RANavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RANavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "RANavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "RANavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RANavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RANavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "RASidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RAUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RAUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "RAUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RAUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "RAUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "RASidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RALogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RALogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "RALogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "RALogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RALogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RASidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "RANavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RANavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RANavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RANavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "RANavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RANavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RANavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RANavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RANavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RANavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RANavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RANavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RANavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "RANavRptT", + "fill": "#FFFFFF", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "RANavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RANavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RANavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RANavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RANavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RANavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RASidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RAUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RAUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "RAUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "RAUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "RAUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "RAMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "RAMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "RAHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RAHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RAHeaderTitle", "fill": "$text-primary", "content": "Phân tích doanh thu", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "RAHeaderSub", "fill": "$text-tertiary", "content": "Theo dõi và phân tích hiệu suất kinh doanh", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "RAHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RADatePicker", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RADateI", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RADateT", "fill": "$text-secondary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RAStoreSelect", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RAStoreI", "width": 18, "height": 18, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RAStoreT", "fill": "$text-secondary", "content": "Tất cả cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "RAStoreChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "RAContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 20, "clip": true, "children": [ - - {"type": "frame", "id": "RAKpiRow", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "RAKpi1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "RAKpi1L", "fill": "$text-tertiary", "content": "Tổng doanh thu", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "RAKpi1V", "fill": "$text-primary", "content": "156.8M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "RAKpi1Change", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RAKpi1Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RAKpi1Pct", "fill": "#22C55E", "content": "+12.3%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "RAKpi1Vs", "fill": "$text-tertiary", "content": "vs tháng trước", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "RAKpi2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "RAKpi2L", "fill": "$text-tertiary", "content": "Đơn hàng TB", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "RAKpi2V", "fill": "$text-primary", "content": "125K", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "RAKpi2Change", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RAKpi2Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RAKpi2Pct", "fill": "#22C55E", "content": "+5.2%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "RAKpi3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "RAKpi3L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "RAKpi3V", "fill": "$text-primary", "content": "1,254", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "RAKpi3Change", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RAKpi3Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RAKpi3Pct", "fill": "#22C55E", "content": "+8.1%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "RAKpi4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "RAKpi4L", "fill": "$text-tertiary", "content": "Khách mới", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "RAKpi4V", "fill": "$text-primary", "content": "89", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "RAKpi4Change", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RAKpi4Arrow", "width": 14, "height": 14, "iconFontName": "trending-down", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "RAKpi4Pct", "fill": "#EF4444", "content": "-3.4%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "RAChartCard", "width": "fill_container", "height": 260, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "RAChartHead", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RAChartTitle", "fill": "$text-primary", "content": "Xu hướng doanh thu", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "RAChartLegend", "gap": 16, "children": [ - {"type": "frame", "id": "RALeg1", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "RALeg1Dot", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 100}, - {"type": "text", "id": "RALeg1T", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "RALeg2", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "RALeg2Dot", "width": 10, "height": 10, "fill": "#3B82F6", "cornerRadius": 100}, - {"type": "text", "id": "RALeg2T", "fill": "$text-tertiary", "content": "Tháng trước", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "RAChartArea", "width": "fill_container", "height": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom", "left"]}, "children": [ - {"type": "frame", "id": "RAGrid1", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 40}, - {"type": "frame", "id": "RAGrid2", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 80}, - {"type": "frame", "id": "RAGrid3", "width": "fill_container", "height": 1, "fill": "$border-subtle", "y": 120}, - {"type": "text", "id": "RAYLabel1", "fill": "$text-tertiary", "content": "20M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 35}, - {"type": "text", "id": "RAYLabel2", "fill": "$text-tertiary", "content": "15M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 75}, - {"type": "text", "id": "RAYLabel3", "fill": "$text-tertiary", "content": "10M", "fontFamily": "Roboto", "fontSize": 10, "x": -30, "y": 115} - ]} - ]}, - - {"type": "frame", "id": "RATableCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "RATableHead", "width": "fill_container", "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RATableTitle", "fill": "$text-primary", "content": "Top sản phẩm bán chạy", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RATblHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [ - {"type": "text", "id": "RATblH1", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"}, - {"type": "text", "id": "RATblH2", "fill": "$text-tertiary", "content": "SL bán", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "RATblH3", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATblH4", "fill": "$text-tertiary", "content": "% Tổng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 80} - ]}, - {"type": "frame", "id": "RATblR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "RATR1N", "fill": "$text-primary", "content": "Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "RATR1Q", "fill": "$text-secondary", "content": "342", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "RATR1R", "fill": "$text-primary", "content": "34.2M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATR1P", "fill": "$orange-primary", "content": "21.8%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80} - ]}, - {"type": "frame", "id": "RATblR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "RATR2N", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "RATR2Q", "fill": "$text-secondary", "content": "289", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "RATR2R", "fill": "$text-primary", "content": "28.9M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATR2P", "fill": "$orange-primary", "content": "18.4%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80} - ]}, - {"type": "frame", "id": "RATblR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "RATR3N", "fill": "$text-primary", "content": "Bánh mì thịt nướng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "RATR3Q", "fill": "$text-secondary", "content": "215", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "RATR3R", "fill": "$text-primary", "content": "21.5M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATR3P", "fill": "$orange-primary", "content": "13.7%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80} - ]}, - {"type": "frame", "id": "RATblR4", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "RATR4N", "fill": "$text-primary", "content": "Phở bò đặc biệt", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "RATR4Q", "fill": "$text-secondary", "content": "178", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "RATR4R", "fill": "$text-primary", "content": "17.8M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATR4P", "fill": "$orange-primary", "content": "11.3%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80} - ]}, - {"type": "frame", "id": "RATblR5", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "text", "id": "RATR5N", "fill": "$text-primary", "content": "Bún bò Huế", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "RATR5Q", "fill": "$text-secondary", "content": "156", "fontFamily": "Roboto", "fontSize": 13, "width": 100}, - {"type": "text", "id": "RATR5R", "fill": "$text-primary", "content": "15.6M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "RATR5P", "fill": "$orange-primary", "content": "9.9%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 80} - ]} - ]} - ]} + { + "type": "frame", + "id": "RAHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RAHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "RAHeaderTitle", + "fill": "$text-primary", + "content": "Phân tích doanh thu", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RAHeaderSub", + "fill": "$text-tertiary", + "content": "Theo dõi và phân tích hiệu suất kinh doanh", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RAHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RADatePicker", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RADateI", + "width": 18, + "height": 18, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RADateT", + "fill": "$text-secondary", + "content": "01/02 - 11/02/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RAStoreSelect", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RAStoreI", + "width": 18, + "height": 18, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RAStoreT", + "fill": "$text-secondary", + "content": "Tất cả cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "RAStoreChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "RAKpiRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "RAKpi1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "RAKpi1L", + "fill": "$text-tertiary", + "content": "Tổng doanh thu", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "RAKpi1V", + "fill": "$text-primary", + "content": "156.8M", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "RAKpi1Change", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RAKpi1Arrow", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "RAKpi1Pct", + "fill": "#22C55E", + "content": "+12.3%", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "RAKpi1Vs", + "fill": "$text-tertiary", + "content": "vs tháng trước", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAKpi2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "RAKpi2L", + "fill": "$text-tertiary", + "content": "Đơn hàng TB", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "RAKpi2V", + "fill": "$text-primary", + "content": "125K", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "RAKpi2Change", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RAKpi2Arrow", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "RAKpi2Pct", + "fill": "#22C55E", + "content": "+5.2%", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAKpi3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "RAKpi3L", + "fill": "$text-tertiary", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "RAKpi3V", + "fill": "$text-primary", + "content": "1,254", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "RAKpi3Change", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RAKpi3Arrow", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "RAKpi3Pct", + "fill": "#22C55E", + "content": "+8.1%", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAKpi4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "RAKpi4L", + "fill": "$text-tertiary", + "content": "Khách mới", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "RAKpi4V", + "fill": "$text-primary", + "content": "89", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "RAKpi4Change", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RAKpi4Arrow", + "width": 14, + "height": 14, + "iconFontName": "trending-down", + "iconFontFamily": "lucide", + "fill": "#EF4444" + }, + { + "type": "text", + "id": "RAKpi4Pct", + "fill": "#EF4444", + "content": "-3.4%", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAChartCard", + "width": "fill_container", + "height": 260, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "RAChartHead", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RAChartTitle", + "fill": "$text-primary", + "content": "Xu hướng doanh thu", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "RAChartLegend", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "RALeg1", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RALeg1Dot", + "width": 10, + "height": 10, + "fill": "$orange-primary", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "RALeg1T", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "RALeg2", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RALeg2Dot", + "width": 10, + "height": 10, + "fill": "#3B82F6", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "RALeg2T", + "fill": "$text-tertiary", + "content": "Tháng trước", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RAChartArea", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom", + "left" + ] + }, + "children": [ + { + "type": "frame", + "id": "RAGrid1", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle", + "y": 40 + }, + { + "type": "frame", + "id": "RAGrid2", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle", + "y": 80 + }, + { + "type": "frame", + "id": "RAGrid3", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle", + "y": 120 + }, + { + "type": "text", + "id": "RAYLabel1", + "fill": "$text-tertiary", + "content": "20M", + "fontFamily": "Roboto", + "fontSize": 10, + "x": -30, + "y": 35 + }, + { + "type": "text", + "id": "RAYLabel2", + "fill": "$text-tertiary", + "content": "15M", + "fontFamily": "Roboto", + "fontSize": 10, + "x": -30, + "y": 75 + }, + { + "type": "text", + "id": "RAYLabel3", + "fill": "$text-tertiary", + "content": "10M", + "fontFamily": "Roboto", + "fontSize": 10, + "x": -30, + "y": 115 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RATableCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "RATableHead", + "width": "fill_container", + "padding": [ + 16, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATableTitle", + "fill": "$text-primary", + "content": "Top sản phẩm bán chạy", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "RATblHdr", + "width": "fill_container", + "padding": [ + 12, + 24 + ], + "fill": "$bg-interactive", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATblH1", + "fill": "$text-tertiary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": "fill_container" + }, + { + "type": "text", + "id": "RATblH2", + "fill": "$text-tertiary", + "content": "SL bán", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "RATblH3", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATblH4", + "fill": "$text-tertiary", + "content": "% Tổng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 80 + } + ] + }, + { + "type": "frame", + "id": "RATblR1", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATR1N", + "fill": "$text-primary", + "content": "Trà sữa trân châu", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "RATR1Q", + "fill": "$text-secondary", + "content": "342", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "RATR1R", + "fill": "$text-primary", + "content": "34.2M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATR1P", + "fill": "$orange-primary", + "content": "21.8%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 80 + } + ] + }, + { + "type": "frame", + "id": "RATblR2", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATR2N", + "fill": "$text-primary", + "content": "Cà phê sữa đá", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "RATR2Q", + "fill": "$text-secondary", + "content": "289", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "RATR2R", + "fill": "$text-primary", + "content": "28.9M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATR2P", + "fill": "$orange-primary", + "content": "18.4%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 80 + } + ] + }, + { + "type": "frame", + "id": "RATblR3", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATR3N", + "fill": "$text-primary", + "content": "Bánh mì thịt nướng", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "RATR3Q", + "fill": "$text-secondary", + "content": "215", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "RATR3R", + "fill": "$text-primary", + "content": "21.5M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATR3P", + "fill": "$orange-primary", + "content": "13.7%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 80 + } + ] + }, + { + "type": "frame", + "id": "RATblR4", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATR4N", + "fill": "$text-primary", + "content": "Phở bò đặc biệt", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "RATR4Q", + "fill": "$text-secondary", + "content": "178", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "RATR4R", + "fill": "$text-primary", + "content": "17.8M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATR4P", + "fill": "$orange-primary", + "content": "11.3%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 80 + } + ] + }, + { + "type": "frame", + "id": "RATblR5", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RATR5N", + "fill": "$text-primary", + "content": "Bún bò Huế", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "RATR5Q", + "fill": "$text-secondary", + "content": "156", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 100 + }, + { + "type": "text", + "id": "RATR5R", + "fill": "$text-primary", + "content": "15.6M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "RATR5P", + "fill": "$orange-primary", + "content": "9.9%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 80 + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/role-permissions.pen b/pencil-design/src/pages/tPOS/admin/role-permissions.pen index f1e94e7b..0bb99827 100644 --- a/pencil-design/src/pages/tPOS/admin/role-permissions.pen +++ b/pencil-design/src/pages/tPOS/admin/role-permissions.pen @@ -12,233 +12,2550 @@ "clip": true, "children": [ { - "type": "frame", "id": "RPSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "RPSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "RPSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPLogoIcon", "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": "RPLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "RPLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RPLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "RPLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "RPSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RPNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "RPNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RPNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RPNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "RPNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "RPNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RPNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RPNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "RPNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "RPNavRoles", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RPNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RPNavRolesT", "fill": "#FFFFFF", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RPNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RPNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RPNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "RPSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RPUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "RPUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RPUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "RPUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "RPSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPLogoIcon", + "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": "RPLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "RPLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "RPLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RPLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "RPNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RPNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RPNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RPNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "RPNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RPNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RPNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RPNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RPNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "RPNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RPNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RPNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "RPNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "RPNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "RPNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "RPNavRolesT", + "fill": "#FFFFFF", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "RPNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RPNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RPUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "RPUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "RPUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "RPUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "RPMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "RPMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "RPHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RPHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RPHeaderTitle", "fill": "$text-primary", "content": "Phân quyền vai trò", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "RPHeaderSub", "fill": "$text-tertiary", "content": "Quản lý quyền hạn cho từng vai trò trong hệ thống", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "RPHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "RPAddRole", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RPAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RPAddT", "fill": "#FFFFFF", "content": "Tạo vai trò", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "RPContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 0, "clip": true, "children": [ - {"type": "frame", "id": "RPMatrixHeader", "width": "fill_container", "padding": [16, 0], "fill": "$bg-elevated", "cornerRadius": [12, 12, 0, 0], "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH0", "width": 200, "padding": [0, 20], "children": [ - {"type": "text", "id": "RPMH0T", "fill": "$text-tertiary", "content": "Quyền hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RPMH1", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH1G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH1Badge", "fill": "$orange-primary", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH1T", "fill": "#FFFFFF", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH1S", "fill": "$text-tertiary", "content": "1 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "RPMH2", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH2G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH2Badge", "fill": "#3B82F6", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH2T", "fill": "#FFFFFF", "content": "Admin", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH2S", "fill": "$text-tertiary", "content": "2 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "RPMH3", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH3G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH3Badge", "fill": "#22C55E", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH3T", "fill": "#FFFFFF", "content": "Manager", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH3S", "fill": "$text-tertiary", "content": "3 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "RPMH4", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH4G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH4Badge", "fill": "#F59E0B", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH4T", "fill": "#FFFFFF", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH4S", "fill": "$text-tertiary", "content": "4 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "RPMH5", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH5G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH5Badge", "fill": "#EC4899", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH5T", "fill": "#FFFFFF", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH5S", "fill": "$text-tertiary", "content": "5 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "RPMH6", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "RPMH6G", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPMH6Badge", "fill": "#8B5CF6", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "RPMH6T", "fill": "#FFFFFF", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "RPMH6S", "fill": "$text-tertiary", "content": "4 người", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]}, - - {"type": "text", "id": "RPSec1", "fill": "$text-primary", "content": "Bán hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700", "padding": [16, 20, 8, 20]}, - - {"type": "frame", "id": "RPR1", "width": "fill_container", "padding": [12, 0], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR1L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR1T", "fill": "$text-secondary", "content": "Tạo đơn hàng", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR1C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR1C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR1C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR1C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C4I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR1C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C5I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR1C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR1C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR2", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR2L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR2T", "fill": "$text-secondary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR2C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR2C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR2C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR2C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C4I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR2C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR2C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR2C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR3", "width": "fill_container", "padding": [12, 0], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR3L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR3T", "fill": "$text-secondary", "content": "Void / Hoàn tiền", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR3C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR3C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR3C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR3C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR3C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR3C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR3C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR4", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR4L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR4T", "fill": "$text-secondary", "content": "Áp dụng giảm giá", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR4C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR4C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR4C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR4C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR4C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR4C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR4C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - - {"type": "text", "id": "RPSec2", "fill": "$text-primary", "content": "Quản lý", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700", "padding": [16, 20, 8, 20]}, - - {"type": "frame", "id": "RPR5", "width": "fill_container", "padding": [12, 0], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR5L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR5T", "fill": "$text-secondary", "content": "Xem báo cáo", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR5C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR5C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR5C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR5C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR5C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR5C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR5C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR6", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR6L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR6T", "fill": "$text-secondary", "content": "Quản lý sản phẩm", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR6C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR6C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR6C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C3I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR6C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR6C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR6C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR6C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR7", "width": "fill_container", "padding": [12, 0], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR7L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR7T", "fill": "$text-secondary", "content": "Quản lý nhân sự", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR7C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR7C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR7C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C3I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR7C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR7C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR7C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR7C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR8", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR8L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR8T", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR8C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR8C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C2I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR8C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C3I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR8C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR8C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR8C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR8C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - - {"type": "text", "id": "RPSec3", "fill": "$text-primary", "content": "Hệ thống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700", "padding": [16, 20, 8, 20]}, - - {"type": "frame", "id": "RPR9", "width": "fill_container", "padding": [12, 0], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR9L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR9T", "fill": "$text-secondary", "content": "Cài đặt hệ thống", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR9C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR9C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C2I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR9C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C3I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR9C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR9C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR9C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR9C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]}, - {"type": "frame", "id": "RPR10", "width": "fill_container", "padding": [12, 0], "alignItems": "center", "children": [ - {"type": "frame", "id": "RPR10L", "width": 200, "padding": [0, 20], "children": [{"type": "text", "id": "RPR10T", "fill": "$text-secondary", "content": "Xem tài chính", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RPR10C1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C1I", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "RPR10C2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C2I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR10C3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C3I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR10C4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C4I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR10C5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C5I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "RPR10C6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "icon_font", "id": "RPR10C6I", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}]} - ]} - ]} + { + "type": "frame", + "id": "RPHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "RPHeaderTitle", + "fill": "$text-primary", + "content": "Phân quyền vai trò", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RPHeaderSub", + "fill": "$text-tertiary", + "content": "Quản lý quyền hạn cho từng vai trò trong hệ thống", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "RPAddRole", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RPAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "RPAddT", + "fill": "#FFFFFF", + "content": "Tạo vai trò", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 0, + "clip": true, + "children": [ + { + "type": "frame", + "id": "RPMatrixHeader", + "width": "fill_container", + "padding": [ + 16, + 0 + ], + "fill": "$bg-elevated", + "cornerRadius": [ + 12, + 12, + 0, + 0 + ], + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH0", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPMH0T", + "fill": "$text-tertiary", + "content": "Quyền hạn", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "RPMH1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH1G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH1Badge", + "fill": "$orange-primary", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH1T", + "fill": "#FFFFFF", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH1S", + "fill": "$text-tertiary", + "content": "1 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPMH2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH2G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH2Badge", + "fill": "#3B82F6", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH2T", + "fill": "#FFFFFF", + "content": "Admin", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH2S", + "fill": "$text-tertiary", + "content": "2 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPMH3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH3G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH3Badge", + "fill": "#22C55E", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH3T", + "fill": "#FFFFFF", + "content": "Manager", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH3S", + "fill": "$text-tertiary", + "content": "3 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPMH4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH4G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH4Badge", + "fill": "#F59E0B", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH4T", + "fill": "#FFFFFF", + "content": "Cashier", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH4S", + "fill": "$text-tertiary", + "content": "4 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPMH5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH5G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH5Badge", + "fill": "#EC4899", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH5T", + "fill": "#FFFFFF", + "content": "Waiter", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH5S", + "fill": "$text-tertiary", + "content": "5 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPMH6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "RPMH6G", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPMH6Badge", + "fill": "#8B5CF6", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "RPMH6T", + "fill": "#FFFFFF", + "content": "Kitchen", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "RPMH6S", + "fill": "$text-tertiary", + "content": "4 người", + "fontFamily": "Roboto", + "fontSize": 10 + } + ] + } + ] + } + ] + }, + { + "type": "text", + "id": "RPSec1", + "fill": "$text-primary", + "content": "Bán hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700", + "padding": [ + 16, + 20, + 8, + 20 + ] + }, + { + "type": "frame", + "id": "RPR1", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR1L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR1T", + "fill": "$text-secondary", + "content": "Tạo đơn hàng", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR1C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR1C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR1C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR1C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C4I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR1C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C5I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR1C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR1C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR2", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR2L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR2T", + "fill": "$text-secondary", + "content": "Thanh toán", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR2C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR2C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR2C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR2C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C4I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR2C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR2C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR2C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR3", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR3L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR3T", + "fill": "$text-secondary", + "content": "Void / Hoàn tiền", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR3C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR3C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR3C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR3C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR3C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR3C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR3C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR4", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR4L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR4T", + "fill": "$text-secondary", + "content": "Áp dụng giảm giá", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR4C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR4C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR4C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR4C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR4C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR4C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR4C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "text", + "id": "RPSec2", + "fill": "$text-primary", + "content": "Quản lý", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700", + "padding": [ + 16, + 20, + 8, + 20 + ] + }, + { + "type": "frame", + "id": "RPR5", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR5L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR5T", + "fill": "$text-secondary", + "content": "Xem báo cáo", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR5C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR5C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR5C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR5C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR5C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR5C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR5C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR6", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR6L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR6T", + "fill": "$text-secondary", + "content": "Quản lý sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR6C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR6C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR6C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C3I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR6C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR6C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR6C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR6C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR7", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR7L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR7T", + "fill": "$text-secondary", + "content": "Quản lý nhân sự", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR7C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR7C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR7C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C3I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR7C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR7C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR7C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR7C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR8", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR8L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR8T", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR8C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR8C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C2I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR8C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C3I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR8C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR8C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR8C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR8C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "text", + "id": "RPSec3", + "fill": "$text-primary", + "content": "Hệ thống", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700", + "padding": [ + 16, + 20, + 8, + 20 + ] + }, + { + "type": "frame", + "id": "RPR9", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR9L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR9T", + "fill": "$text-secondary", + "content": "Cài đặt hệ thống", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR9C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR9C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C2I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR9C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C3I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR9C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR9C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR9C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR9C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RPR10", + "width": "fill_container", + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RPR10L", + "width": 200, + "padding": [ + 0, + 20 + ], + "children": [ + { + "type": "text", + "id": "RPR10T", + "fill": "$text-secondary", + "content": "Xem tài chính", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "RPR10C1", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C1I", + "width": 20, + "height": 20, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "RPR10C2", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C2I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR10C3", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C3I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR10C4", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C4I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR10C5", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C5I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "RPR10C6", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "RPR10C6I", + "width": 20, + "height": 20, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/staff-create.pen b/pencil-design/src/pages/tPOS/admin/staff-create.pen index 49714cc4..d6640afe 100644 --- a/pencil-design/src/pages/tPOS/admin/staff-create.pen +++ b/pencil-design/src/pages/tPOS/admin/staff-create.pen @@ -2,156 +2,1470 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "StaffCreate", "name": "Admin/StaffCreate", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "type": "frame", + "id": "StaffCreate", + "name": "Admin/StaffCreate", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "clip": true, "children": [ - {"type": "frame", "id": "SCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "SCLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCLogoTx", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SCLogoGr", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SCLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SCNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SCNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SCNavStaff", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCNavStI", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SCNavStT", "fill": "#FFFFFF", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SCUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SCUserInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SCUserNm", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SCUserRl", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "SCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "SCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SCHdrL", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCBackI", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SCHdrTG", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SCBc", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SCBc1", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SCBcS", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SCBc2", "fill": "$orange-primary", "content": "Thêm mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SCTitle", "fill": "$text-primary", "content": "Thêm nhân viên", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "SCHdrR", "gap": 12, "children": [ - {"type": "frame", "id": "SCCancel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "SCCancelT", "fill": "$text-secondary", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCSave", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCSaveI", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SCSaveT", "fill": "#FFFFFF", "content": "Lưu & Gửi mời", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "SCContent", "width": "fill_container", "height": "fill_container", "padding": [32, 48], "gap": 24, "layout": "vertical", "children": [ - {"type": "frame", "id": "SCInfoCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 20, "children": [ - {"type": "text", "id": "SCInfoT", "fill": "$text-primary", "content": "Thông tin cá nhân", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "SCRow1", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SCF1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF1L", "fill": "$text-secondary", "content": "Họ và tên *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF1P", "fill": "$text-tertiary", "content": "Nhập họ và tên", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SCF2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF2L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF2P", "fill": "$text-tertiary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - {"type": "frame", "id": "SCRow2", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SCF3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF3L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF3P", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SCF4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF4L", "fill": "$text-secondary", "content": "CMND/CCCD", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF4I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF4P", "fill": "$text-tertiary", "content": "Nhập số CMND/CCCD", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "SCRoleCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "SCRoleT", "fill": "$text-primary", "content": "Chọn vai trò *", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "SCRoles", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SCR1", "width": "fill_container", "height": 72, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "SCR1I", "width": 22, "height": 22, "iconFontName": "monitor", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "SCR1T", "fill": "$orange-primary", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SCR2", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "SCR2I", "width": 22, "height": 22, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCR2T", "fill": "$text-secondary", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCR3", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "SCR3I", "width": 22, "height": 22, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCR3T", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCR4", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "SCR4I", "width": 22, "height": 22, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCR4T", "fill": "$text-secondary", "content": "Barista", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCR5", "width": "fill_container", "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "SCR5I", "width": 22, "height": 22, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCR5T", "fill": "$text-secondary", "content": "Manager", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "SCStoreCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 28, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "SCStoreT", "fill": "$text-primary", "content": "Gán cửa hàng *", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "SCStores", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "SCS1", "width": "fill_container", "height": 44, "fill": "#FF5C0015", "stroke": {"thickness": 1, "fill": "$orange-primary"}, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCS1Chk", "width": 20, "height": 20, "fill": "$orange-primary", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCS1ChI", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]}, - {"type": "text", "id": "SCS1T", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCS2", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCS2Chk", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4}, - {"type": "text", "id": "SCS2T", "fill": "$text-secondary", "content": "Nhà hàng Q3", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SCS3", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCS3Chk", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4}, - {"type": "text", "id": "SCS3T", "fill": "$text-secondary", "content": "Karaoke Star Q7", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SCInvite", "width": "fill_container", "padding": [12, 0, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SCInvT", "fill": "$text-secondary", "content": "Gửi email mời nhân viên", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "SCToggle", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SCTogDot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SCLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCLogoIc", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCLogoTx", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SCLogoGr", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SCLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SCNavStaffT", + "fill": "#FFFFFF", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SCUserInf", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SCUserNm", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SCUserRl", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCHdrL", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCBackBtn", + "width": 40, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCBackI", + "width": 20, + "height": 20, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "SCHdrTG", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SCBc", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCBc1", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SCBcS", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SCBc2", + "fill": "$orange-primary", + "content": "Thêm mới", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "SCTitle", + "fill": "$text-primary", + "content": "Thêm nhân viên", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCHdrR", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SCCancel", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCCancelT", + "fill": "$text-secondary", + "content": "Hủy bỏ", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCSave", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCSaveI", + "width": 18, + "height": 18, + "iconFontName": "user-plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SCSaveT", + "fill": "#FFFFFF", + "content": "Lưu & Gửi mời", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 32, + 48 + ], + "gap": 24, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SCInfoCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 28, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "text", + "id": "SCInfoT", + "fill": "$text-primary", + "content": "Thông tin cá nhân", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SCRow1", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SCF1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF1L", + "fill": "$text-secondary", + "content": "Họ và tên *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF1I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF1P", + "fill": "$text-tertiary", + "content": "Nhập họ và tên", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCF2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF2L", + "fill": "$text-secondary", + "content": "Số điện thoại *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF2I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF2P", + "fill": "$text-tertiary", + "content": "0901 234 567", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCRow2", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SCF3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF3L", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF3I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF3P", + "fill": "$text-tertiary", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCF4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF4L", + "fill": "$text-secondary", + "content": "CMND/CCCD", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF4I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF4P", + "fill": "$text-tertiary", + "content": "Nhập số CMND/CCCD", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCRoleCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 28, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "SCRoleT", + "fill": "$text-primary", + "content": "Chọn vai trò *", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SCRoles", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SCR1", + "width": "fill_container", + "height": 72, + "fill": "#FF5C0015", + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "SCR1I", + "width": 22, + "height": 22, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "SCR1T", + "fill": "$orange-primary", + "content": "Cashier", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SCR2", + "width": "fill_container", + "height": 72, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "SCR2I", + "width": 22, + "height": 22, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCR2T", + "fill": "$text-secondary", + "content": "Waiter", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCR3", + "width": "fill_container", + "height": 72, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "SCR3I", + "width": 22, + "height": 22, + "iconFontName": "chef-hat", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCR3T", + "fill": "$text-secondary", + "content": "Kitchen", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCR4", + "width": "fill_container", + "height": 72, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "SCR4I", + "width": 22, + "height": 22, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCR4T", + "fill": "$text-secondary", + "content": "Barista", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCR5", + "width": "fill_container", + "height": 72, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "SCR5I", + "width": 22, + "height": 22, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCR5T", + "fill": "$text-secondary", + "content": "Manager", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCStoreCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 28, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "SCStoreT", + "fill": "$text-primary", + "content": "Gán cửa hàng *", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SCStores", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "SCS1", + "width": "fill_container", + "height": 44, + "fill": "#FF5C0015", + "stroke": { + "thickness": 1, + "fill": "$orange-primary" + }, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCS1Chk", + "width": 20, + "height": 20, + "fill": "$orange-primary", + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCS1ChI", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "text", + "id": "SCS1T", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCS2", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCS2Chk", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + }, + { + "type": "text", + "id": "SCS2T", + "fill": "$text-secondary", + "content": "Nhà hàng Q3", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "SCS3", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCS3Chk", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + }, + { + "type": "text", + "id": "SCS3T", + "fill": "$text-secondary", + "content": "Karaoke Star Q7", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCInvite", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCInvT", + "fill": "$text-secondary", + "content": "Gửi email mời nhân viên", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "frame", + "id": "SCToggle", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SCTogDot", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/staff-directory.pen b/pencil-design/src/pages/tPOS/admin/staff-directory.pen index c34d96b4..047ad5b5 100644 --- a/pencil-design/src/pages/tPOS/admin/staff-directory.pen +++ b/pencil-design/src/pages/tPOS/admin/staff-directory.pen @@ -12,342 +12,2281 @@ "clip": true, "children": [ { - "type": "frame", "id": "SDSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SDSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SDSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SDLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SDNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SDNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SDNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SDNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SDNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDNavStaff", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SDNavStaffT", "fill": "#FFFFFF", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SDNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SDNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SDNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SDNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavRptT", "fill": "$text-secondary", "content": "Báo cáo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SDNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SDNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SDSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SDLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SDNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SDNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SDNavStaffT", + "fill": "#FFFFFF", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SDNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SDMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SDMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SDHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SDHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SDBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SDBread1", "fill": "$text-tertiary", "content": "Tất cả cửa hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SDBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SDBread2", "fill": "$orange-primary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SDHeaderTitle", "fill": "$text-primary", "content": "Quản lý nhân sự", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDStoreSel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDStoreSelI", "width": 16, "height": 16, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "SDStoreSelT", "fill": "$text-primary", "content": "Tất cả cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "SDStoreSelChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "SDSearch", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SDSearchP", "fill": "$text-tertiary", "content": "Tìm nhân viên...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SDAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDAddI", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SDAddT", "fill": "#FFFFFF", "content": "Thêm nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDStats", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 32, "children": [ - {"type": "frame", "id": "SDStat1", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDStat1I", "width": 36, "height": 36, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDStat1Icon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "SDStat1T", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "SDStat1V", "fill": "$text-primary", "content": "19", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDStat1L", "fill": "$text-tertiary", "content": "Tổng nhân viên", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDStat2", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDStat2I", "width": 36, "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDStat2Icon", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "SDStat2T", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "SDStat2V", "fill": "#22C55E", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDStat2L", "fill": "$text-tertiary", "content": "Đang online", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDStat3", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDStat3I", "width": 36, "height": 36, "fill": "#F59E0B20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDStat3Icon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "SDStat3T", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "SDStat3V", "fill": "#F59E0B", "content": "3", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDStat3L", "fill": "$text-tertiary", "content": "Chờ kích hoạt", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDStat4", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDStat4I", "width": 36, "height": 36, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDStat4Icon", "width": 18, "height": 18, "iconFontName": "user-x", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "SDStat4T", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "SDStat4V", "fill": "#EF4444", "content": "4", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDStat4L", "fill": "$text-tertiary", "content": "Nghỉ phép", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDContent", "width": "fill_container", "height": "fill_container", "padding": [0, 28, 28, 28], "layout": "vertical", "gap": 0, "clip": true, "children": [ - {"type": "frame", "id": "SDTableHead", "width": "fill_container", "padding": [14, 20], "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDTH0", "width": 40, "children": [ - {"type": "frame", "id": "SDCheckAll", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDTH1", "width": 240, "children": [{"type": "text", "id": "SDTH1T", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SDTH2", "width": 120, "children": [{"type": "text", "id": "SDTH2T", "fill": "$text-tertiary", "content": "Vai trò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SDTH3", "width": 180, "children": [{"type": "text", "id": "SDTH3T", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SDTH4", "width": 100, "children": [{"type": "text", "id": "SDTH4T", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SDTH5", "width": "fill_container", "children": [{"type": "text", "id": "SDTH5T", "fill": "$text-tertiary", "content": "Ca hôm nay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SDTH6", "width": 80, "children": []} - ]}, - - {"type": "frame", "id": "SDRow1", "width": "fill_container", "padding": [14, 20], "fill": "$bg-elevated", "cornerRadius": 12, "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR1C0", "width": 40, "children": [ - {"type": "frame", "id": "SDR1Check", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDR1C1", "width": 240, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR1Av", "width": 40, "height": 40, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDR1AvT", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDR1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDR1Name", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SDR1Phone", "fill": "$text-tertiary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDR1C2", "width": 120, "children": [ - {"type": "frame", "id": "SDR1Role", "fill": "#3B82F620", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "SDR1RoleT", "fill": "#3B82F6", "content": "Manager", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SDR1C3", "width": 180, "children": [ - {"type": "text", "id": "SDR1Store", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR1C4", "width": 100, "children": [ - {"type": "frame", "id": "SDR1Status", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SDR1StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDR1C5", "width": "fill_container", "children": [ - {"type": "text", "id": "SDR1Shift", "fill": "$text-secondary", "content": "06:00 - 14:00", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR1C6", "width": 80, "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SDR1More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDR1MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDRow2", "width": "fill_container", "padding": [14, 20], "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR2C0", "width": 40, "children": [ - {"type": "frame", "id": "SDR2Check", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDR2C1", "width": 240, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR2Av", "width": 40, "height": 40, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDR2AvT", "fill": "#FFFFFF", "content": "TB", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDR2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDR2Name", "fill": "$text-primary", "content": "Trần Thị B", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SDR2Phone", "fill": "$text-tertiary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDR2C2", "width": 120, "children": [ - {"type": "frame", "id": "SDR2Role", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "SDR2RoleT", "fill": "#22C55E", "content": "Cashier", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SDR2C3", "width": 180, "children": [ - {"type": "text", "id": "SDR2Store", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR2C4", "width": 100, "children": [ - {"type": "frame", "id": "SDR2Status", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR2Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SDR2StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDR2C5", "width": "fill_container", "children": [ - {"type": "text", "id": "SDR2Shift", "fill": "$text-secondary", "content": "06:00 - 14:00", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR2C6", "width": 80, "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SDR2More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDR2MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDRow3", "width": "fill_container", "padding": [14, 20], "fill": "$bg-elevated", "cornerRadius": 12, "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR3C0", "width": 40, "children": [ - {"type": "frame", "id": "SDR3Check", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDR3C1", "width": 240, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR3Av", "width": 40, "height": 40, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDR3AvT", "fill": "#FFFFFF", "content": "LC", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDR3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDR3Name", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SDR3Phone", "fill": "$text-tertiary", "content": "0923 456 789", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDR3C2", "width": 120, "children": [ - {"type": "frame", "id": "SDR3Role", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "SDR3RoleT", "fill": "#F59E0B", "content": "Barista", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SDR3C3", "width": 180, "children": [ - {"type": "text", "id": "SDR3Store", "fill": "$text-secondary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR3C4", "width": 100, "children": [ - {"type": "frame", "id": "SDR3Status", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR3Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SDR3StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDR3C5", "width": "fill_container", "children": [ - {"type": "text", "id": "SDR3Shift", "fill": "$text-secondary", "content": "14:00 - 22:00", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR3C6", "width": 80, "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SDR3More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDR3MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDRow4", "width": "fill_container", "padding": [14, 20], "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR4C0", "width": 40, "children": [ - {"type": "frame", "id": "SDR4Check", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDR4C1", "width": 240, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR4Av", "width": 40, "height": 40, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDR4AvT", "fill": "#FFFFFF", "content": "PD", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDR4Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDR4Name", "fill": "$text-primary", "content": "Phạm Thị D", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SDR4Phone", "fill": "$text-tertiary", "content": "0934 567 890", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDR4C2", "width": 120, "children": [ - {"type": "frame", "id": "SDR4Role", "fill": "#EC489920", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "SDR4RoleT", "fill": "#EC4899", "content": "Waiter", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SDR4C3", "width": 180, "children": [ - {"type": "text", "id": "SDR4Store", "fill": "$text-secondary", "content": "Nhà hàng Phố Q3", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR4C4", "width": 100, "children": [ - {"type": "frame", "id": "SDR4Status", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR4Dot", "width": 8, "height": 8, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "SDR4StatusT", "fill": "#F59E0B", "content": "Chờ KH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDR4C5", "width": "fill_container", "children": [ - {"type": "text", "id": "SDR4Shift", "fill": "$text-secondary", "content": "14:00 - 22:00", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR4C6", "width": 80, "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SDR4More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDR4MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDRow5", "width": "fill_container", "padding": [14, 20], "fill": "$bg-elevated", "cornerRadius": 12, "gap": 0, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR5C0", "width": 40, "children": [ - {"type": "frame", "id": "SDR5Check", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 4} - ]}, - {"type": "frame", "id": "SDR5C1", "width": 240, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR5Av", "width": 40, "height": 40, "fill": "#6366F1", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDR5AvT", "fill": "#FFFFFF", "content": "HE", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDR5Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDR5Name", "fill": "$text-primary", "content": "Hoàng Văn E", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SDR5Phone", "fill": "$text-tertiary", "content": "0945 678 901", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDR5C2", "width": 120, "children": [ - {"type": "frame", "id": "SDR5Role", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [3, 10], "children": [ - {"type": "text", "id": "SDR5RoleT", "fill": "#8B5CF6", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SDR5C3", "width": 180, "children": [ - {"type": "text", "id": "SDR5Store", "fill": "$text-secondary", "content": "Nhà hàng Phố Q3", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR5C4", "width": 100, "children": [ - {"type": "frame", "id": "SDR5Status", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDR5Dot", "width": 8, "height": 8, "fill": "$text-tertiary", "cornerRadius": 100}, - {"type": "text", "id": "SDR5StatusT", "fill": "$text-tertiary", "content": "Offline", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDR5C5", "width": "fill_container", "children": [ - {"type": "text", "id": "SDR5Shift", "fill": "$text-tertiary", "content": "Nghỉ phép", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SDR5C6", "width": 80, "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SDR5More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDR5MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SDHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SDBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDBread1", + "fill": "$text-tertiary", + "content": "Tất cả cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SDBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SDBread2", + "fill": "$orange-primary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "SDHeaderTitle", + "fill": "$text-primary", + "content": "Quản lý nhân sự", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDStoreSel", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDStoreSelI", + "width": 16, + "height": 16, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "SDStoreSelT", + "fill": "$text-primary", + "content": "Tất cả cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "SDStoreSelChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "SDSearch", + "width": 220, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDSearchP", + "fill": "$text-tertiary", + "content": "Tìm nhân viên...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "SDAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDAddI", + "width": 18, + "height": 18, + "iconFontName": "user-plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SDAddT", + "fill": "#FFFFFF", + "content": "Thêm nhân viên", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDStats", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 32, + "children": [ + { + "type": "frame", + "id": "SDStat1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDStat1I", + "width": 36, + "height": 36, + "fill": "#3B82F620", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDStat1Icon", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "SDStat1T", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "SDStat1V", + "fill": "$text-primary", + "content": "19", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDStat1L", + "fill": "$text-tertiary", + "content": "Tổng nhân viên", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDStat2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDStat2I", + "width": 36, + "height": 36, + "fill": "#22C55E20", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDStat2Icon", + "width": 18, + "height": 18, + "iconFontName": "circle-check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "SDStat2T", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "SDStat2V", + "fill": "#22C55E", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDStat2L", + "fill": "$text-tertiary", + "content": "Đang online", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDStat3", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDStat3I", + "width": 36, + "height": 36, + "fill": "#F59E0B20", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDStat3Icon", + "width": 18, + "height": 18, + "iconFontName": "clock", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + }, + { + "type": "frame", + "id": "SDStat3T", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "SDStat3V", + "fill": "#F59E0B", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDStat3L", + "fill": "$text-tertiary", + "content": "Chờ kích hoạt", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDStat4", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDStat4I", + "width": 36, + "height": 36, + "fill": "#EF444420", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDStat4Icon", + "width": 18, + "height": 18, + "iconFontName": "user-x", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "SDStat4T", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "SDStat4V", + "fill": "#EF4444", + "content": "4", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDStat4L", + "fill": "$text-tertiary", + "content": "Nghỉ phép", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 0, + 28, + 28, + 28 + ], + "layout": "vertical", + "gap": 0, + "clip": true, + "children": [ + { + "type": "frame", + "id": "SDTableHead", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDTH0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDCheckAll", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDTH1", + "width": 240, + "children": [ + { + "type": "text", + "id": "SDTH1T", + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTH2", + "width": 120, + "children": [ + { + "type": "text", + "id": "SDTH2T", + "fill": "$text-tertiary", + "content": "Vai trò", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTH3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDTH3T", + "fill": "$text-tertiary", + "content": "Cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTH4", + "width": 100, + "children": [ + { + "type": "text", + "id": "SDTH4T", + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTH5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDTH5T", + "fill": "$text-tertiary", + "content": "Ca hôm nay", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTH6", + "width": 80, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "SDRow1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR1C0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDR1Check", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDR1C1", + "width": 240, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR1Av", + "width": 40, + "height": 40, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDR1AvT", + "fill": "#FFFFFF", + "content": "NA", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDR1Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDR1Name", + "fill": "$text-primary", + "content": "Nguyễn Văn A", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDR1Phone", + "fill": "$text-tertiary", + "content": "0901 234 567", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR1C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDR1Role", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDR1RoleT", + "fill": "#3B82F6", + "content": "Manager", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR1C3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDR1Store", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR1C4", + "width": 100, + "children": [ + { + "type": "frame", + "id": "SDR1Status", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR1Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDR1StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR1C5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDR1Shift", + "fill": "$text-secondary", + "content": "06:00 - 14:00", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR1C6", + "width": 80, + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SDR1More", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDR1MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDRow2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR2C0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDR2Check", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDR2C1", + "width": 240, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR2Av", + "width": 40, + "height": 40, + "fill": "#8B5CF6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDR2AvT", + "fill": "#FFFFFF", + "content": "TB", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDR2Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDR2Name", + "fill": "$text-primary", + "content": "Trần Thị B", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDR2Phone", + "fill": "$text-tertiary", + "content": "0912 345 678", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR2C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDR2Role", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDR2RoleT", + "fill": "#22C55E", + "content": "Cashier", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR2C3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDR2Store", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR2C4", + "width": 100, + "children": [ + { + "type": "frame", + "id": "SDR2Status", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR2Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDR2StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR2C5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDR2Shift", + "fill": "$text-secondary", + "content": "06:00 - 14:00", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR2C6", + "width": 80, + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SDR2More", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDR2MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDRow3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR3C0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDR3Check", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDR3C1", + "width": 240, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR3Av", + "width": 40, + "height": 40, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDR3AvT", + "fill": "#FFFFFF", + "content": "LC", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDR3Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDR3Name", + "fill": "$text-primary", + "content": "Lê Văn C", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDR3Phone", + "fill": "$text-tertiary", + "content": "0923 456 789", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR3C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDR3Role", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDR3RoleT", + "fill": "#F59E0B", + "content": "Barista", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR3C3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDR3Store", + "fill": "$text-secondary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR3C4", + "width": 100, + "children": [ + { + "type": "frame", + "id": "SDR3Status", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR3Dot", + "width": 8, + "height": 8, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDR3StatusT", + "fill": "#22C55E", + "content": "Online", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR3C5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDR3Shift", + "fill": "$text-secondary", + "content": "14:00 - 22:00", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR3C6", + "width": 80, + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SDR3More", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDR3MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDRow4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR4C0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDR4Check", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDR4C1", + "width": 240, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR4Av", + "width": 40, + "height": 40, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDR4AvT", + "fill": "#FFFFFF", + "content": "PD", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDR4Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDR4Name", + "fill": "$text-primary", + "content": "Phạm Thị D", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDR4Phone", + "fill": "$text-tertiary", + "content": "0934 567 890", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR4C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDR4Role", + "fill": "#EC489920", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDR4RoleT", + "fill": "#EC4899", + "content": "Waiter", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR4C3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDR4Store", + "fill": "$text-secondary", + "content": "Nhà hàng Phố Q3", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR4C4", + "width": 100, + "children": [ + { + "type": "frame", + "id": "SDR4Status", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR4Dot", + "width": 8, + "height": 8, + "fill": "#F59E0B", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDR4StatusT", + "fill": "#F59E0B", + "content": "Chờ KH", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR4C5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDR4Shift", + "fill": "$text-secondary", + "content": "14:00 - 22:00", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR4C6", + "width": 80, + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SDR4More", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDR4MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDRow5", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR5C0", + "width": 40, + "children": [ + { + "type": "frame", + "id": "SDR5Check", + "width": 20, + "height": 20, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 4 + } + ] + }, + { + "type": "frame", + "id": "SDR5C1", + "width": 240, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR5Av", + "width": 40, + "height": 40, + "fill": "#6366F1", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDR5AvT", + "fill": "#FFFFFF", + "content": "HE", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDR5Info", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDR5Name", + "fill": "$text-primary", + "content": "Hoàng Văn E", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDR5Phone", + "fill": "$text-tertiary", + "content": "0945 678 901", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR5C2", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDR5Role", + "fill": "#8B5CF620", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDR5RoleT", + "fill": "#8B5CF6", + "content": "Kitchen", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR5C3", + "width": 180, + "children": [ + { + "type": "text", + "id": "SDR5Store", + "fill": "$text-secondary", + "content": "Nhà hàng Phố Q3", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR5C4", + "width": 100, + "children": [ + { + "type": "frame", + "id": "SDR5Status", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDR5Dot", + "width": 8, + "height": 8, + "fill": "$text-tertiary", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDR5StatusT", + "fill": "$text-tertiary", + "content": "Offline", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDR5C5", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDR5Shift", + "fill": "$text-tertiary", + "content": "Nghỉ phép", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SDR5C6", + "width": 80, + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SDR5More", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDR5MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/staff-schedule.pen b/pencil-design/src/pages/tPOS/admin/staff-schedule.pen index 38bdeec8..ef39b561 100644 --- a/pencil-design/src/pages/tPOS/admin/staff-schedule.pen +++ b/pencil-design/src/pages/tPOS/admin/staff-schedule.pen @@ -2,243 +2,2242 @@ "version": "2.6", "children": [ { - "type": "frame", "id": "StaffSchedule", "name": "Admin/StaffSchedule", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, + "type": "frame", + "id": "StaffSchedule", + "name": "Admin/StaffSchedule", + "reusable": true, + "width": 1440, + "height": 900, + "fill": "$bg-page", + "clip": true, "children": [ - {"type": "frame", "id": "SSSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "SSLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SSLogoGr", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SSLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SSLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SSNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SSNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SSNavSch", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSNavSchI", "width": 20, "height": 20, "iconFontName": "calendar-days", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SSNavSchT", "fill": "#FFFFFF", "content": "Lịch làm việc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SSUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SSUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SSUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "SSMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "SSHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SSTitle", "fill": "$text-primary", "content": "Lịch làm việc", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SSWeekSel", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSWkPrev", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSWkPrevI", "width": 18, "height": 18, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "SSWkTxt", "fill": "$text-primary", "content": "Tuần 10/02 - 16/02", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "SSWkNext", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSWkNextI", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "SSAddShift", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SSAddT", "fill": "#FFFFFF", "content": "Phân ca", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSCalendar", "width": "fill_container", "height": "fill_container", "padding": [24, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "frame", "id": "SSCalHead", "width": "fill_container", "children": [ - {"type": "frame", "id": "SSCalN", "width": 140, "height": 44, "padding": [0, 12], "alignItems": "center", "children": [ - {"type": "text", "id": "SSCalNT", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SSD1", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD1T", "fill": "$text-secondary", "content": "T2 10/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSD2", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD2T", "fill": "$text-secondary", "content": "T3 11/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSD3", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD3T", "fill": "$orange-primary", "content": "T4 12/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SSD4", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD4T", "fill": "$text-secondary", "content": "T5 13/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSD5", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD5T", "fill": "$text-secondary", "content": "T6 14/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSD6", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD6T", "fill": "$text-secondary", "content": "T7 15/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSD7", "width": "fill_container", "height": 44, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "children": [ - {"type": "text", "id": "SSD7T", "fill": "$text-tertiary", "content": "CN 16/02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SSRow1", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [ - {"type": "frame", "id": "SSR1N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SSR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSR1D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR1D1S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR1D1T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR1D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR1D2S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR1D2T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR1D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR1D3S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR1D3T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR1D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR1D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR1D5S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR1D5T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR1D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR1D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}} - ]}, - {"type": "frame", "id": "SSRow2", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [ - {"type": "frame", "id": "SSR2N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SSR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSR2D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR2D1S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2D1T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR2D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR2D2S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2D2T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR2D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR2D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR2D4S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2D4T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR2D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR2D5S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2D5T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR2D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR2D6S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR2D6T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR2D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}} - ]}, - {"type": "frame", "id": "SSRow3", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [ - {"type": "frame", "id": "SSR3N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SSR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSR3D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR3D1S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3D1T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR3D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR3D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR3D3S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3D3T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR3D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR3D4S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3D4T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR3D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR3D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR3D6S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3D6T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR3D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR3D7S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR3D7T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "SSRow4", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [ - {"type": "frame", "id": "SSR4N", "width": 140, "height": 64, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SSR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSR4D1", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}}, - {"type": "frame", "id": "SSR4D2", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR4D2S", "width": "fill_container", "height": "fill_container", "fill": "#3B82F620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4D2T", "fill": "#3B82F6", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR4D3", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR4D3S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4D3T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR4D4", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR4D4S", "width": "fill_container", "height": "fill_container", "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4D4T", "fill": "#22C55E", "content": "Chiều", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR4D5", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR4D5S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4D5T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR4D6", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "frame", "id": "SSR4D6S", "width": "fill_container", "height": "fill_container", "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSR4D6T", "fill": "#8B5CF6", "content": "Tối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSR4D7", "width": "fill_container", "height": 64, "padding": 6, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}} - ]}, - {"type": "frame", "id": "SSLegend", "width": "fill_container", "padding": [16, 0, 0, 0], "gap": 24, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "children": [ - {"type": "frame", "id": "SSLg1", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSLg1C", "width": 14, "height": 14, "fill": "#3B82F6", "cornerRadius": 4}, - {"type": "text", "id": "SSLg1T", "fill": "$text-secondary", "content": "Sáng 6h-14h", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SSLg2", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSLg2C", "width": 14, "height": 14, "fill": "#22C55E", "cornerRadius": 4}, - {"type": "text", "id": "SSLg2T", "fill": "$text-secondary", "content": "Chiều 14h-22h", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SSLg3", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSLg3C", "width": 14, "height": 14, "fill": "#8B5CF6", "cornerRadius": 4}, - {"type": "text", "id": "SSLg3T", "fill": "$text-secondary", "content": "Tối 22h-6h", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SSSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SSLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSLogoIc", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SSLogoGr", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SSLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SSLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SSNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SSNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SSNavStaffT", + "fill": "#FFFFFF", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SSNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSUsr", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSUsrAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSUsrAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SSUsrInf", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SSUsrN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SSUsrR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SSHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSTitle", + "fill": "$text-primary", + "content": "Lịch làm việc", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SSWeekSel", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSWkPrev", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSWkPrevI", + "width": 18, + "height": 18, + "iconFontName": "chevron-left", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "text", + "id": "SSWkTxt", + "fill": "$text-primary", + "content": "Tuần 10/02 - 16/02", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SSWkNext", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSWkNextI", + "width": 18, + "height": 18, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSAddShift", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SSAddT", + "fill": "#FFFFFF", + "content": "Phân ca", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSCalendar", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 24, + 24 + ], + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SSCalHead", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "SSCalN", + "width": 140, + "height": 44, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSCalNT", + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SSD1", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD1T", + "fill": "$text-secondary", + "content": "T2 10/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSD2", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD2T", + "fill": "$text-secondary", + "content": "T3 11/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSD3", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD3T", + "fill": "$orange-primary", + "content": "T4 12/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SSD4", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD4T", + "fill": "$text-secondary", + "content": "T5 13/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSD5", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD5T", + "fill": "$text-secondary", + "content": "T6 14/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSD6", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD6T", + "fill": "$text-secondary", + "content": "T7 15/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSD7", + "width": "fill_container", + "height": 44, + "justifyContent": "center", + "alignItems": "center", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "children": [ + { + "type": "text", + "id": "SSD7T", + "fill": "$text-tertiary", + "content": "CN 16/02", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSRow1", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "children": [ + { + "type": "frame", + "id": "SSR1N", + "width": 140, + "height": 64, + "padding": [ + 0, + 12 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSR1Av", + "width": 32, + "height": 32, + "fill": "#8B5CF6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR1AvT", + "fill": "#FFFFFF", + "content": "TN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SSR1Nm", + "fill": "$text-primary", + "content": "Trần Nhật", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSR1D1", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR1D1S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR1D1T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR1D2", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR1D2S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR1D2T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR1D3", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR1D3S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR1D3T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR1D4", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR1D5", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR1D5S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR1D5T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR1D6", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR1D7", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + } + ] + }, + { + "type": "frame", + "id": "SSRow2", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "children": [ + { + "type": "frame", + "id": "SSR2N", + "width": 140, + "height": 64, + "padding": [ + 0, + 12 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSR2Av", + "width": 32, + "height": 32, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2AvT", + "fill": "#FFFFFF", + "content": "LM", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SSR2Nm", + "fill": "$text-primary", + "content": "Lê Minh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSR2D1", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR2D1S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2D1T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR2D2", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR2D2S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2D2T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR2D3", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR2D4", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR2D4S", + "width": "fill_container", + "height": "fill_container", + "fill": "#8B5CF620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2D4T", + "fill": "#8B5CF6", + "content": "Tối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR2D5", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR2D5S", + "width": "fill_container", + "height": "fill_container", + "fill": "#8B5CF620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2D5T", + "fill": "#8B5CF6", + "content": "Tối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR2D6", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR2D6S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR2D6T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR2D7", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + } + ] + }, + { + "type": "frame", + "id": "SSRow3", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "children": [ + { + "type": "frame", + "id": "SSR3N", + "width": 140, + "height": 64, + "padding": [ + 0, + 12 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSR3Av", + "width": 32, + "height": 32, + "fill": "#EF4444", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3AvT", + "fill": "#FFFFFF", + "content": "PH", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SSR3Nm", + "fill": "$text-primary", + "content": "Phạm Hương", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSR3D1", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR3D1S", + "width": "fill_container", + "height": "fill_container", + "fill": "#8B5CF620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3D1T", + "fill": "#8B5CF6", + "content": "Tối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR3D2", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR3D3", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR3D3S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3D3T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR3D4", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR3D4S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3D4T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR3D5", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR3D6", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR3D6S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3D6T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR3D7", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR3D7S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR3D7T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSRow4", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "children": [ + { + "type": "frame", + "id": "SSR4N", + "width": 140, + "height": 64, + "padding": [ + 0, + 12 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSR4Av", + "width": 32, + "height": 32, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4AvT", + "fill": "#FFFFFF", + "content": "NB", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SSR4Nm", + "fill": "$text-primary", + "content": "Nguyễn Bảo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSR4D1", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + }, + { + "type": "frame", + "id": "SSR4D2", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR4D2S", + "width": "fill_container", + "height": "fill_container", + "fill": "#3B82F620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4D2T", + "fill": "#3B82F6", + "content": "Sáng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR4D3", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR4D3S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4D3T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR4D4", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR4D4S", + "width": "fill_container", + "height": "fill_container", + "fill": "#22C55E20", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4D4T", + "fill": "#22C55E", + "content": "Chiều", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR4D5", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR4D5S", + "width": "fill_container", + "height": "fill_container", + "fill": "#8B5CF620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4D5T", + "fill": "#8B5CF6", + "content": "Tối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR4D6", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + }, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SSR4D6S", + "width": "fill_container", + "height": "fill_container", + "fill": "#8B5CF620", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSR4D6T", + "fill": "#8B5CF6", + "content": "Tối", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSR4D7", + "width": "fill_container", + "height": 64, + "padding": 6, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "left" + ] + } + } + ] + }, + { + "type": "frame", + "id": "SSLegend", + "width": "fill_container", + "padding": [ + 16, + 0, + 0, + 0 + ], + "gap": 24, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "children": [ + { + "type": "frame", + "id": "SSLg1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSLg1C", + "width": 14, + "height": 14, + "fill": "#3B82F6", + "cornerRadius": 4 + }, + { + "type": "text", + "id": "SSLg1T", + "fill": "$text-secondary", + "content": "Sáng 6h-14h", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SSLg2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSLg2C", + "width": 14, + "height": 14, + "fill": "#22C55E", + "cornerRadius": 4 + }, + { + "type": "text", + "id": "SSLg2T", + "fill": "$text-secondary", + "content": "Chiều 14h-22h", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SSLg3", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSLg3C", + "width": 14, + "height": 14, + "fill": "#8B5CF6", + "cornerRadius": 4 + }, + { + "type": "text", + "id": "SSLg3T", + "fill": "$text-secondary", + "content": "Tối 22h-6h", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/stock-transfer.pen b/pencil-design/src/pages/tPOS/admin/stock-transfer.pen index b50a6f41..fcbc36c2 100644 --- a/pencil-design/src/pages/tPOS/admin/stock-transfer.pen +++ b/pencil-design/src/pages/tPOS/admin/stock-transfer.pen @@ -12,207 +12,1638 @@ "clip": true, "children": [ { - "type": "frame", "id": "STSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "STSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "STSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "STLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "STLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "STLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "STLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "STLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "STSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "STNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "STNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "STNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "STNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "STNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "STNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "STNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "STNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "STNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "STNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "STNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "STNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "STNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "STNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "STNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "STNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "STNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "STNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "STSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "STUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "STUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "STUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "STUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "STUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "STSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "STLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "STLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "STLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "STLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "STSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "STNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "STNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "STNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "STNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "STNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "STNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "STNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "STNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "STNavInvT", + "fill": "#FFFFFF", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "STNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "STNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "STNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "STNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "STNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "STNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "STNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "STNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "STSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "STUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "STUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "STUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "STMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "STMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "STHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "STHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "STBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "STBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "STBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "STBread2", "fill": "$orange-primary", "content": "Chuyển kho", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "STHeaderTitle", "fill": "$text-primary", "content": "Chuyển kho", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "STHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "STAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "STAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "STAddT", "fill": "#FFFFFF", "content": "Tạo phiếu chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "STContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "STTableSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "STTableTitle", "fill": "$text-primary", "content": "Phiếu chuyển kho gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "STTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "STTableHead", "width": "fill_container", "height": 48, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "STTh1", "width": 120, "fill": "$text-tertiary", "content": "Mã phiếu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "STTh2", "width": 180, "fill": "$text-tertiary", "content": "Từ cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "STTh3", "width": 180, "fill": "$text-tertiary", "content": "Đến cửa hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "STTh4", "width": 80, "fill": "$text-tertiary", "content": "Số SP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "STTh5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "STTh6", "width": 120, "fill": "$text-tertiary", "content": "Ngày tạo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "STRow1", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "STR1C1", "width": 120, "fill": "$orange-primary", "content": "TF-001", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "STR1C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR1C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q3", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR1C4", "width": 80, "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STR1Badge", "width": 120, "children": [ - {"type": "frame", "id": "STR1BadgeF", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "STR1BadgeT", "fill": "#3B82F6", "content": "Đang vận chuyển", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "STR1C6", "width": 120, "fill": "$text-secondary", "content": "20/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "STRow2", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "STR2C1", "width": 120, "fill": "$orange-primary", "content": "TF-002", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "STR2C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q7", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR2C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR2C4", "width": 80, "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STR2Badge", "width": 120, "children": [ - {"type": "frame", "id": "STR2BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "STR2BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "STR2C6", "width": 120, "fill": "$text-secondary", "content": "18/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "STRow3", "width": "fill_container", "height": 56, "padding": [0, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "STR3C1", "width": 120, "fill": "$orange-primary", "content": "TF-003", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "STR3C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Thủ Đức", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR3C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Q7", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR3C4", "width": 80, "fill": "$text-secondary", "content": "8", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STR3Badge", "width": 120, "children": [ - {"type": "frame", "id": "STR3BadgeF", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "STR3BadgeT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "STR3C6", "width": 120, "fill": "$text-secondary", "content": "15/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "STRow4", "width": "fill_container", "height": 56, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "STR4C1", "width": 120, "fill": "$orange-primary", "content": "TF-004", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "STR4C2", "width": 180, "fill": "$text-primary", "content": "Coffee House Q3", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR4C3", "width": 180, "fill": "$text-primary", "content": "Coffee House Thủ Đức", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "STR4C4", "width": 80, "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STR4Badge", "width": 120, "children": [ - {"type": "frame", "id": "STR4BadgeF", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "STR4BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "STR4C6", "width": 120, "fill": "$text-secondary", "content": "12/01/2024", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "STFormSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 20, "children": [ - {"type": "text", "id": "STFormTitle", "fill": "$text-primary", "content": "Tạo phiếu chuyển kho mới", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "STFormRow1", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "STFormFrom", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "STFormFromL", "fill": "$text-secondary", "content": "Cửa hàng gửi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "STFormFromDD", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "STFormFromV", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "STFormFromChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "STFormArrow", "width": 44, "height": 44, "justifyContent": "center", "alignItems": "flex_end", "children": [ - {"type": "icon_font", "id": "STFormArrowI", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "frame", "id": "STFormTo", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "STFormToL", "fill": "$text-secondary", "content": "Cửa hàng nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "STFormToDD", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "STFormToV", "fill": "$text-tertiary", "content": "Chọn cửa hàng...", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "icon_font", "id": "STFormToChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "STFormProducts", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "STFormProdL", "fill": "$text-secondary", "content": "Danh sách sản phẩm chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "STFormProdList", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "layout": "vertical", "children": [ - {"type": "frame", "id": "STFProd1", "width": "fill_container", "height": 44, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd1N", "fill": "$text-primary", "content": "Cà phê Arabica 500g", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STFProd1Qty", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd1QL", "fill": "$text-tertiary", "content": "SL:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "STFProd1QV", "width": 60, "height": 30, "fill": "$bg-page", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd1QT", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "STFProd2", "width": "fill_container", "height": 44, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd2N", "fill": "$text-primary", "content": "Sữa tươi Vinamilk 1L", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "STFProd2Qty", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd2QL", "fill": "$text-tertiary", "content": "SL:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "STFProd2QV", "width": 60, "height": 30, "fill": "$bg-page", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "STFProd2QT", "fill": "$text-primary", "content": "24", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "STFProdAdd", "width": "fill_container", "height": 44, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "icon_font", "id": "STFProdAddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "STFProdAddT", "fill": "$orange-primary", "content": "Thêm sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "STHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "STHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "STBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STBread1", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "STBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "STBread2", + "fill": "$orange-primary", + "content": "Chuyển kho", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "STHeaderTitle", + "fill": "$text-primary", + "content": "Chuyển kho", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "STHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "STAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "STAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "STAddT", + "fill": "#FFFFFF", + "content": "Tạo phiếu chuyển", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "STContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "frame", + "id": "STTableSection", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "STTableTitle", + "fill": "$text-primary", + "content": "Phiếu chuyển kho gần đây", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "STTable", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "STTableHead", + "width": "fill_container", + "height": 48, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STTh1", + "width": 120, + "fill": "$text-tertiary", + "content": "Mã phiếu", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STTh2", + "width": 180, + "fill": "$text-tertiary", + "content": "Từ cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STTh3", + "width": 180, + "fill": "$text-tertiary", + "content": "Đến cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STTh4", + "width": 80, + "fill": "$text-tertiary", + "content": "Số SP", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STTh5", + "width": 120, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STTh6", + "width": 120, + "fill": "$text-tertiary", + "content": "Ngày tạo", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "STRow1", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STR1C1", + "width": 120, + "fill": "$orange-primary", + "content": "TF-001", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STR1C2", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR1C3", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q3", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR1C4", + "width": 80, + "fill": "$text-secondary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STR1Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "STR1BadgeF", + "fill": "#3B82F620", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "STR1BadgeT", + "fill": "#3B82F6", + "content": "Đang vận chuyển", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "STR1C6", + "width": 120, + "fill": "$text-secondary", + "content": "20/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "STRow2", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STR2C1", + "width": 120, + "fill": "$orange-primary", + "content": "TF-002", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STR2C2", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q7", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR2C3", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR2C4", + "width": 80, + "fill": "$text-secondary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STR2Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "STR2BadgeF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "STR2BadgeT", + "fill": "#22C55E", + "content": "Hoàn thành", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "STR2C6", + "width": 120, + "fill": "$text-secondary", + "content": "18/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "STRow3", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STR3C1", + "width": 120, + "fill": "$orange-primary", + "content": "TF-003", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STR3C2", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Thủ Đức", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR3C3", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q7", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR3C4", + "width": 80, + "fill": "$text-secondary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STR3Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "STR3BadgeF", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "STR3BadgeT", + "fill": "#F59E0B", + "content": "Chờ xác nhận", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "STR3C6", + "width": 120, + "fill": "$text-secondary", + "content": "15/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "STRow4", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STR4C1", + "width": 120, + "fill": "$orange-primary", + "content": "TF-004", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "STR4C2", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Q3", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR4C3", + "width": 180, + "fill": "$text-primary", + "content": "Coffee House Thủ Đức", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "STR4C4", + "width": 80, + "fill": "$text-secondary", + "content": "2", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STR4Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "STR4BadgeF", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "STR4BadgeT", + "fill": "#22C55E", + "content": "Hoàn thành", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "STR4C6", + "width": 120, + "fill": "$text-secondary", + "content": "12/01/2024", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "STFormSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "text", + "id": "STFormTitle", + "fill": "$text-primary", + "content": "Tạo phiếu chuyển kho mới", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "STFormRow1", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "STFormFrom", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "STFormFromL", + "fill": "$text-secondary", + "content": "Cửa hàng gửi", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "STFormFromDD", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFormFromV", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "STFormFromChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "STFormArrow", + "width": 44, + "height": 44, + "justifyContent": "center", + "alignItems": "flex_end", + "children": [ + { + "type": "icon_font", + "id": "STFormArrowI", + "width": 24, + "height": 24, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "STFormTo", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "STFormToL", + "fill": "$text-secondary", + "content": "Cửa hàng nhận", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "STFormToDD", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFormToV", + "fill": "$text-tertiary", + "content": "Chọn cửa hàng...", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "icon_font", + "id": "STFormToChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "STFormProducts", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "STFormProdL", + "fill": "$text-secondary", + "content": "Danh sách sản phẩm chuyển", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "STFormProdList", + "width": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": 10, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "STFProd1", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 14 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd1N", + "fill": "$text-primary", + "content": "Cà phê Arabica 500g", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STFProd1Qty", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd1QL", + "fill": "$text-tertiary", + "content": "SL:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "STFProd1QV", + "width": 60, + "height": 30, + "fill": "$bg-page", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd1QT", + "fill": "$text-primary", + "content": "10", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "STFProd2", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 14 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd2N", + "fill": "$text-primary", + "content": "Sữa tươi Vinamilk 1L", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "frame", + "id": "STFProd2Qty", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd2QL", + "fill": "$text-tertiary", + "content": "SL:", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "id": "STFProd2QV", + "width": 60, + "height": 30, + "fill": "$bg-page", + "cornerRadius": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "STFProd2QT", + "fill": "$text-primary", + "content": "24", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "STFProdAdd", + "width": "fill_container", + "height": 44, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "STFProdAddI", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "STFProdAddT", + "fill": "$orange-primary", + "content": "Thêm sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/store-create.pen b/pencil-design/src/pages/tPOS/admin/store-create.pen index 8c881dd2..80e33fe9 100644 --- a/pencil-design/src/pages/tPOS/admin/store-create.pen +++ b/pencil-design/src/pages/tPOS/admin/store-create.pen @@ -12,195 +12,1533 @@ "clip": true, "children": [ { - "type": "frame", "id": "SCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCLogoIcon", "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": "SCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SCLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SCNavStores", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SCNavStoresT", "fill": "#FFFFFF", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SCNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SCSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCLogoIcon", + "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": "SCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SCLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SCLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SCNavStoresT", + "fill": "#FFFFFF", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SCUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SCUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SCUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SCHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCBack", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCBackI", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SCHeaderTG", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SCBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SCBread1", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SCBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SCBread2", "fill": "$orange-primary", "content": "Tạo mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SCHeaderTitle", "fill": "$text-primary", "content": "Tạo cửa hàng mới", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "SCHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "SCCancelBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "SCCancelT", "fill": "$text-secondary", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCCreateBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SCCreateI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SCCreateT", "fill": "#FFFFFF", "content": "Tạo cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SCSteps", "width": "fill_container", "padding": [20, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "center", "gap": 0, "children": [ - {"type": "frame", "id": "SCStep1", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCStep1Circle", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCStep1Num", "fill": "#FFFFFF", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SCStep1T", "fill": "$orange-primary", "content": "Thông tin", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SCStepLine1", "width": 100, "height": 2, "fill": "$orange-primary", "marginTop": 18}, - {"type": "frame", "id": "SCStep2", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCStep2Circle", "width": 36, "height": 36, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCStep2Num", "fill": "$text-tertiary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SCStep2T", "fill": "$text-tertiary", "content": "Loại hình", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCStepLine2", "width": 100, "height": 2, "fill": "$border-default", "marginTop": 18}, - {"type": "frame", "id": "SCStep3", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCStep3Circle", "width": 36, "height": 36, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCStep3Num", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SCStep3T", "fill": "$text-tertiary", "content": "Cấu hình", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCStepLine3", "width": 100, "height": 2, "fill": "$border-default", "marginTop": 18}, - {"type": "frame", "id": "SCStep4", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SCStep4Circle", "width": 36, "height": 36, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SCStep4Num", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SCStep4T", "fill": "$text-tertiary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - - {"type": "frame", "id": "SCFormArea", "width": "fill_container", "height": "fill_container", "padding": [32, 80], "justifyContent": "center", "children": [ - {"type": "frame", "id": "SCFormCard", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "SCFormHeader", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCFormTitle", "fill": "$text-primary", "content": "Thông tin cửa hàng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "SCFormSub", "fill": "$text-tertiary", "content": "Nhập thông tin cơ bản để tạo cửa hàng mới", "fontFamily": "Roboto", "fontSize": 14} - ]}, - - {"type": "frame", "id": "SCFormRow1", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SCF1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF1L", "fill": "$text-secondary", "content": "Tên cửa hàng *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF1P", "fill": "$text-tertiary", "content": "VD: Coffee House Q1", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SCF2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF2L", "fill": "$text-secondary", "content": "Mã cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF2P", "fill": "$text-tertiary", "content": "Tự động tạo", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "SCFormRow2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF3L", "fill": "$text-secondary", "content": "Địa chỉ *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF3P", "fill": "$text-tertiary", "content": "Nhập địa chỉ cửa hàng", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - - {"type": "frame", "id": "SCFormRow3", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SCF4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF4L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF4I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF4P", "fill": "$text-tertiary", "content": "VD: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SCF5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF5L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCF5I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SCF5P", "fill": "$text-tertiary", "content": "store@example.com", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "SCFormRow4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SCF6L", "fill": "$text-secondary", "content": "Chọn loại hình kinh doanh *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SCBizTypes", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SCBiz1", "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": "SCBiz1E", "content": "☕", "fontSize": 24}, - {"type": "text", "id": "SCBiz1T", "fill": "$orange-primary", "content": "Quán cà phê", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SCBiz2", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [ - {"type": "text", "id": "SCBiz2E", "content": "🍽️", "fontSize": 24}, - {"type": "text", "id": "SCBiz2T", "fill": "$text-secondary", "content": "Nhà hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCBiz3", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [ - {"type": "text", "id": "SCBiz3E", "content": "🎤", "fontSize": 24}, - {"type": "text", "id": "SCBiz3T", "fill": "$text-secondary", "content": "Karaoke", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCBiz4", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [ - {"type": "text", "id": "SCBiz4E", "content": "💆", "fontSize": 24}, - {"type": "text", "id": "SCBiz4T", "fill": "$text-secondary", "content": "Spa", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SCBiz5", "width": "fill_container", "height": 80, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 6, "children": [ - {"type": "text", "id": "SCBiz5E", "content": "🛒", "fontSize": 24}, - {"type": "text", "id": "SCBiz5T", "fill": "$text-secondary", "content": "Bán lẻ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SCFormFooter", "width": "fill_container", "justifyContent": "flex_end", "gap": 12, "padding": [8, 0, 0, 0], "children": [ - {"type": "frame", "id": "SCNextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SCNextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "SCNextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCHeaderLeft", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCBack", + "width": 40, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCBackI", + "width": 20, + "height": 20, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "SCHeaderTG", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SCBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCBread1", + "fill": "$text-tertiary", + "content": "Cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SCBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SCBread2", + "fill": "$orange-primary", + "content": "Tạo mới", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "SCHeaderTitle", + "fill": "$text-primary", + "content": "Tạo cửa hàng mới", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SCCancelBtn", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCCancelT", + "fill": "$text-secondary", + "content": "Hủy bỏ", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCCreateBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SCCreateI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SCCreateT", + "fill": "#FFFFFF", + "content": "Tạo cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCSteps", + "width": "fill_container", + "padding": [ + 20, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "center", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SCStep1", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCStep1Circle", + "width": 36, + "height": 36, + "fill": "$orange-primary", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCStep1Num", + "fill": "#FFFFFF", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SCStep1T", + "fill": "$orange-primary", + "content": "Thông tin", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SCStepLine1", + "width": 100, + "height": 2, + "fill": "$orange-primary", + "marginTop": 18 + }, + { + "type": "frame", + "id": "SCStep2", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCStep2Circle", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCStep2Num", + "fill": "$text-tertiary", + "content": "2", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SCStep2T", + "fill": "$text-tertiary", + "content": "Loại hình", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCStepLine2", + "width": 100, + "height": 2, + "fill": "$border-default", + "marginTop": 18 + }, + { + "type": "frame", + "id": "SCStep3", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCStep3Circle", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCStep3Num", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SCStep3T", + "fill": "$text-tertiary", + "content": "Cấu hình", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCStepLine3", + "width": 100, + "height": 2, + "fill": "$border-default", + "marginTop": 18 + }, + { + "type": "frame", + "id": "SCStep4", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SCStep4Circle", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCStep4Num", + "fill": "$text-tertiary", + "content": "4", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "SCStep4T", + "fill": "$text-tertiary", + "content": "Xác nhận", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCFormArea", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 32, + 80 + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SCFormCard", + "width": 720, + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 32, + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "SCFormHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCFormTitle", + "fill": "$text-primary", + "content": "Thông tin cửa hàng", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SCFormSub", + "fill": "$text-tertiary", + "content": "Nhập thông tin cơ bản để tạo cửa hàng mới", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "SCFormRow1", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SCF1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF1L", + "fill": "$text-secondary", + "content": "Tên cửa hàng *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF1I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF1P", + "fill": "$text-tertiary", + "content": "VD: Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCF2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF2L", + "fill": "$text-secondary", + "content": "Mã cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF2I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF2P", + "fill": "$text-tertiary", + "content": "Tự động tạo", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCFormRow2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF3L", + "fill": "$text-secondary", + "content": "Địa chỉ *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF3I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF3P", + "fill": "$text-tertiary", + "content": "Nhập địa chỉ cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCFormRow3", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SCF4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF4L", + "fill": "$text-secondary", + "content": "Số điện thoại *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF4I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF4P", + "fill": "$text-tertiary", + "content": "VD: 028 1234 5678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCF5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF5L", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCF5I", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCF5P", + "fill": "$text-tertiary", + "content": "store@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCFormRow4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SCF6L", + "fill": "$text-secondary", + "content": "Chọn loại hình kinh doanh *", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SCBizTypes", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SCBiz1", + "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": "SCBiz1E", + "content": "☕", + "fontSize": 24 + }, + { + "type": "text", + "id": "SCBiz1T", + "fill": "$orange-primary", + "content": "Quán cà phê", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SCBiz2", + "width": "fill_container", + "height": 80, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 6, + "children": [ + { + "type": "text", + "id": "SCBiz2E", + "content": "🍽️", + "fontSize": 24 + }, + { + "type": "text", + "id": "SCBiz2T", + "fill": "$text-secondary", + "content": "Nhà hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCBiz3", + "width": "fill_container", + "height": 80, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 6, + "children": [ + { + "type": "text", + "id": "SCBiz3E", + "content": "🎤", + "fontSize": 24 + }, + { + "type": "text", + "id": "SCBiz3T", + "fill": "$text-secondary", + "content": "Karaoke", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCBiz4", + "width": "fill_container", + "height": 80, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 6, + "children": [ + { + "type": "text", + "id": "SCBiz4E", + "content": "💆", + "fontSize": 24 + }, + { + "type": "text", + "id": "SCBiz4T", + "fill": "$text-secondary", + "content": "Spa", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SCBiz5", + "width": "fill_container", + "height": 80, + "fill": "$bg-interactive", + "cornerRadius": 12, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 6, + "children": [ + { + "type": "text", + "id": "SCBiz5E", + "content": "🛒", + "fontSize": 24 + }, + { + "type": "text", + "id": "SCBiz5T", + "fill": "$text-secondary", + "content": "Bán lẻ", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SCFormFooter", + "width": "fill_container", + "justifyContent": "flex_end", + "gap": 12, + "padding": [ + 8, + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "SCNextBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 12, + 28 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SCNextT", + "fill": "#FFFFFF", + "content": "Tiếp theo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "SCNextI", + "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/store-detail.pen b/pencil-design/src/pages/tPOS/admin/store-detail.pen index 856bc34b..062a76e6 100644 --- a/pencil-design/src/pages/tPOS/admin/store-detail.pen +++ b/pencil-design/src/pages/tPOS/admin/store-detail.pen @@ -12,221 +12,1725 @@ "clip": true, "children": [ { - "type": "frame", "id": "SDSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SDSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SDSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SDLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SDSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SDNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SDNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SDNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SDNavStores", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SDNavStoresT", "fill": "#FFFFFF", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SDNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SDNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SDNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SDSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SDUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SDUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SDUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SDUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SDSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SDLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SDNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SDNavStoresT", + "fill": "#FFFFFF", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SDNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SDNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SDNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SDNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SDNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SDUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SDUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SDMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SDMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SDHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SDHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SDBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SDBread1", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SDBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SDBread2", "fill": "$orange-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SDHeaderTitleRow", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "SDHeaderTitle", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SDStatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 12], "alignItems": "center", "gap": 6, "children": [ - {"type": "frame", "id": "SDStatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SDStatusText", "fill": "#22C55E", "content": "Active", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "SDHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "SDEditBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDEditBtnI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SDEditBtnT", "fill": "$text-primary", "content": "Chỉnh sửa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDPauseBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDPauseBtnI", "width": 16, "height": 16, "iconFontName": "pause-circle", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "SDPauseBtnT", "fill": "$text-primary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDTabsRow", "width": "fill_container", "fill": "$bg-elevated", "padding": [0, 32], "gap": 0, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "frame", "id": "SDTabActive", "padding": [12, 16], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "SDTabActiveT", "fill": "$orange-primary", "content": "Tổng quan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SDTab2", "padding": [12, 16], "children": [ - {"type": "text", "id": "SDTab2T", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDTab3", "padding": [12, 16], "children": [ - {"type": "text", "id": "SDTab3T", "fill": "$text-secondary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDTab4", "padding": [12, 16], "children": [ - {"type": "text", "id": "SDTab4T", "fill": "$text-secondary", "content": "Kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDTab5", "padding": [12, 16], "children": [ - {"type": "text", "id": "SDTab5T", "fill": "$text-secondary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SDTab6", "padding": [12, 16], "children": [ - {"type": "text", "id": "SDTab6T", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - - {"type": "frame", "id": "SDContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "SDKPIRow", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "SDKPI1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SDKPI1Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "SDKPI1Label", "fill": "$text-secondary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SDKPI1Icon", "width": 36, "height": 36, "fill": "#FF5C0015", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDKPI1I", "width": 18, "height": 18, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]} - ]}, - {"type": "text", "id": "SDKPI1Value", "fill": "$text-primary", "content": "45.2M ₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "SDKPI1Sub", "fill": "#22C55E", "content": "+12.5% so với tháng trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SDKPI2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SDKPI2Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "SDKPI2Label", "fill": "$text-secondary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SDKPI2Icon", "width": 36, "height": 36, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDKPI2I", "width": 18, "height": 18, "iconFontName": "shopping-bag", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]} - ]}, - {"type": "text", "id": "SDKPI2Value", "fill": "$text-primary", "content": "328", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "SDKPI2Sub", "fill": "#22C55E", "content": "+8.2% so với tháng trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SDKPI3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SDKPI3Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "SDKPI3Label", "fill": "$text-secondary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SDKPI3Icon", "width": 36, "height": 36, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDKPI3I", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ]}, - {"type": "text", "id": "SDKPI3Value", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "SDKPI3Sub", "fill": "$text-tertiary", "content": "6 đang làm việc", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SDKPI4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SDKPI4Top", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "SDKPI4Label", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SDKPI4Icon", "width": 36, "height": 36, "fill": "#F59E0B15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SDKPI4I", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]} - ]}, - {"type": "text", "id": "SDKPI4Value", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "SDKPI4Sub", "fill": "$text-tertiary", "content": "3 hết hàng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - - {"type": "frame", "id": "SDTableCard", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "SDTableHeader", "width": "fill_container", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SDTableTitle", "fill": "$text-primary", "content": "Đơn hàng gần đây", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SDTableLink", "fill": "$orange-primary", "content": "Xem tất cả →", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - - {"type": "frame", "id": "SDTableHead", "width": "fill_container", "padding": [10, 20], "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "SDTh1", "width": 120, "fill": "$text-tertiary", "content": "Mã đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "SDTh2", "width": 140, "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "SDTh3", "width": "fill_container", "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "SDTh4", "width": 140, "fill": "$text-tertiary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "SDTh5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - - {"type": "frame", "id": "SDTr1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "SDTr1C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1024", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDTr1C2", "width": 140, "fill": "$text-secondary", "content": "14:32, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr1C3", "width": "fill_container", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr1C4", "width": 140, "fill": "$text-primary", "content": "185,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SDTr1Badge", "width": 120, "children": [ - {"type": "frame", "id": "SDTr1BadgeF", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SDTr1BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDTr2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "SDTr2C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1023", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDTr2C2", "width": 140, "fill": "$text-secondary", "content": "14:15, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr2C3", "width": "fill_container", "fill": "$text-primary", "content": "Trần Thị Mai", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr2C4", "width": 140, "fill": "$text-primary", "content": "92,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SDTr2Badge", "width": 120, "children": [ - {"type": "frame", "id": "SDTr2BadgeF", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SDTr2BadgeT", "fill": "#F59E0B", "content": "Đang pha", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDTr3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "SDTr3C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1022", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDTr3C2", "width": 140, "fill": "$text-secondary", "content": "13:48, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr3C3", "width": "fill_container", "fill": "$text-primary", "content": "Lê Hoàng Dũng", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr3C4", "width": 140, "fill": "$text-primary", "content": "256,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SDTr3Badge", "width": 120, "children": [ - {"type": "frame", "id": "SDTr3BadgeF", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SDTr3BadgeT", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SDTr4", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ - {"type": "text", "id": "SDTr4C1", "width": 120, "fill": "$orange-primary", "content": "#DH-1021", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SDTr4C2", "width": 140, "fill": "$text-secondary", "content": "13:22, 10/02/2026", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr4C3", "width": "fill_container", "fill": "$text-primary", "content": "Phạm Quốc Bảo", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SDTr4C4", "width": 140, "fill": "$text-primary", "content": "124,000 ₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SDTr4Badge", "width": 120, "children": [ - {"type": "frame", "id": "SDTr4BadgeF", "fill": "#EF444420", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SDTr4BadgeT", "fill": "#EF4444", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SDHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SDHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SDBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDBread1", + "fill": "$text-tertiary", + "content": "Cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SDBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SDBread2", + "fill": "$orange-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDHeaderTitleRow", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDHeaderTitle", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SDStatusBadge", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 12 + ], + "alignItems": "center", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SDStatusDot", + "width": 6, + "height": 6, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SDStatusText", + "fill": "#22C55E", + "content": "Active", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SDEditBtn", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDEditBtnI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "SDEditBtnT", + "fill": "$text-primary", + "content": "Chỉnh sửa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDPauseBtn", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDPauseBtnI", + "width": 16, + "height": 16, + "iconFontName": "pause-circle", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "text", + "id": "SDPauseBtnT", + "fill": "$text-primary", + "content": "Tạm ngưng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDTabsRow", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 0, + 32 + ], + "gap": 0, + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "frame", + "id": "SDTabActive", + "padding": [ + 12, + 16 + ], + "stroke": { + "thickness": 2, + "fill": "$orange-primary", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "SDTabActiveT", + "fill": "$orange-primary", + "content": "Tổng quan", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTab2", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "SDTab2T", + "fill": "$text-secondary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDTab3", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "SDTab3T", + "fill": "$text-secondary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDTab4", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "SDTab4T", + "fill": "$text-secondary", + "content": "Kho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDTab5", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "SDTab5T", + "fill": "$text-secondary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDTab6", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "SDTab6T", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "frame", + "id": "SDKPIRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "SDKPI1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SDKPI1Top", + "justifyContent": "space_between", + "alignItems": "center", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDKPI1Label", + "fill": "$text-secondary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SDKPI1Icon", + "width": 36, + "height": 36, + "fill": "#FF5C0015", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDKPI1I", + "width": 18, + "height": 18, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + } + ] + }, + { + "type": "text", + "id": "SDKPI1Value", + "fill": "$text-primary", + "content": "45.2M ₫", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDKPI1Sub", + "fill": "#22C55E", + "content": "+12.5% so với tháng trước", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SDKPI2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SDKPI2Top", + "justifyContent": "space_between", + "alignItems": "center", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDKPI2Label", + "fill": "$text-secondary", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SDKPI2Icon", + "width": 36, + "height": 36, + "fill": "#3B82F615", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDKPI2I", + "width": 18, + "height": 18, + "iconFontName": "shopping-bag", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + } + ] + }, + { + "type": "text", + "id": "SDKPI2Value", + "fill": "$text-primary", + "content": "328", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDKPI2Sub", + "fill": "#22C55E", + "content": "+8.2% so với tháng trước", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SDKPI3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SDKPI3Top", + "justifyContent": "space_between", + "alignItems": "center", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDKPI3Label", + "fill": "$text-secondary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SDKPI3Icon", + "width": 36, + "height": 36, + "fill": "#22C55E15", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDKPI3I", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + } + ] + }, + { + "type": "text", + "id": "SDKPI3Value", + "fill": "$text-primary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDKPI3Sub", + "fill": "$text-tertiary", + "content": "6 đang làm việc", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SDKPI4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SDKPI4Top", + "justifyContent": "space_between", + "alignItems": "center", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "SDKPI4Label", + "fill": "$text-secondary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SDKPI4Icon", + "width": 36, + "height": 36, + "fill": "#F59E0B15", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SDKPI4I", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + } + ] + }, + { + "type": "text", + "id": "SDKPI4Value", + "fill": "$text-primary", + "content": "48", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDKPI4Sub", + "fill": "$text-tertiary", + "content": "3 hết hàng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDTableCard", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SDTableHeader", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDTableTitle", + "fill": "$text-primary", + "content": "Đơn hàng gần đây", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SDTableLink", + "fill": "$orange-primary", + "content": "Xem tất cả →", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SDTableHead", + "width": "fill_container", + "padding": [ + 10, + 20 + ], + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "children": [ + { + "type": "text", + "id": "SDTh1", + "width": 120, + "fill": "$text-tertiary", + "content": "Mã đơn", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTh2", + "width": 140, + "fill": "$text-tertiary", + "content": "Thời gian", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTh3", + "width": "fill_container", + "fill": "$text-tertiary", + "content": "Khách hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTh4", + "width": 140, + "fill": "$text-tertiary", + "content": "Tổng tiền", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTh5", + "width": 120, + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SDTr1", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDTr1C1", + "width": 120, + "fill": "$orange-primary", + "content": "#DH-1024", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTr1C2", + "width": 140, + "fill": "$text-secondary", + "content": "14:32, 10/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr1C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Nguyễn Văn An", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr1C4", + "width": 140, + "fill": "$text-primary", + "content": "185,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SDTr1Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDTr1BadgeF", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDTr1BadgeT", + "fill": "#22C55E", + "content": "Hoàn thành", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDTr2", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDTr2C1", + "width": 120, + "fill": "$orange-primary", + "content": "#DH-1023", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTr2C2", + "width": 140, + "fill": "$text-secondary", + "content": "14:15, 10/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr2C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Trần Thị Mai", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr2C4", + "width": 140, + "fill": "$text-primary", + "content": "92,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SDTr2Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDTr2BadgeF", + "fill": "#F59E0B20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDTr2BadgeT", + "fill": "#F59E0B", + "content": "Đang pha", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDTr3", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDTr3C1", + "width": 120, + "fill": "$orange-primary", + "content": "#DH-1022", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTr3C2", + "width": 140, + "fill": "$text-secondary", + "content": "13:48, 10/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr3C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Lê Hoàng Dũng", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr3C4", + "width": 140, + "fill": "$text-primary", + "content": "256,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SDTr3Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDTr3BadgeF", + "fill": "#22C55E20", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDTr3BadgeT", + "fill": "#22C55E", + "content": "Hoàn thành", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SDTr4", + "width": "fill_container", + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDTr4C1", + "width": 120, + "fill": "$orange-primary", + "content": "#DH-1021", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SDTr4C2", + "width": 140, + "fill": "$text-secondary", + "content": "13:22, 10/02/2026", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr4C3", + "width": "fill_container", + "fill": "$text-primary", + "content": "Phạm Quốc Bảo", + "fontFamily": "Roboto", + "fontSize": 13 + }, + { + "type": "text", + "id": "SDTr4C4", + "width": 140, + "fill": "$text-primary", + "content": "124,000 ₫", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SDTr4Badge", + "width": 120, + "children": [ + { + "type": "frame", + "id": "SDTr4BadgeF", + "fill": "#EF444420", + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "SDTr4BadgeT", + "fill": "#EF4444", + "content": "Đã hủy", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/store-list.pen b/pencil-design/src/pages/tPOS/admin/store-list.pen index 038d7d25..b2939a92 100644 --- a/pencil-design/src/pages/tPOS/admin/store-list.pen +++ b/pencil-design/src/pages/tPOS/admin/store-list.pen @@ -12,325 +12,2175 @@ "clip": true, "children": [ { - "type": "frame", "id": "SLSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SLSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SLSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLLogoIcon", "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": "SLLogoText", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SLLogoTextG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SLLogoName", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SLLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SLSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SLNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SLNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SLNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SLNavStores", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SLNavStoresT", "fill": "#FFFFFF", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SLNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SLNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SLNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SLNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SLNavInv", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SLNavInvT", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SLNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SLNavCust", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavCustI", "width": 20, "height": 20, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLNavCustT", "fill": "$text-secondary", "content": "Khách hàng & Loyalty", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SLNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SLNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SLNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SLNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SLSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SLUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SLUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SLUserName", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SLUserRole", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SLSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLLogoIcon", + "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": "SLLogoText", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SLLogoTextG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SLLogoName", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLLogoSub", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SLNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SLNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SLNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SLNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SLNavStoresT", + "fill": "#FFFFFF", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SLNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SLNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SLNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SLNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SLNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SLNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SLNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SLNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SLNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SLUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SLUserName", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SLUserRole", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SLMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SLMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SLHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SLHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SLHeaderTitle", "fill": "$text-primary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "SLHeaderSub", "fill": "$text-tertiary", "content": "Tạo và quản lý tất cả cửa hàng trong hệ thống", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SLHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLFilterBtn", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLFilterI", "width": 18, "height": 18, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SLFilterT", "fill": "$text-secondary", "content": "Bộ lọc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SLSearch", "width": 260, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SLSearchP", "fill": "$text-tertiary", "content": "Tìm cửa hàng...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SLNewStore", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLNewStoreI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SLNewStoreT", "fill": "#FFFFFF", "content": "Tạo cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLTabs", "width": "fill_container", "padding": [0, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 0, "children": [ - {"type": "frame", "id": "SLTabAll", "padding": [12, 20], "stroke": {"thickness": 2, "fill": "$orange-primary", "sides": ["bottom"]}, "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SLTabAllT", "fill": "$orange-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SLTabAllBadge", "fill": "$orange-primary", "cornerRadius": 6, "padding": [2, 8], "children": [ - {"type": "text", "id": "SLTabAllBadgeT", "fill": "#FFFFFF", "content": "5", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SLTabActive", "padding": [12, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SLTabActiveT", "fill": "$text-tertiary", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SLTabActiveBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [2, 8], "children": [ - {"type": "text", "id": "SLTabActiveBadgeT", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SLTabSetup", "padding": [12, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SLTabSetupT", "fill": "$text-tertiary", "content": "Thiết lập", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SLTabSetupBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [2, 8], "children": [ - {"type": "text", "id": "SLTabSetupBadgeT", "fill": "$text-tertiary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SLTabPaused", "padding": [12, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SLTabPausedT", "fill": "$text-tertiary", "content": "Tạm dừng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SLTabPausedBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [2, 8], "children": [ - {"type": "text", "id": "SLTabPausedBadgeT", "fill": "$text-tertiary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 16, "clip": true, "children": [ - {"type": "frame", "id": "SLCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC1Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC1Av", "width": 52, "height": 52, "fill": "#FF5C0020", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC1AvI", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "frame", "id": "SLC1Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SLC1NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC1Name", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SLC1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC1Dot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SLC1StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "SLC1Addr", "fill": "$text-tertiary", "content": "Café • 123 Nguyễn Huệ, Q1, TP.HCM", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SLC1Stats", "gap": 32, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC1S1", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC1S1V", "fill": "$text-primary", "content": "45.2M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC1S1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC1S2", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC1S2V", "fill": "$text-primary", "content": "342", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC1S2L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC1S3", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC1S3V", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC1S3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC1S4", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC1S4V", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC1S4L", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC1Actions", "gap": 8, "children": [ - {"type": "frame", "id": "SLC1Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC1EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SLC1More", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC1MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC2Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC2Av", "width": 52, "height": 52, "fill": "#3B82F620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC2AvI", "width": 24, "height": 24, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "SLC2Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SLC2NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC2Name", "fill": "$text-primary", "content": "Nhà hàng Phố Q3", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SLC2Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC2Dot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SLC2StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "SLC2Addr", "fill": "$text-tertiary", "content": "Restaurant • 456 Lê Văn Sỹ, Q3, TP.HCM", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SLC2Stats", "gap": 32, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC2S1", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC2S1V", "fill": "$text-primary", "content": "62.8M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC2S1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC2S2", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC2S2V", "fill": "$text-primary", "content": "185", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC2S2L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC2S3", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC2S3V", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC2S3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC2S4", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC2S4V", "fill": "$text-primary", "content": "72", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC2S4L", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC2Actions", "gap": 8, "children": [ - {"type": "frame", "id": "SLC2Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC2EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SLC2More", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC2MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC3Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC3Av", "width": 52, "height": 52, "fill": "#EC489920", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC3AvI", "width": 24, "height": 24, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "SLC3Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SLC3NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC3Name", "fill": "$text-primary", "content": "Spa Serene Thảo Điền", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SLC3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC3Dot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SLC3StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "SLC3Addr", "fill": "$text-tertiary", "content": "Spa • 101 Xuân Thuỷ, Q2, TP.HCM", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SLC3Stats", "gap": 32, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC3S1", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC3S1V", "fill": "$text-primary", "content": "38.5M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC3S1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC3S2", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC3S2V", "fill": "$text-primary", "content": "96", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC3S2L", "fill": "$text-tertiary", "content": "Lịch hẹn", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC3S3", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC3S3V", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC3S3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC3S4", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC3S4V", "fill": "$text-primary", "content": "24", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "SLC3S4L", "fill": "$text-tertiary", "content": "Dịch vụ", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SLC3Actions", "gap": 8, "children": [ - {"type": "frame", "id": "SLC3Edit", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC3EditI", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SLC3More", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC3MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLCard4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC4Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC4Av", "width": 52, "height": 52, "fill": "#8B5CF620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC4AvI", "width": 24, "height": 24, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "SLC4Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SLC4NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC4Name", "fill": "$text-primary", "content": "Karaoke Star Q7", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SLC4Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [3, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC4Dot", "width": 6, "height": 6, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "SLC4StatusT", "fill": "#F59E0B", "content": "Thiết lập", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SLC4Progress", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC4Addr", "fill": "$text-tertiary", "content": "Karaoke • 789 Nguyễn Thị Thập, Q7", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SLC4ProgT", "fill": "#F59E0B", "content": "• 2/5 bước hoàn thành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "SLC4Right", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC4ProgBar", "width": 120, "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ - {"type": "frame", "id": "SLC4ProgFill", "width": 48, "height": 6, "fill": "#F59E0B", "cornerRadius": 100} - ]}, - {"type": "frame", "id": "SLC4CTA", "fill": "#F59E0B", "cornerRadius": 10, "padding": [10, 16], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC4CTAI", "width": 16, "height": 16, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SLC4CTAT", "fill": "#FFFFFF", "content": "Tiếp tục", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SLCard5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "opacity": 0.5, "children": [ - {"type": "frame", "id": "SLC5Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC5Av", "width": 52, "height": 52, "fill": "#EF444420", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC5AvI", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "SLC5Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SLC5NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "SLC5Name", "fill": "$text-primary", "content": "Coffee House Q5 (cũ)", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SLC5Status", "fill": "#EF444420", "cornerRadius": 6, "padding": [3, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "SLC5Dot", "width": 6, "height": 6, "fill": "#EF4444", "cornerRadius": 100}, - {"type": "text", "id": "SLC5StatusT", "fill": "#EF4444", "content": "Tạm dừng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "SLC5Addr", "fill": "$text-tertiary", "content": "Café • 321 Trần Hưng Đạo, Q5 • Tạm dừng từ 01/01/2026", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SLC5Right", "gap": 8, "children": [ - {"type": "frame", "id": "SLC5Reopen", "fill": "#22C55E20", "stroke": {"thickness": 1, "fill": "#22C55E40"}, "cornerRadius": 10, "padding": [10, 16], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC5ReopenI", "width": 16, "height": 16, "iconFontName": "rotate-ccw", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "SLC5ReopenT", "fill": "#22C55E", "content": "Mở lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SLC5More", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SLC5MoreI", "width": 16, "height": 16, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SLHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SLHeaderTitle", + "fill": "$text-primary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLHeaderSub", + "fill": "$text-tertiary", + "content": "Tạo và quản lý tất cả cửa hàng trong hệ thống", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "SLHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLFilterBtn", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLFilterI", + "width": 18, + "height": 18, + "iconFontName": "filter", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SLFilterT", + "fill": "$text-secondary", + "content": "Bộ lọc", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SLSearch", + "width": 260, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SLSearchP", + "fill": "$text-tertiary", + "content": "Tìm cửa hàng...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "SLNewStore", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLNewStoreI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SLNewStoreT", + "fill": "#FFFFFF", + "content": "Tạo cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLTabs", + "width": "fill_container", + "padding": [ + 0, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SLTabAll", + "padding": [ + 12, + 20 + ], + "stroke": { + "thickness": 2, + "fill": "$orange-primary", + "sides": [ + "bottom" + ] + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLTabAllT", + "fill": "$orange-primary", + "content": "Tất cả", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLTabAllBadge", + "fill": "$orange-primary", + "cornerRadius": 6, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "SLTabAllBadgeT", + "fill": "#FFFFFF", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLTabActive", + "padding": [ + 12, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLTabActiveT", + "fill": "$text-tertiary", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SLTabActiveBadge", + "fill": "$bg-interactive", + "cornerRadius": 6, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "SLTabActiveBadgeT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLTabSetup", + "padding": [ + 12, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLTabSetupT", + "fill": "$text-tertiary", + "content": "Thiết lập", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SLTabSetupBadge", + "fill": "$bg-interactive", + "cornerRadius": 6, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "SLTabSetupBadgeT", + "fill": "$text-tertiary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLTabPaused", + "padding": [ + 12, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLTabPausedT", + "fill": "$text-tertiary", + "content": "Tạm dừng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SLTabPausedBadge", + "fill": "$bg-interactive", + "cornerRadius": 6, + "padding": [ + 2, + 8 + ], + "children": [ + { + "type": "text", + "id": "SLTabPausedBadgeT", + "fill": "$text-tertiary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 16, + "clip": true, + "children": [ + { + "type": "frame", + "id": "SLCard1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 20, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC1Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC1Av", + "width": 52, + "height": 52, + "fill": "#FF5C0020", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC1AvI", + "width": 24, + "height": 24, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "SLC1Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SLC1NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC1Name", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLC1Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC1Dot", + "width": 6, + "height": 6, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SLC1StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "SLC1Addr", + "fill": "$text-tertiary", + "content": "Café • 123 Nguyễn Huệ, Q1, TP.HCM", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC1Stats", + "gap": 32, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC1S1", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC1S1V", + "fill": "$text-primary", + "content": "45.2M", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC1S1L", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC1S2", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC1S2V", + "fill": "$text-primary", + "content": "342", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC1S2L", + "fill": "$text-tertiary", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC1S3", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC1S3V", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC1S3L", + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC1S4", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC1S4V", + "fill": "$text-primary", + "content": "48", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC1S4L", + "fill": "$text-tertiary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC1Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "SLC1Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC1EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "SLC1More", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC1MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLCard2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 20, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC2Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC2Av", + "width": 52, + "height": 52, + "fill": "#3B82F620", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC2AvI", + "width": 24, + "height": 24, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "SLC2Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SLC2NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC2Name", + "fill": "$text-primary", + "content": "Nhà hàng Phố Q3", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLC2Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC2Dot", + "width": 6, + "height": 6, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SLC2StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "SLC2Addr", + "fill": "$text-tertiary", + "content": "Restaurant • 456 Lê Văn Sỹ, Q3, TP.HCM", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC2Stats", + "gap": 32, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC2S1", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC2S1V", + "fill": "$text-primary", + "content": "62.8M", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC2S1L", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC2S2", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC2S2V", + "fill": "$text-primary", + "content": "185", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC2S2L", + "fill": "$text-tertiary", + "content": "Đơn hàng", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC2S3", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC2S3V", + "fill": "$text-primary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC2S3L", + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC2S4", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC2S4V", + "fill": "$text-primary", + "content": "72", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC2S4L", + "fill": "$text-tertiary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC2Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "SLC2Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC2EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "SLC2More", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC2MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLCard3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 20, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC3Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC3Av", + "width": 52, + "height": 52, + "fill": "#EC489920", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC3AvI", + "width": 24, + "height": 24, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#EC4899" + } + ] + }, + { + "type": "frame", + "id": "SLC3Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SLC3NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC3Name", + "fill": "$text-primary", + "content": "Spa Serene Thảo Điền", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLC3Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC3Dot", + "width": 6, + "height": 6, + "fill": "#22C55E", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SLC3StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "SLC3Addr", + "fill": "$text-tertiary", + "content": "Spa • 101 Xuân Thuỷ, Q2, TP.HCM", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC3Stats", + "gap": 32, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC3S1", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC3S1V", + "fill": "$text-primary", + "content": "38.5M", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC3S1L", + "fill": "$text-tertiary", + "content": "Doanh thu", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC3S2", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC3S2V", + "fill": "$text-primary", + "content": "96", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC3S2L", + "fill": "$text-tertiary", + "content": "Lịch hẹn", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC3S3", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC3S3V", + "fill": "$text-primary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC3S3L", + "fill": "$text-tertiary", + "content": "Nhân viên", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC3S4", + "layout": "vertical", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC3S4V", + "fill": "$text-primary", + "content": "24", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SLC3S4L", + "fill": "$text-tertiary", + "content": "Dịch vụ", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "SLC3Actions", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "SLC3Edit", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC3EditI", + "width": 16, + "height": 16, + "iconFontName": "pencil", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + }, + { + "type": "frame", + "id": "SLC3More", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC3MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLCard4", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 20, + "stroke": { + "thickness": 1, + "fill": "#F59E0B40" + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC4Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC4Av", + "width": 52, + "height": 52, + "fill": "#8B5CF620", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC4AvI", + "width": 24, + "height": 24, + "iconFontName": "mic", + "iconFontFamily": "lucide", + "fill": "#8B5CF6" + } + ] + }, + { + "type": "frame", + "id": "SLC4Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SLC4NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC4Name", + "fill": "$text-primary", + "content": "Karaoke Star Q7", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLC4Status", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC4Dot", + "width": 6, + "height": 6, + "fill": "#F59E0B", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SLC4StatusT", + "fill": "#F59E0B", + "content": "Thiết lập", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC4Progress", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC4Addr", + "fill": "$text-tertiary", + "content": "Karaoke • 789 Nguyễn Thị Thập, Q7", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SLC4ProgT", + "fill": "#F59E0B", + "content": "• 2/5 bước hoàn thành", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC4Right", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC4ProgBar", + "width": 120, + "height": 6, + "fill": "$bg-interactive", + "cornerRadius": 100, + "children": [ + { + "type": "frame", + "id": "SLC4ProgFill", + "width": 48, + "height": 6, + "fill": "#F59E0B", + "cornerRadius": 100 + } + ] + }, + { + "type": "frame", + "id": "SLC4CTA", + "fill": "#F59E0B", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC4CTAI", + "width": 16, + "height": 16, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SLC4CTAT", + "fill": "#FFFFFF", + "content": "Tiếp tục", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLCard5", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "padding": 20, + "justifyContent": "space_between", + "alignItems": "center", + "opacity": 0.5, + "children": [ + { + "type": "frame", + "id": "SLC5Left", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC5Av", + "width": 52, + "height": 52, + "fill": "#EF444420", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC5AvI", + "width": 24, + "height": 24, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "SLC5Info", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SLC5NameRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SLC5Name", + "fill": "$text-primary", + "content": "Coffee House Q5 (cũ)", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "SLC5Status", + "fill": "#EF444420", + "cornerRadius": 6, + "padding": [ + 3, + 10 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SLC5Dot", + "width": 6, + "height": 6, + "fill": "#EF4444", + "cornerRadius": 100 + }, + { + "type": "text", + "id": "SLC5StatusT", + "fill": "#EF4444", + "content": "Tạm dừng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "SLC5Addr", + "fill": "$text-tertiary", + "content": "Café • 321 Trần Hưng Đạo, Q5 • Tạm dừng từ 01/01/2026", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SLC5Right", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "SLC5Reopen", + "fill": "#22C55E20", + "stroke": { + "thickness": 1, + "fill": "#22C55E40" + }, + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC5ReopenI", + "width": 16, + "height": 16, + "iconFontName": "rotate-ccw", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "SLC5ReopenT", + "fill": "#22C55E", + "content": "Mở lại", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SLC5More", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SLC5MoreI", + "width": 16, + "height": 16, + "iconFontName": "more-horizontal", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "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/store-settings.pen b/pencil-design/src/pages/tPOS/admin/store-settings.pen index a5e090c7..047c87f4 100644 --- a/pencil-design/src/pages/tPOS/admin/store-settings.pen +++ b/pencil-design/src/pages/tPOS/admin/store-settings.pen @@ -12,210 +12,1597 @@ "clip": true, "children": [ { - "type": "frame", "id": "SSSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SSSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SSSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SSLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SSLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SSLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SSSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SSNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SSNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SSNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SSNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SSNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SSNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SSNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SSNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSNavRolesI", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SSNavRolesT", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSNavSet", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SSNavSetT", "fill": "#FFFFFF", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SSSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SSUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SSUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SSUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SSUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SSUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SSSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SSLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SSLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SSLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SSNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SSNavStoresT", + "fill": "#FFFFFF", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SSNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SSNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SSNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SSNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SSUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SSUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SSUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SSMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SSMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SSHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SSHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SSBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SSBread1", "fill": "$text-tertiary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SSBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SSBread2", "fill": "$orange-primary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SSHeaderTitle", "fill": "$text-primary", "content": "Cài đặt cửa hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SSHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "SSStoreSel", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSStoreSelI", "width": 16, "height": 16, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "SSStoreSelT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "SSStoreSelChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "SSSaveBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSSaveI", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SSSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SSBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "SSTabs", "width": 220, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "padding": 12, "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SSTab1", "width": "fill_container", "height": 42, "fill": "#FF5C0015", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab1I", "width": 18, "height": 18, "iconFontName": "building", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "SSTab1T", "fill": "$orange-primary", "content": "Thông tin chung", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SSTab2", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab2I", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SSTab2T", "fill": "$text-secondary", "content": "Giờ hoạt động", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSTab3", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab3I", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SSTab3T", "fill": "$text-secondary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSTab4", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab4I", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SSTab4T", "fill": "$text-secondary", "content": "Máy in & Thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSTab5", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab5I", "width": 18, "height": 18, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SSTab5T", "fill": "$text-secondary", "content": "Thuế & Hóa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SSTab6", "width": "fill_container", "height": 42, "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SSTab6I", "width": 18, "height": 18, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SSTab6T", "fill": "$text-secondary", "content": "Thông báo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - - {"type": "frame", "id": "SSForm", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 28, "clip": true, "children": [ - {"type": "text", "id": "SSFormTitle", "fill": "$text-primary", "content": "Thông tin cửa hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - - {"type": "frame", "id": "SSRow1", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SSField1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField1L", "fill": "$text-secondary", "content": "Tên cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField1Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SSField1V", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SSField2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField2L", "fill": "$text-secondary", "content": "Loại hình kinh doanh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField2Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "SSField2V", "fill": "$text-primary", "content": "Quán cà phê", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "SSField2Chev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - - {"type": "frame", "id": "SSRow2", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SSField3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField3L", "fill": "$text-secondary", "content": "Địa chỉ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField3Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SSField3V", "fill": "$text-primary", "content": "123 Nguyễn Huệ, P. Bến Nghé, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "SSRow3", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SSField4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField4L", "fill": "$text-secondary", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField4Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SSField4V", "fill": "$text-primary", "content": "028 1234 5678", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "SSField5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField5L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField5Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SSField5V", "fill": "$text-primary", "content": "coffeehouse.q1@goodgo.vn", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "SSDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - - {"type": "text", "id": "SSFormTitle2", "fill": "$text-primary", "content": "Cấu hình POS", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - - {"type": "frame", "id": "SSRow4", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "SSField6", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField6L", "fill": "$text-secondary", "content": "Đơn vị tiền tệ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField6Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "SSField6V", "fill": "$text-primary", "content": "VND (₫)", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "SSField6Chev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "SSField7", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SSField7L", "fill": "$text-secondary", "content": "Thuế mặc định (%)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "SSField7Input", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "SSField7V", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - - {"type": "frame", "id": "SSToggles", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "SSToggle1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SSToggle1L", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SSToggle1T", "fill": "$text-primary", "content": "In hóa đơn tự động", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "SSToggle1S", "fill": "$text-tertiary", "content": "Tự động in hóa đơn sau khi thanh toán", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SSToggle1Sw", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SSToggle1Dot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "SSToggle2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SSToggle2L", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SSToggle2T", "fill": "$text-primary", "content": "Yêu cầu xác nhận trước khi xóa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "SSToggle2S", "fill": "$text-tertiary", "content": "Hiển thị hộp thoại xác nhận khi xóa đơn hàng", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SSToggle2Sw", "width": 44, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "SSToggle2Dot", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "SSToggle3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SSToggle3L", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SSToggle3T", "fill": "$text-primary", "content": "Chế độ bàn phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "SSToggle3S", "fill": "$text-tertiary", "content": "Bật chế độ quản lý bàn cho nhà hàng", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SSToggle3Sw", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": [2, 2], "children": [ - {"type": "frame", "id": "SSToggle3Dot", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SSHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SSBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSBread1", + "fill": "$text-tertiary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SSBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SSBread2", + "fill": "$orange-primary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "SSHeaderTitle", + "fill": "$text-primary", + "content": "Cài đặt cửa hàng", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SSHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SSStoreSel", + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSStoreSelI", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "SSStoreSelT", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "SSStoreSelChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "SSSaveBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 20 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSSaveI", + "width": 18, + "height": 18, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SSSaveT", + "fill": "#FFFFFF", + "content": "Lưu thay đổi", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSBody", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SSTabs", + "width": 220, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "padding": 12, + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SSTab1", + "width": "fill_container", + "height": 42, + "fill": "#FF5C0015", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab1I", + "width": 18, + "height": 18, + "iconFontName": "building", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "SSTab1T", + "fill": "$orange-primary", + "content": "Thông tin chung", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SSTab2", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab2I", + "width": 18, + "height": 18, + "iconFontName": "clock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSTab2T", + "fill": "$text-secondary", + "content": "Giờ hoạt động", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSTab3", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab3I", + "width": 18, + "height": 18, + "iconFontName": "credit-card", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSTab3T", + "fill": "$text-secondary", + "content": "Thanh toán", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSTab4", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab4I", + "width": 18, + "height": 18, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSTab4T", + "fill": "$text-secondary", + "content": "Máy in & Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSTab5", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab5I", + "width": 18, + "height": 18, + "iconFontName": "receipt", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSTab5T", + "fill": "$text-secondary", + "content": "Thuế & Hóa đơn", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SSTab6", + "width": "fill_container", + "height": 42, + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SSTab6I", + "width": 18, + "height": 18, + "iconFontName": "bell", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SSTab6T", + "fill": "$text-secondary", + "content": "Thông báo", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSForm", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 28, + "clip": true, + "children": [ + { + "type": "text", + "id": "SSFormTitle", + "fill": "$text-primary", + "content": "Thông tin cửa hàng", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SSRow1", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SSField1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField1L", + "fill": "$text-secondary", + "content": "Tên cửa hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField1Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSField1V", + "fill": "$text-primary", + "content": "Coffee House Q1", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSField2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField2L", + "fill": "$text-secondary", + "content": "Loại hình kinh doanh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField2Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "SSField2V", + "fill": "$text-primary", + "content": "Quán cà phê", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "id": "SSField2Chev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSRow2", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SSField3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField3L", + "fill": "$text-secondary", + "content": "Địa chỉ", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField3Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSField3V", + "fill": "$text-primary", + "content": "123 Nguyễn Huệ, P. Bến Nghé, Q.1, TP.HCM", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSRow3", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SSField4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField4L", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField4Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSField4V", + "fill": "$text-primary", + "content": "028 1234 5678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSField5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField5L", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField5Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSField5V", + "fill": "$text-primary", + "content": "coffeehouse.q1@goodgo.vn", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSDivider", + "width": "fill_container", + "height": 1, + "fill": "$border-subtle" + }, + { + "type": "text", + "id": "SSFormTitle2", + "fill": "$text-primary", + "content": "Cấu hình POS", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "SSRow4", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "SSField6", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField6L", + "fill": "$text-secondary", + "content": "Đơn vị tiền tệ", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField6Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "SSField6V", + "fill": "$text-primary", + "content": "VND (₫)", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "id": "SSField6Chev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSField7", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SSField7L", + "fill": "$text-secondary", + "content": "Thuế mặc định (%)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SSField7Input", + "width": "fill_container", + "height": 44, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SSField7V", + "fill": "$text-primary", + "content": "10", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSToggles", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "SSToggle1", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSToggle1L", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SSToggle1T", + "fill": "$text-primary", + "content": "In hóa đơn tự động", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "SSToggle1S", + "fill": "$text-tertiary", + "content": "Tự động in hóa đơn sau khi thanh toán", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SSToggle1Sw", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SSToggle1Dot", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSToggle2", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSToggle2L", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SSToggle2T", + "fill": "$text-primary", + "content": "Yêu cầu xác nhận trước khi xóa", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "SSToggle2S", + "fill": "$text-tertiary", + "content": "Hiển thị hộp thoại xác nhận khi xóa đơn hàng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SSToggle2Sw", + "width": 44, + "height": 24, + "fill": "$orange-primary", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SSToggle2Dot", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 100 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSToggle3", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SSToggle3L", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SSToggle3T", + "fill": "$text-primary", + "content": "Chế độ bàn phục vụ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "SSToggle3S", + "fill": "$text-tertiary", + "content": "Bật chế độ quản lý bàn cho nhà hàng", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SSToggle3Sw", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 100, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "frame", + "id": "SSToggle3Dot", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 100 + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/supplier-management.pen b/pencil-design/src/pages/tPOS/admin/supplier-management.pen index 0218dca4..c6e84a60 100644 --- a/pencil-design/src/pages/tPOS/admin/supplier-management.pen +++ b/pencil-design/src/pages/tPOS/admin/supplier-management.pen @@ -12,351 +12,2488 @@ "clip": true, "children": [ { - "type": "frame", "id": "SMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "SMSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "SMSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "SMLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "SMLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SMNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "SMNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SMNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SMNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SMNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SMNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SMNavProd", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavProdI", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMNavProdT", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SMNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavStaffI", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMNavStaffT", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SMNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavInvI", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SMNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SMNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SMNavRpt", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavRptI", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SMNavRptT", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SMNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "SMNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SMNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SMSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "SMUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "SMSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "SMLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SMLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SMNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SMNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SMNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SMNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SMNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SMNavInvT", + "fill": "#FFFFFF", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "SMNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SMNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SMNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavFinT", + "fill": "$text-secondary", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "SMNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "SMNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SMNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "SMNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "SMMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "SMMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "SMHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "SMBreadcrumb", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SMBread1", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SMBreadSep", "fill": "$text-tertiary", "content": "/", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SMBread2", "fill": "$orange-primary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SMHeaderTitle", "fill": "$text-primary", "content": "Nhà cung cấp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMSearchBox", "width": 220, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMSearchI", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMSearchP", "fill": "$text-tertiary", "content": "Tìm nhà cung cấp...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SMAddBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMAddI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SMAddT", "fill": "#FFFFFF", "content": "Thêm NCC", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "clip": true, "children": [ - {"type": "frame", "id": "SMStats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "SMStat1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SMStat1L", "fill": "$text-tertiary", "content": "Tổng NCC", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SMStat1V", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMStat2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SMStat2L", "fill": "$text-tertiary", "content": "Đang hoạt động", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SMStat2V", "fill": "#22C55E", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMStat3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 20], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "SMStat3L", "fill": "$text-tertiary", "content": "PO tháng này", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "SMStat3V", "fill": "$orange-primary", "content": "12", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "SMGrid", "width": "fill_container", "height": "fill_container", "gap": 16, "wrap": true, "children": [ - {"type": "frame", "id": "SMCard1", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC1AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC1Av", "width": 42, "height": 42, "fill": "#7C3AED", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC1AvT", "fill": "#FFFFFF", "content": "LV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC1NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC1Name", "fill": "$text-primary", "content": "Lavazza Vietnam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC1Cat", "fill": "$text-tertiary", "content": "Cà phê & Nguyên liệu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC1StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC1Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC1Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC1PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC1PhoneT", "fill": "$text-secondary", "content": "028 3823 4567", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC1Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC1EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC1EmailT", "fill": "$text-secondary", "content": "order@lavazza.vn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC1Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC1POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC1POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC1POsV", "fill": "$text-primary", "content": "24", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC1Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC1S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC1S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC1S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC1S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC1S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMCard2", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC2AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC2Av", "width": 42, "height": 42, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC2AvT", "fill": "#FFFFFF", "content": "ML", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC2NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC2Name", "fill": "$text-primary", "content": "Milo Vietnam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC2Cat", "fill": "$text-tertiary", "content": "Đồ uống & Bột", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC2Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC2StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC2Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC2Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC2PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC2PhoneT", "fill": "$text-secondary", "content": "028 3912 8888", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC2Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC2EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC2EmailT", "fill": "$text-secondary", "content": "sales@milovn.com", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC2Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC2POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC2POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC2POsV", "fill": "$text-primary", "content": "18", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC2Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC2S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC2S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC2S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC2S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC2S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMCard3", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC3AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC3Av", "width": 42, "height": 42, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC3AvT", "fill": "#FFFFFF", "content": "VM", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC3NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC3Name", "fill": "$text-primary", "content": "Vinamilk", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC3Cat", "fill": "$text-tertiary", "content": "Sữa & Sản phẩm từ sữa", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC3StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC3Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC3Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC3PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC3PhoneT", "fill": "$text-secondary", "content": "028 3845 1234", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC3Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC3EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC3EmailT", "fill": "$text-secondary", "content": "b2b@vinamilk.com.vn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC3Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC3POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC3POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC3POsV", "fill": "$text-primary", "content": "31", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC3Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC3S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC3S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC3S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC3S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "SMC3S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMCard4", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC4AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC4Av", "width": 42, "height": 42, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC4AvT", "fill": "#FFFFFF", "content": "FG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC4NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC4Name", "fill": "$text-primary", "content": "Fresh Garden", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC4Cat", "fill": "$text-tertiary", "content": "Rau củ & Trái cây tươi", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC4Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC4StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC4Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC4Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC4PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC4PhoneT", "fill": "$text-secondary", "content": "028 3756 9012", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC4Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC4EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC4EmailT", "fill": "$text-secondary", "content": "info@freshgarden.vn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC4Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC4POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC4POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC4POsV", "fill": "$text-primary", "content": "15", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC4Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC4S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC4S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC4S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC4S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC4S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMCard5", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC5Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC5AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC5Av", "width": 42, "height": 42, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC5AvT", "fill": "#FFFFFF", "content": "AB", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC5NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC5Name", "fill": "$text-primary", "content": "ABC Foods", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC5Cat", "fill": "$text-tertiary", "content": "Gia vị & Nước chấm", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC5Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC5StatusT", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC5Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC5Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC5PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC5PhoneT", "fill": "$text-secondary", "content": "028 3678 5555", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC5Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC5EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC5EmailT", "fill": "$text-secondary", "content": "sales@abcfoods.vn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC5Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC5POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC5POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC5POsV", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC5Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC5S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC5S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC5S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC5S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "SMC5S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "SMCard6", "width": 340, "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "SMC6Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC6AvatarWrap", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC6Av", "width": 42, "height": 42, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SMC6AvT", "fill": "#FFFFFF", "content": "BH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC6NameWrap", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC6Name", "fill": "$text-primary", "content": "Đường Biên Hòa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "SMC6Cat", "fill": "$text-tertiary", "content": "Đường & Phụ gia", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SMC6Status", "fill": "#8B8B9020", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "SMC6StatusT", "fill": "$text-tertiary", "content": "Tạm ngưng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SMC6Contact", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "SMC6Phone", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC6PhoneI", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC6PhoneT", "fill": "$text-secondary", "content": "0251 382 1234", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SMC6Email", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SMC6EmailI", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SMC6EmailT", "fill": "$text-secondary", "content": "order@bhs.com.vn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SMC6Bottom", "width": "fill_container", "padding": [12, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SMC6POs", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SMC6POsL", "fill": "$text-tertiary", "content": "Tổng PO", "fontFamily": "Roboto", "fontSize": 10}, - {"type": "text", "id": "SMC6POsV", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SMC6Stars", "gap": 2, "children": [ - {"type": "icon_font", "id": "SMC6S1", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC6S2", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC6S3", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SMC6S4", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "SMC6S5", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "SMHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "SMBreadcrumb", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMBread1", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SMBreadSep", + "fill": "$text-tertiary", + "content": "/", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SMBread2", + "fill": "$orange-primary", + "content": "Nhà cung cấp", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "SMHeaderTitle", + "fill": "$text-primary", + "content": "Nhà cung cấp", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMHeaderRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMSearchBox", + "width": 220, + "height": 40, + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 0, + 14 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMSearchI", + "width": 18, + "height": 18, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMSearchP", + "fill": "$text-tertiary", + "content": "Tìm nhà cung cấp...", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "SMAddBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMAddI", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SMAddT", + "fill": "#FFFFFF", + "content": "Thêm NCC", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 20, + "clip": true, + "children": [ + { + "type": "frame", + "id": "SMStats", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "SMStat1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 16, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SMStat1L", + "fill": "$text-tertiary", + "content": "Tổng NCC", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SMStat1V", + "fill": "$text-primary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMStat2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 16, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SMStat2L", + "fill": "$text-tertiary", + "content": "Đang hoạt động", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SMStat2V", + "fill": "#22C55E", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMStat3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 16, + 20 + ], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "SMStat3L", + "fill": "$text-tertiary", + "content": "PO tháng này", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "id": "SMStat3V", + "fill": "$orange-primary", + "content": "12", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMGrid", + "width": "fill_container", + "height": "fill_container", + "gap": 16, + "wrap": true, + "children": [ + { + "type": "frame", + "id": "SMCard1", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC1Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC1AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC1Av", + "width": 42, + "height": 42, + "fill": "#7C3AED", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC1AvT", + "fill": "#FFFFFF", + "content": "LV", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC1NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC1Name", + "fill": "$text-primary", + "content": "Lavazza Vietnam", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC1Cat", + "fill": "$text-tertiary", + "content": "Cà phê & Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC1Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC1StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC1Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC1Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC1PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC1PhoneT", + "fill": "$text-secondary", + "content": "028 3823 4567", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC1Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC1EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC1EmailT", + "fill": "$text-secondary", + "content": "order@lavazza.vn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC1Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC1POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC1POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC1POsV", + "fill": "$text-primary", + "content": "24", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC1Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC1S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC1S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC1S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC1S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC1S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMCard2", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC2Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC2AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC2Av", + "width": 42, + "height": 42, + "fill": "#22C55E", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC2AvT", + "fill": "#FFFFFF", + "content": "ML", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC2NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC2Name", + "fill": "$text-primary", + "content": "Milo Vietnam", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC2Cat", + "fill": "$text-tertiary", + "content": "Đồ uống & Bột", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC2Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC2StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC2Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC2Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC2PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC2PhoneT", + "fill": "$text-secondary", + "content": "028 3912 8888", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC2Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC2EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC2EmailT", + "fill": "$text-secondary", + "content": "sales@milovn.com", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC2Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC2POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC2POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC2POsV", + "fill": "$text-primary", + "content": "18", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC2Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC2S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC2S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC2S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC2S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC2S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMCard3", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC3Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC3AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC3Av", + "width": 42, + "height": 42, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC3AvT", + "fill": "#FFFFFF", + "content": "VM", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC3NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC3Name", + "fill": "$text-primary", + "content": "Vinamilk", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC3Cat", + "fill": "$text-tertiary", + "content": "Sữa & Sản phẩm từ sữa", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC3Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC3StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC3Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC3Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC3PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC3PhoneT", + "fill": "$text-secondary", + "content": "028 3845 1234", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC3Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC3EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC3EmailT", + "fill": "$text-secondary", + "content": "b2b@vinamilk.com.vn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC3Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC3POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC3POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC3POsV", + "fill": "$text-primary", + "content": "31", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC3Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC3S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC3S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC3S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC3S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "SMC3S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMCard4", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC4Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC4AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC4Av", + "width": 42, + "height": 42, + "fill": "#EC4899", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC4AvT", + "fill": "#FFFFFF", + "content": "FG", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC4NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC4Name", + "fill": "$text-primary", + "content": "Fresh Garden", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC4Cat", + "fill": "$text-tertiary", + "content": "Rau củ & Trái cây tươi", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC4Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC4StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC4Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC4Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC4PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC4PhoneT", + "fill": "$text-secondary", + "content": "028 3756 9012", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC4Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC4EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC4EmailT", + "fill": "$text-secondary", + "content": "info@freshgarden.vn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC4Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC4POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC4POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC4POsV", + "fill": "$text-primary", + "content": "15", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC4Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC4S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC4S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC4S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC4S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC4S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMCard5", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC5Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC5AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC5Av", + "width": 42, + "height": 42, + "fill": "#F59E0B", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC5AvT", + "fill": "#FFFFFF", + "content": "AB", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC5NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC5Name", + "fill": "$text-primary", + "content": "ABC Foods", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC5Cat", + "fill": "$text-tertiary", + "content": "Gia vị & Nước chấm", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC5Status", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC5StatusT", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC5Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC5Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC5PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC5PhoneT", + "fill": "$text-secondary", + "content": "028 3678 5555", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC5Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC5EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC5EmailT", + "fill": "$text-secondary", + "content": "sales@abcfoods.vn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC5Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC5POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC5POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC5POsV", + "fill": "$text-primary", + "content": "9", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC5Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC5S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC5S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC5S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC5S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "SMC5S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMCard6", + "width": 340, + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 20, + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "SMC6Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC6AvatarWrap", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC6Av", + "width": 42, + "height": 42, + "fill": "#EF4444", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SMC6AvT", + "fill": "#FFFFFF", + "content": "BH", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC6NameWrap", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC6Name", + "fill": "$text-primary", + "content": "Đường Biên Hòa", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SMC6Cat", + "fill": "$text-tertiary", + "content": "Đường & Phụ gia", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC6Status", + "fill": "#8B8B9020", + "cornerRadius": 6, + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "SMC6StatusT", + "fill": "$text-tertiary", + "content": "Tạm ngưng", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC6Contact", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "SMC6Phone", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC6PhoneI", + "width": 14, + "height": 14, + "iconFontName": "phone", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC6PhoneT", + "fill": "$text-secondary", + "content": "0251 382 1234", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "SMC6Email", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SMC6EmailI", + "width": 14, + "height": 14, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SMC6EmailT", + "fill": "$text-secondary", + "content": "order@bhs.com.vn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SMC6Bottom", + "width": "fill_container", + "padding": [ + 12, + 0, + 0, + 0 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SMC6POs", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "SMC6POsL", + "fill": "$text-tertiary", + "content": "Tổng PO", + "fontFamily": "Roboto", + "fontSize": 10 + }, + { + "type": "text", + "id": "SMC6POsV", + "fill": "$text-primary", + "content": "7", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "SMC6Stars", + "gap": 2, + "children": [ + { + "type": "icon_font", + "id": "SMC6S1", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC6S2", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC6S3", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "#F59E0B" + }, + { + "type": "icon_font", + "id": "SMC6S4", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "icon_font", + "id": "SMC6S5", + "width": 14, + "height": 14, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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/tax-configuration.pen b/pencil-design/src/pages/tPOS/admin/tax-configuration.pen index b868bbe0..38c5e88c 100644 --- a/pencil-design/src/pages/tPOS/admin/tax-configuration.pen +++ b/pencil-design/src/pages/tPOS/admin/tax-configuration.pen @@ -12,182 +12,1511 @@ "clip": true, "children": [ { - "type": "frame", "id": "TCSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", + "type": "frame", + "id": "TCSidebar", + "width": 260, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "right" + ] + }, + "layout": "vertical", "children": [ - {"type": "frame", "id": "TCSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TCLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TCLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "TCLogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "TCLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TCLogoS", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "TCSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "TCNavL1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "TCNavDash", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCNavDashI", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "TCNavDashT", "fill": "$text-secondary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "TCNavL2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "TCNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCNavStoresI", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "TCNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "TCNavL3", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "TCNavTax", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCNavTaxI", "width": 20, "height": 20, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "TCNavTaxT", "fill": "#FFFFFF", "content": "Cài đặt thuế", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TCNavSet", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "TCNavSetT", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "TCSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TCUserAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TCUserAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "TCUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "TCUserN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "TCUserR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} + { + "type": "frame", + "id": "TCSidebarLogo", + "width": "fill_container", + "padding": [ + 24, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TCLogoIcon", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCLogoT", + "fill": "#FFFFFF", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "800" + } + ] + }, + { + "type": "frame", + "id": "TCLogoTG", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "TCLogoN", + "fill": "$text-primary", + "content": "GoodGo Admin", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TCLogoS", + "fill": "$text-tertiary", + "content": "Management Console", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCSidebarNav", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 16, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "TCNavL1", + "fill": "$text-tertiary", + "content": "TỔNG QUAN", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 0, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "TCNavDash", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavDashI", + "width": 20, + "height": 20, + "iconFontName": "layout-dashboard", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavDashT", + "fill": "$text-secondary", + "content": "Dashboard", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "TCNavL2", + "fill": "$text-tertiary", + "content": "CỬA HÀNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "TCNavStores", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "TCNavStoresLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavStoresI", + "width": 20, + "height": 20, + "iconFontName": "store", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavStoresT", + "fill": "$text-secondary", + "content": "Quản lý cửa hàng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavStoresBdg", + "width": 22, + "height": 22, + "fill": "$bg-interactive", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCNavStoresBdgT", + "fill": "$text-tertiary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCNavProd", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavProdI", + "width": 18, + "height": 18, + "iconFontName": "package", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "TCNavProdT", + "fill": "$text-tertiary", + "content": "Sản phẩm & Menu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavStaff", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavStaffI", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "TCNavStaffT", + "fill": "$text-tertiary", + "content": "Nhân sự", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavInv", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavInvI", + "width": 18, + "height": 18, + "iconFontName": "warehouse", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "TCNavInvT", + "fill": "$text-tertiary", + "content": "Kho hàng", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavDev", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12, + 0, + 36 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavDevI", + "width": 18, + "height": 18, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "TCNavDevT", + "fill": "$text-tertiary", + "content": "Thiết bị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "TCNavL3", + "fill": "$text-tertiary", + "content": "KINH DOANH", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "TCNavCust", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavCustI", + "width": 20, + "height": 20, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavCustT", + "fill": "$text-secondary", + "content": "Khách hàng & Loyalty", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavRpt", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavRptI", + "width": 20, + "height": 20, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavRptT", + "fill": "$text-secondary", + "content": "Báo cáo & Phân tích", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavFin", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavFinI", + "width": 20, + "height": 20, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "TCNavFinT", + "fill": "#FFFFFF", + "content": "Tài chính", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ], + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "TCNavL4", + "fill": "$text-tertiary", + "content": "HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 10, + "fontWeight": "700", + "padding": [ + 16, + 12, + 8, + 12 + ] + }, + { + "type": "frame", + "id": "TCNavRoles", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavRolesI", + "width": 20, + "height": 20, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavRolesT", + "fill": "$text-secondary", + "content": "Phân quyền", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TCNavSet", + "width": "fill_container", + "height": 44, + "cornerRadius": 10, + "padding": [ + 0, + 12 + ], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCNavSetI", + "width": 20, + "height": 20, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCNavSetT", + "fill": "$text-secondary", + "content": "Cài đặt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCSidebarUser", + "width": "fill_container", + "padding": [ + 16, + 16 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "top" + ] + }, + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TCUserAv", + "width": 36, + "height": 36, + "fill": "#3B82F6", + "cornerRadius": 100, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCUserAvT", + "fill": "#FFFFFF", + "content": "VH", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TCUserInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "TCUserN", + "fill": "$text-primary", + "content": "Velik Ho", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TCUserR", + "fill": "$text-tertiary", + "content": "Owner", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } ] }, { - "type": "frame", "id": "TCMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", + "type": "frame", + "id": "TCMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", "children": [ - {"type": "frame", "id": "TCHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TCHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "TCHeaderTitle", "fill": "$text-primary", "content": "Cài đặt thuế", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "TCHeaderSub", "fill": "$text-tertiary", "content": "Cấu hình thuế và phí dịch vụ áp dụng cho sản phẩm", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "TCHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "TCSaveBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCSaveI", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "TCSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - - {"type": "frame", "id": "TCContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 24, "clip": true, "children": [ - - {"type": "text", "id": "TCProfilesTitle", "fill": "$text-primary", "content": "Hồ sơ thuế", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - - {"type": "frame", "id": "TCProfileRow", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "TCProf1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [ - {"type": "frame", "id": "TCProf1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "TCProf1N", "fill": "$text-primary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "TCProf1Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "TCProf1BT", "fill": "#22C55E", "content": "Mặc định", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "TCProf1Rate", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "TCProf1Desc", "fill": "$text-tertiary", "content": "Thuế giá trị gia tăng theo quy định", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "TCProf2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "$border-subtle"}, "children": [ - {"type": "frame", "id": "TCProf2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "TCProf2N", "fill": "$text-primary", "content": "Phí dịch vụ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "text", "id": "TCProf2Rate", "fill": "#3B82F6", "content": "5%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "TCProf2Desc", "fill": "$text-tertiary", "content": "Phí dịch vụ phục vụ tại bàn", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "TCProf3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 24, "layout": "vertical", "gap": 12, "stroke": {"thickness": 1, "fill": "$border-subtle"}, "children": [ - {"type": "frame", "id": "TCProf3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "TCProf3N", "fill": "$text-primary", "content": "Không thuế", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "text", "id": "TCProf3Rate", "fill": "$text-tertiary", "content": "0%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "TCProf3Desc", "fill": "$text-tertiary", "content": "Miễn thuế cho sản phẩm nội bộ", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - - {"type": "frame", "id": "TCDefaultSel", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TCDefLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "TCDefLabel", "fill": "$text-primary", "content": "Thuế mặc định cho sản phẩm mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "TCDefDesc", "fill": "$text-tertiary", "content": "Tự động áp dụng khi tạo sản phẩm mới", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "TCDefSelect", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "TCDefVal", "fill": "$text-primary", "content": "VAT 10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "icon_font", "id": "TCDefChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - - {"type": "frame", "id": "TCRulesTable", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "TCRulesHead", "width": "fill_container", "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "TCRulesTitle", "fill": "$text-primary", "content": "Quy tắc thuế theo nhóm sản phẩm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "TCAddRule", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TCAddRuleI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "TCAddRuleT", "fill": "$text-secondary", "content": "Thêm quy tắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "TCRHdr", "width": "fill_container", "padding": [12, 24], "fill": "$bg-interactive", "alignItems": "center", "children": [ - {"type": "text", "id": "TCRH1", "fill": "$text-tertiary", "content": "Nhóm sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": "fill_container"}, - {"type": "text", "id": "TCRH2", "fill": "$text-tertiary", "content": "Hồ sơ thuế", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 160}, - {"type": "text", "id": "TCRH3", "fill": "$text-tertiary", "content": "Thuế suất", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "TCRH4", "fill": "$text-tertiary", "content": "Ngày áp dụng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 120}, - {"type": "text", "id": "TCRH5", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "width": 100} - ]}, - {"type": "frame", "id": "TCRR1", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "TCR1N", "fill": "$text-primary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "TCR1P", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 13, "width": 160}, - {"type": "text", "id": "TCR1R", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "TCR1D", "fill": "$text-secondary", "content": "01/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120}, - {"type": "frame", "id": "TCR1Status", "width": 100, "children": [ - {"type": "frame", "id": "TCR1SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "TCR1ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "TCRR2", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "TCR2N", "fill": "$text-primary", "content": "Món ăn chính", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "TCR2P", "fill": "$text-secondary", "content": "VAT + Phí DV", "fontFamily": "Roboto", "fontSize": 13, "width": 160}, - {"type": "text", "id": "TCR2R", "fill": "$orange-primary", "content": "15%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "TCR2D", "fill": "$text-secondary", "content": "01/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120}, - {"type": "frame", "id": "TCR2Status", "width": 100, "children": [ - {"type": "frame", "id": "TCR2SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "TCR2ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "TCRR3", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [ - {"type": "text", "id": "TCR3N", "fill": "$text-primary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "TCR3P", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 13, "width": 160}, - {"type": "text", "id": "TCR3R", "fill": "$orange-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "TCR3D", "fill": "$text-secondary", "content": "15/01/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120}, - {"type": "frame", "id": "TCR3Status", "width": 100, "children": [ - {"type": "frame", "id": "TCR3SBG", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "TCR3ST", "fill": "#22C55E", "content": "Hoạt động", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "TCRR4", "width": "fill_container", "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "text", "id": "TCR4N", "fill": "$text-primary", "content": "Combo / Set", "fontFamily": "Roboto", "fontSize": 13, "width": "fill_container"}, - {"type": "text", "id": "TCR4P", "fill": "$text-secondary", "content": "Không thuế", "fontFamily": "Roboto", "fontSize": 13, "width": 160}, - {"type": "text", "id": "TCR4R", "fill": "$text-tertiary", "content": "0%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "width": 100}, - {"type": "text", "id": "TCR4D", "fill": "$text-secondary", "content": "01/02/2026", "fontFamily": "Roboto", "fontSize": 13, "width": 120}, - {"type": "frame", "id": "TCR4Status", "width": 100, "children": [ - {"type": "frame", "id": "TCR4SBG", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [ - {"type": "text", "id": "TCR4ST", "fill": "#F59E0B", "content": "Tạm dừng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ]} + { + "type": "frame", + "id": "TCHeader", + "width": "fill_container", + "padding": [ + 16, + 32 + ], + "fill": "$bg-elevated", + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TCHeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "TCHeaderTitle", + "fill": "$text-primary", + "content": "Cài đặt thuế", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TCHeaderSub", + "fill": "$text-tertiary", + "content": "Cấu hình thuế và phí dịch vụ áp dụng cho sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "id": "TCHeaderRight", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "TCSaveBtn", + "fill": "$orange-primary", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCSaveI", + "width": 18, + "height": 18, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "TCSaveT", + "fill": "#FFFFFF", + "content": "Lưu thay đổi", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCContent", + "width": "fill_container", + "height": "fill_container", + "padding": 28, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + { + "type": "text", + "id": "TCProfilesTitle", + "fill": "$text-primary", + "content": "Hồ sơ thuế", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "TCProfileRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "TCProf1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "children": [ + { + "type": "frame", + "id": "TCProf1Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCProf1N", + "fill": "$text-primary", + "content": "VAT", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "TCProf1Badge", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "TCProf1BT", + "fill": "#22C55E", + "content": "Mặc định", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "TCProf1Rate", + "fill": "$orange-primary", + "content": "10%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TCProf1Desc", + "fill": "$text-tertiary", + "content": "Thuế giá trị gia tăng theo quy định", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "TCProf2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "children": [ + { + "type": "frame", + "id": "TCProf2Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCProf2N", + "fill": "$text-primary", + "content": "Phí dịch vụ", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "TCProf2Rate", + "fill": "#3B82F6", + "content": "5%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TCProf2Desc", + "fill": "$text-tertiary", + "content": "Phí dịch vụ phục vụ tại bàn", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "TCProf3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": 24, + "layout": "vertical", + "gap": 12, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "children": [ + { + "type": "frame", + "id": "TCProf3Top", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCProf3N", + "fill": "$text-primary", + "content": "Không thuế", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "TCProf3Rate", + "fill": "$text-tertiary", + "content": "0%", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TCProf3Desc", + "fill": "$text-tertiary", + "content": "Miễn thuế cho sản phẩm nội bộ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCDefaultSel", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "padding": [ + 16, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TCDefLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "TCDefLabel", + "fill": "$text-primary", + "content": "Thuế mặc định cho sản phẩm mới", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TCDefDesc", + "fill": "$text-tertiary", + "content": "Tự động áp dụng khi tạo sản phẩm mới", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "TCDefSelect", + "fill": "$bg-interactive", + "cornerRadius": 10, + "padding": [ + 10, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCDefVal", + "fill": "$text-primary", + "content": "VAT 10%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "TCDefChev", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCRulesTable", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 14, + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "TCRulesHead", + "width": "fill_container", + "padding": [ + 16, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCRulesTitle", + "fill": "$text-primary", + "content": "Quy tắc thuế theo nhóm sản phẩm", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "TCAddRule", + "fill": "$bg-interactive", + "cornerRadius": 8, + "padding": [ + 8, + 14 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TCAddRuleI", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "TCAddRuleT", + "fill": "$text-secondary", + "content": "Thêm quy tắc", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCRHdr", + "width": "fill_container", + "padding": [ + 12, + 24 + ], + "fill": "$bg-interactive", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCRH1", + "fill": "$text-tertiary", + "content": "Nhóm sản phẩm", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": "fill_container" + }, + { + "type": "text", + "id": "TCRH2", + "fill": "$text-tertiary", + "content": "Hồ sơ thuế", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 160 + }, + { + "type": "text", + "id": "TCRH3", + "fill": "$text-tertiary", + "content": "Thuế suất", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "TCRH4", + "fill": "$text-tertiary", + "content": "Ngày áp dụng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 120 + }, + { + "type": "text", + "id": "TCRH5", + "fill": "$text-tertiary", + "content": "Trạng thái", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600", + "width": 100 + } + ] + }, + { + "type": "frame", + "id": "TCRR1", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCR1N", + "fill": "$text-primary", + "content": "Đồ uống", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "TCR1P", + "fill": "$text-secondary", + "content": "VAT", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 160 + }, + { + "type": "text", + "id": "TCR1R", + "fill": "$orange-primary", + "content": "10%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "TCR1D", + "fill": "$text-secondary", + "content": "01/01/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 120 + }, + { + "type": "frame", + "id": "TCR1Status", + "width": 100, + "children": [ + { + "type": "frame", + "id": "TCR1SBG", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "TCR1ST", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCRR2", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCR2N", + "fill": "$text-primary", + "content": "Món ăn chính", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "TCR2P", + "fill": "$text-secondary", + "content": "VAT + Phí DV", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 160 + }, + { + "type": "text", + "id": "TCR2R", + "fill": "$orange-primary", + "content": "15%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "TCR2D", + "fill": "$text-secondary", + "content": "01/01/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 120 + }, + { + "type": "frame", + "id": "TCR2Status", + "width": 100, + "children": [ + { + "type": "frame", + "id": "TCR2SBG", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "TCR2ST", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCRR3", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "stroke": { + "thickness": 1, + "fill": "$border-subtle", + "sides": [ + "bottom" + ] + }, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCR3N", + "fill": "$text-primary", + "content": "Tráng miệng", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "TCR3P", + "fill": "$text-secondary", + "content": "VAT", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 160 + }, + { + "type": "text", + "id": "TCR3R", + "fill": "$orange-primary", + "content": "10%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "TCR3D", + "fill": "$text-secondary", + "content": "15/01/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 120 + }, + { + "type": "frame", + "id": "TCR3Status", + "width": 100, + "children": [ + { + "type": "frame", + "id": "TCR3SBG", + "fill": "#22C55E20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "TCR3ST", + "fill": "#22C55E", + "content": "Hoạt động", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TCRR4", + "width": "fill_container", + "padding": [ + 14, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TCR4N", + "fill": "$text-primary", + "content": "Combo / Set", + "fontFamily": "Roboto", + "fontSize": 13, + "width": "fill_container" + }, + { + "type": "text", + "id": "TCR4P", + "fill": "$text-secondary", + "content": "Không thuế", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 160 + }, + { + "type": "text", + "id": "TCR4R", + "fill": "$text-tertiary", + "content": "0%", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600", + "width": 100 + }, + { + "type": "text", + "id": "TCR4D", + "fill": "$text-secondary", + "content": "01/02/2026", + "fontFamily": "Roboto", + "fontSize": 13, + "width": 120 + }, + { + "type": "frame", + "id": "TCR4Status", + "width": 100, + "children": [ + { + "type": "frame", + "id": "TCR4SBG", + "fill": "#F59E0B20", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "TCR4ST", + "fill": "#F59E0B", + "content": "Tạm dừng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } ] } ] } ], "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "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