diff --git a/pencil-design/images/appointment-calendar-preview.png b/pencil-design/images/appointment-calendar-preview.png deleted file mode 100644 index f730009b..00000000 Binary files a/pencil-design/images/appointment-calendar-preview.png and /dev/null differ diff --git a/pencil-design/images/room-grid-preview.png b/pencil-design/images/room-grid-preview.png deleted file mode 100644 index ef9314d9..00000000 Binary files a/pencil-design/images/room-grid-preview.png and /dev/null differ diff --git a/pencil-design/images/service-display-preview.png b/pencil-design/images/service-display-preview.png deleted file mode 100644 index 4f031499..00000000 Binary files a/pencil-design/images/service-display-preview.png and /dev/null differ diff --git a/pencil-design/images/table-map-preview.png b/pencil-design/images/table-map-preview.png deleted file mode 100644 index 44c1e697..00000000 Binary files a/pencil-design/images/table-map-preview.png and /dev/null differ diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index a7b75f42..40d9e65d 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -4753,12 +4753,21 @@ 14 ], "children": [ + { + "type": "icon_font", + "id": "RmGridBadgeIcon", + "iconFontName": "mic", + "iconFontFamily": "lucide", + "width": 12, + "height": 12, + "fill": "$karaoke-primary" + }, { "type": "text", "id": "RmGridBadgeText", "name": "badgeText", "fill": "$karaoke-primary", - "content": "\ud83c\udfa4 ROOM GRID", + "content": "ROOM GRID", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -4800,10 +4809,13 @@ "alignItems": "center", "children": [ { - "type": "text", + "type": "icon_font", "id": "RmAvailIcon", - "content": "\ud83c\udfa4", - "fontSize": 24 + "iconFontName": "mic", + "iconFontFamily": "lucide", + "width": 24, + "height": 24, + "fill": "$text-secondary" }, { "type": "text", @@ -5011,7 +5023,16 @@ "name": "ticketHeader", "width": "fill_container", "fill": "$orange-primary", - "padding": 12, + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "padding": [ + 12, + 16 + ], "justifyContent": "space_between", "alignItems": "center", "children": [ @@ -5019,30 +5040,30 @@ "type": "text", "id": "KTOrderNum", "name": "orderNumber", - "fill": "$text-primary", + "fill": "#FFFFFF", "content": "#0042", "fontFamily": "Roboto", - "fontSize": 20, + "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "KTTableInfo", "name": "tableInfo", - "fill": "$text-muted", + "fill": "#FFFFFFCC", "content": "B\u00e0n 07", "fontFamily": "Roboto", - "fontSize": 16, + "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "KTElapsed", "name": "elapsedTime", - "fill": "$text-primary", + "fill": "#FFFFFF", "content": "5:32", "fontFamily": "Roboto", - "fontSize": 18, + "fontSize": 16, "fontWeight": "700" } ] @@ -5140,16 +5161,26 @@ "height": 36, "fill": "$green-success", "cornerRadius": 8, + "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ + { + "type": "icon_font", + "id": "KTDoneIcon", + "iconFontName": "check", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" + }, { "type": "text", "id": "KTDoneTxt", - "fill": "$text-primary", - "content": "\u2713 Xong", + "fill": "#FFFFFF", + "content": "Xong", "fontFamily": "Roboto", - "fontSize": 16, + "fontSize": 14, "fontWeight": "600" } ] @@ -5227,32 +5258,49 @@ "alignItems": "center", "children": [ { - "type": "text", - "id": "QCLabel", - "fill": "$text-primary", - "content": "\ud83d\udd14 M\u1edcI KH\u00c1CH", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" + "type": "frame", + "id": "QCLabelRow", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QCBellIcon", + "iconFontName": "bell-ring", + "iconFontFamily": "lucide", + "width": 20, + "height": 20, + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "QCLabel", + "fill": "#FFFFFF", + "content": "M\u1edcI KH\u00c1CH", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] }, { "type": "text", "id": "QCNumber", "name": "callingNumber", - "fill": "$text-primary", + "fill": "#FFFFFF", "content": "A-038", "fontFamily": "Roboto", - "fontSize": 56, + "fontSize": 48, "fontWeight": "700" }, { "type": "text", "id": "QCStation", "name": "station", - "fill": "$text-muted", + "fill": "#FFFFFFCC", "content": "Ph\u00f2ng 3 - Ng\u1ecdc", "fontFamily": "Roboto", - "fontSize": 16, + "fontSize": 14, "fontWeight": "normal" } ] @@ -5391,12 +5439,21 @@ 14 ], "children": [ + { + "type": "icon_font", + "id": "TblMapBadgeIcon", + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "width": 12, + "height": 12, + "fill": "$orange-primary" + }, { "type": "text", "id": "TblMapBadgeText", "name": "badgeText", "fill": "$orange-primary", - "content": "\ud83c\udf7d\ufe0f TABLE MAP", + "content": "TABLE MAP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -5426,11 +5483,11 @@ "reusable": true, "width": 100, "height": 100, - "fill": "$bg-elevated", + "fill": "#22C55E18", "cornerRadius": 12, "stroke": { "thickness": 2, - "fill": "$border-default" + "fill": "$green-success" }, "layout": "vertical", "gap": 4, @@ -5441,7 +5498,7 @@ "type": "text", "id": "TblAvailNum", "name": "tableNumber", - "fill": "$text-primary", + "fill": "$green-success", "content": "T01", "fontFamily": "Roboto", "fontSize": 18, @@ -5608,7 +5665,7 @@ "id": "LegAvailDot", "width": 12, "height": 12, - "fill": "$bg-elevated", + "fill": "$green-success", "cornerRadius": 2 }, { diff --git a/pencil-design/src/organisms/vertical-specific/room-grid.pen b/pencil-design/src/organisms/vertical-specific/room-grid.pen index 5269ae3b..b818058a 100644 --- a/pencil-design/src/organisms/vertical-specific/room-grid.pen +++ b/pencil-design/src/organisms/vertical-specific/room-grid.pen @@ -34,7 +34,8 @@ "cornerRadius": 100, "padding": [6, 14], "children": [ - {"type": "text", "id": "RmGridBadgeText", "name": "badgeText", "fill": "$karaoke-primary", "content": "🎤 ROOM GRID", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} + {"type": "icon_font", "id": "RmGridBadgeIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$karaoke-primary"}, + {"type": "text", "id": "RmGridBadgeText", "name": "badgeText", "fill": "$karaoke-primary", "content": "ROOM GRID", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} ] }, {"type": "text", "id": "RmGridTitle", "name": "shTitle", "fill": "$text-primary", "content": "Karaoke Room Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, @@ -68,7 +69,7 @@ "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RmAvailIcon", "content": "🎤", "fontSize": 24}, + {"type": "icon_font", "id": "RmAvailIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 24, "height": 24, "fill": "$text-secondary"}, {"type": "text", "id": "RmAvailName", "name": "roomName", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RmAvailCap", "name": "capacity", "fill": "$text-secondary", "content": "8-12 người", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} ] diff --git a/pencil-design/src/organisms/vertical-specific/service-display.pen b/pencil-design/src/organisms/vertical-specific/service-display.pen index b4cb6046..03468df9 100644 --- a/pencil-design/src/organisms/vertical-specific/service-display.pen +++ b/pencil-design/src/organisms/vertical-specific/service-display.pen @@ -71,13 +71,14 @@ "name": "ticketHeader", "width": "fill_container", "fill": "$orange-primary", - "padding": 12, + "cornerRadius": [16, 16, 0, 0], + "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "KTOrderNum", "name": "orderNumber", "fill": "$text-primary", "content": "#0042", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "KTTableInfo", "name": "tableInfo", "fill": "$text-muted", "content": "Bàn 07", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}, - {"type": "text", "id": "KTElapsed", "name": "elapsedTime", "fill": "$text-primary", "content": "5:32", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + {"type": "text", "id": "KTOrderNum", "name": "orderNumber", "fill": "#FFFFFF", "content": "#0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "KTTableInfo", "name": "tableInfo", "fill": "#FFFFFFCC", "content": "Bàn 07", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "KTElapsed", "name": "elapsedTime", "fill": "#FFFFFF", "content": "5:32", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} ] }, { @@ -109,8 +110,9 @@ "padding": 12, "justifyContent": "center", "children": [ - {"type": "frame", "id": "KTDoneBtn", "width": 100, "height": 36, "fill": "$green-success", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "KTDoneTxt", "fill": "$text-primary", "content": "✓ Xong", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + {"type": "frame", "id": "KTDoneBtn", "width": 100, "height": 36, "fill": "$green-success", "cornerRadius": 8, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KTDoneIcon", "iconFontName": "check", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}, + {"type": "text", "id": "KTDoneTxt", "fill": "#FFFFFF", "content": "Xong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} ]} ] } @@ -155,9 +157,12 @@ "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "QCLabel", "fill": "$text-primary", "content": "🔔 MỜI KHÁCH", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "QCNumber", "name": "callingNumber", "fill": "$text-primary", "content": "A-038", "fontFamily": "Roboto", "fontSize": 56, "fontWeight": "700"}, - {"type": "text", "id": "QCStation", "name": "station", "fill": "$text-muted", "content": "Phòng 3 - Ngọc", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} + {"type": "frame", "id": "QCLabelRow", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "QCBellIcon", "iconFontName": "bell-ring", "iconFontFamily": "lucide", "width": 20, "height": 20, "fill": "#FFFFFF"}, + {"type": "text", "id": "QCLabel", "fill": "#FFFFFF", "content": "MỜI KHÁCH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "text", "id": "QCNumber", "name": "callingNumber", "fill": "#FFFFFF", "content": "A-038", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, + {"type": "text", "id": "QCStation", "name": "station", "fill": "#FFFFFFCC", "content": "Phòng 3 - Ngọc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} ] } ] diff --git a/pencil-design/src/organisms/vertical-specific/table-map.pen b/pencil-design/src/organisms/vertical-specific/table-map.pen index 02ab40a2..210baf8b 100644 --- a/pencil-design/src/organisms/vertical-specific/table-map.pen +++ b/pencil-design/src/organisms/vertical-specific/table-map.pen @@ -34,7 +34,8 @@ "cornerRadius": 100, "padding": [6, 14], "children": [ - {"type": "text", "id": "TblMapBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "🍽️ TABLE MAP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} + {"type": "icon_font", "id": "TblMapBadgeIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$orange-primary"}, + {"type": "text", "id": "TblMapBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "TABLE MAP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} ] }, {"type": "text", "id": "TblMapTitle", "name": "shTitle", "fill": "$text-primary", "content": "Restaurant Table Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, @@ -60,15 +61,15 @@ "reusable": true, "width": 100, "height": 100, - "fill": "$bg-elevated", + "fill": "#22C55E18", "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$border-default"}, + "stroke": {"thickness": 2, "fill": "$green-success"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TblAvailNum", "name": "tableNumber", "fill": "$text-primary", "content": "T01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, + {"type": "text", "id": "TblAvailNum", "name": "tableNumber", "fill": "$green-success", "content": "T01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "TblAvailSeats", "name": "seatCount", "fill": "$text-secondary", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} ] }, @@ -143,7 +144,7 @@ "gap": 16, "children": [ {"type": "frame", "id": "LegAvail", "gap": 6, "alignItems": "center", "children": [ - {"type": "rectangle", "id": "LegAvailDot", "width": 12, "height": 12, "fill": "$bg-elevated", "cornerRadius": 2}, + {"type": "rectangle", "id": "LegAvailDot", "width": 12, "height": 12, "fill": "$green-success", "cornerRadius": 2}, {"type": "text", "id": "LegAvailTxt", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} ]}, {"type": "frame", "id": "LegOcc", "gap": 6, "alignItems": "center", "children": [ @@ -177,6 +178,7 @@ "text-muted": {"type": "color", "value": "#FFFFFFCC"}, "text-primary": {"type": "color", "value": "#FFFFFF"}, "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} + "text-tertiary": {"type": "color", "value": "#8B8B90"}, + "green-success": {"type": "color", "value": "#22C55E"} } }