diff --git a/pencil-design/src/pages/tMarketing/ai-chatbot.pen b/pencil-design/src/pages/tMarketing/ai-chatbot.pen new file mode 100644 index 00000000..bdc47c88 --- /dev/null +++ b/pencil-design/src/pages/tMarketing/ai-chatbot.pen @@ -0,0 +1,1654 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "AIChatbotScreen", + "x": 0, + "y": 0, + "name": "Screen/AI Chatbot", + "reusable": true, + "clip": true, + "width": 2063, + "height": 800, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "align": "inside", + "thickness": 3, + "fill": "$yellow-primary" + }, + "layout": "vertical", + "padding": [ + 24, + 16 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "LogoSection", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 8, + "padding": [ + 0, + 0, + 16, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LogoMark", + "width": 32, + "height": 32, + "fill": "$yellow-primary", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoLetter", + "fill": "$bg-card", + "content": "M", + "fontFamily": "JetBrains Mono", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LogoText", + "fill": "$text-primary", + "content": "tMARKETING", + "fontFamily": "JetBrains Mono", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "NavSection", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "NavHub", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavHubNum", + "fill": "$text-tertiary", + "content": "01", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavHubLabel", + "fill": "$text-secondary", + "content": "HUB", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavChat", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavChatNum", + "fill": "$text-tertiary", + "content": "02", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavChatLabel", + "fill": "$text-secondary", + "content": "CHAT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavBot", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavBotNum", + "fill": "$text-tertiary", + "content": "03", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavBotLabel", + "fill": "$text-secondary", + "content": "BOT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavAIBot", + "width": "fill_container", + "fill": "#FACC1515", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$yellow-primary" + }, + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavAIBotNum", + "fill": "$yellow-primary", + "content": "04", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavAIBotLabel", + "fill": "$text-primary", + "content": "AI BOT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NavCRM", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavCRMNum", + "fill": "$text-tertiary", + "content": "05", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavCRMLabel", + "fill": "$text-secondary", + "content": "CRM", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavStats", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavStatsNum", + "fill": "$text-tertiary", + "content": "06", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavStatsLabel", + "fill": "$text-secondary", + "content": "ANALYTICS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "AICredits", + "width": "fill_container", + "fill": "#A855F715", + "stroke": { + "thickness": 1, + "fill": "#A855F730" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "CreditsHeader", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CreditsIcon", + "width": 14, + "height": 14, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "CreditsLabel", + "fill": "#A855F7", + "content": "GEMINI API", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "CreditsValue", + "fill": "$text-primary", + "content": "8.2K tokens left", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "AccountRow", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 20, + 0, + 0, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Avatar", + "width": 32, + "height": 32, + "fill": "$border", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvatarText", + "fill": "$text-primary", + "content": "AD", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "UserName", + "fill": "$text-primary", + "content": "ADMIN", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "ChevronIcon", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "ScenariosList", + "width": 320, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ScenariosHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ScenariosLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ScenariosIcon", + "width": 16, + "height": 16, + "iconFontName": "layers", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "ScenariosTitle", + "fill": "$text-primary", + "content": "SCENARIOS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "AddScenarioBtn", + "width": 28, + "height": 28, + "fill": "$yellow-primary", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "AddScenarioIcon", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-card" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ScenarioItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Scenario1", + "width": "fill_container", + "fill": "#FACC1510", + "stroke": { + "align": "inside", + "thickness": 2, + "fill": "$yellow-primary" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "S1Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "S1Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "S1Icon", + "width": 14, + "height": 14, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "S1Name", + "fill": "$text-primary", + "content": "Product Consultant", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "S1Status", + "fill": "#22C55E20", + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "S1StatusText", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "text", + "id": "S1Desc", + "fill": "$text-secondary", + "content": "Tư vấn sản phẩm tự động với AI", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "S1Stats", + "gap": 16, + "children": [ + { + "type": "text", + "id": "S1Convos", + "fill": "$text-tertiary", + "content": "2.4K convos", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "S1Rate", + "fill": "$success", + "content": "92% success", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Scenario2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "S2Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "S2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "S2Icon", + "width": 14, + "height": 14, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "S2Name", + "fill": "$text-primary", + "content": "FAQ Handler", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "S2Status", + "fill": "#22C55E20", + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "S2StatusText", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "text", + "id": "S2Desc", + "fill": "$text-secondary", + "content": "Trả lời câu hỏi thường gặp", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "S2Stats", + "gap": 16, + "children": [ + { + "type": "text", + "id": "S2Convos", + "fill": "$text-tertiary", + "content": "5.1K convos", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "S2Rate", + "fill": "$success", + "content": "88% success", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Scenario3", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "S3Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "S3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "S3Icon", + "width": 14, + "height": 14, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "S3Name", + "fill": "$text-primary", + "content": "Lead Generator", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "S3Status", + "fill": "#FACC1520", + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "S3StatusText", + "fill": "$warning", + "content": "TRAINING", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "text", + "id": "S3Desc", + "fill": "$text-secondary", + "content": "Thu thập thông tin khách hàng", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "S3Stats", + "gap": 16, + "children": [ + { + "type": "text", + "id": "S3Convos", + "fill": "$text-tertiary", + "content": "342 test runs", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Scenario4", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "S4Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "S4Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "S4Icon", + "width": 14, + "height": 14, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "S4Name", + "fill": "$text-primary", + "content": "Promo Campaign", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "S4Status", + "fill": "$bg-page", + "padding": [ + 4, + 8 + ], + "children": [ + { + "type": "text", + "id": "S4StatusText", + "fill": "$text-tertiary", + "content": "DRAFT", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "text", + "id": "S4Desc", + "fill": "$text-secondary", + "content": "Giới thiệu khuyến mãi mới", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ConfigPanel", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ConfigHeader", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 16, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ConfigLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "ConfigTitleRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ConfigIcon", + "width": 20, + "height": 20, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "ConfigTitle", + "fill": "$text-primary", + "content": "PRODUCT CONSULTANT", + "fontFamily": "Space Grotesk", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "ConfigDesc", + "fill": "$text-secondary", + "content": "Powered by Gemini 2.0 Flash", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ConfigActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "TrainBtn", + "fill": "#A855F715", + "stroke": { + "thickness": 1, + "fill": "#A855F7" + }, + "gap": 6, + "padding": [ + 10, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrainIcon", + "width": 14, + "height": 14, + "iconFontName": "brain", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "TrainText", + "fill": "#A855F7", + "content": "TRAIN", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SaveBtn", + "fill": "$yellow-primary", + "gap": 6, + "padding": [ + 10, + 18 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SaveIcon", + "width": 14, + "height": 14, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "$bg-card" + }, + { + "type": "text", + "id": "SaveText", + "fill": "$bg-card", + "content": "SAVE", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ConfigBody", + "width": "fill_container", + "height": "fill_container", + "gap": 20, + "padding": 24, + "children": [ + { + "type": "frame", + "id": "SystemPrompt", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PromptHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PromptIcon", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "PromptTitle", + "fill": "$text-primary", + "content": "SYSTEM PROMPT", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PromptBody", + "width": "fill_container", + "height": "fill_container", + "padding": 16, + "children": [ + { + "type": "text", + "id": "PromptText", + "fill": "$text-secondary", + "content": "Bạn là trợ lý bán hàng chuyên nghiệp của GoodGo. Nhiệm vụ của bạn là:\n\n1. Chào đón khách hàng thân thiện\n2. Tư vấn sản phẩm phù hợp nhu cầu\n3. Trả lời câu hỏi về giá và tính năng\n4. Hướng dẫn đặt hàng\n\nLuôn giữ giọng điệu lịch sự, chuyên nghiệp và hữu ích.", + "lineHeight": 1.6, + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TrainingData", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TrainingHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 14, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TrainingLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrainingIcon", + "width": 14, + "height": 14, + "iconFontName": "database", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "TrainingTitle", + "fill": "$text-primary", + "content": "TRAINING DATA", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "UploadBtn", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 6, + "padding": [ + 6, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "UploadIcon", + "width": 12, + "height": 12, + "iconFontName": "upload", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "UploadText", + "fill": "$text-secondary", + "content": "UPLOAD", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TrainingBody", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 10, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "DataFile1", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": 12, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DF1Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DF1Icon", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DF1Name", + "fill": "$text-primary", + "content": "products.json", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "DF1Size", + "fill": "$text-tertiary", + "content": "2.4 MB", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "DataFile2", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": 12, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DF2Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DF2Icon", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DF2Name", + "fill": "$text-primary", + "content": "faq-responses.csv", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "DF2Size", + "fill": "$text-tertiary", + "content": "856 KB", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "DataFile3", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": 12, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DF3Left", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DF3Icon", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DF3Name", + "fill": "$text-primary", + "content": "chat-history.json", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "DF3Size", + "fill": "$text-tertiary", + "content": "5.1 MB", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TestPanel", + "width": 340, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TestHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TestIcon", + "width": 16, + "height": 16, + "iconFontName": "message-square", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "TestTitle", + "fill": "$text-primary", + "content": "TEST CHAT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TestMessages", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "UserMsg1", + "width": "fill_container", + "justifyContent": "end", + "children": [ + { + "type": "frame", + "id": "UserBubble1", + "fill": "$yellow-primary", + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 14 + ], + "children": [ + { + "type": "text", + "id": "UserText1", + "fill": "$bg-card", + "content": "Cho mình hỏi sản phẩm X giá bao nhiêu?", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "BotMsg1", + "width": "fill_container", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "BotAvatar", + "width": 28, + "height": 28, + "fill": "#A855F720", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BotAvatarIcon", + "width": 14, + "height": 14, + "iconFontName": "bot", + "iconFontFamily": "lucide", + "fill": "#A855F7" + } + ] + }, + { + "type": "frame", + "id": "BotBubble1", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 8, + "padding": [ + 10, + 14 + ], + "children": [ + { + "type": "text", + "id": "BotText1", + "fill": "$text-primary", + "content": "Chào bạn! 👋 Dạ sản phẩm X hiện đang có giá:\n\n• Size S: 250.000đ\n• Size M: 290.000đ\n• Size L: 350.000đ\n\nBạn muốn mình tư vấn thêm về sản phẩm không ạ?", + "lineHeight": 1.5, + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "BotInfo", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BotInfoIcon", + "width": 10, + "height": 10, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "BotInfoText", + "fill": "#A855F7", + "content": "Gemini 2.0", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TestInput", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TestInputField", + "width": "fill_container", + "height": 36, + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TestInputPlaceholder", + "fill": "$text-tertiary", + "content": "Test a message...", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TestSendBtn", + "width": 36, + "height": 36, + "fill": "$yellow-primary", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TestSendIcon", + "width": 16, + "height": 16, + "iconFontName": "send", + "iconFontFamily": "lucide", + "fill": "$bg-card" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#18181B" + }, + "bg-card": { + "type": "color", + "value": "#0F0F10" + }, + "yellow-primary": { + "type": "color", + "value": "#FACC15" + }, + "text-primary": { + "type": "color", + "value": "#FAFAFA" + }, + "text-secondary": { + "type": "color", + "value": "#71717A" + }, + "text-tertiary": { + "type": "color", + "value": "#52525B" + }, + "border": { + "type": "color", + "value": "#27272A" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#FACC15" + }, + "error": { + "type": "color", + "value": "#EF4444" + }, + "info": { + "type": "color", + "value": "#3B82F6" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/ai-content-studio.pen b/pencil-design/src/pages/tMarketing/ai-content-studio.pen new file mode 100644 index 00000000..82199605 --- /dev/null +++ b/pencil-design/src/pages/tMarketing/ai-content-studio.pen @@ -0,0 +1,259 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "AIContentStudioScreen", + "name": "Screen/AI Content Studio", + "reusable": true, + "width": 1280, + "height": 720, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, + "layout": "vertical", + "justifyContent": "space_between", + "padding": [24, 16], + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + {"type": "frame", "id": "LogoSection", "width": "fill_container", "padding": [0, 0, 16, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "JetBrains Mono", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "frame", "id": "NavHub", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavChat", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavCRM", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "03", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavAI", "width": "fill_container", "fill": "#FACC1515", "stroke": {"thickness": 1, "fill": "$yellow-primary", "align": "inside"}, "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavAINum", "fill": "$yellow-primary", "content": "04", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavAILabel", "fill": "$text-primary", "content": "AI STUDIO", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "NavStats", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "05", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + {"type": "frame", "id": "AICredits", "width": "fill_container", "fill": "#A855F715", "stroke": {"thickness": 1, "fill": "#A855F730"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "CreditsHeader", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CreditsIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, + {"type": "text", "id": "CreditsLabel", "fill": "#A855F7", "content": "AI CREDITS", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "CreditsValue", "fill": "$text-primary", "content": "450 / 500", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "CreditsBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ + {"type": "frame", "id": "CreditsFill", "width": "90%", "height": 4, "fill": "#A855F7"} + ]} + ]}, + {"type": "frame", "id": "AccountRow", "width": "fill_container", "padding": [20, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "horizontal", + "gap": 0, + "children": [ + {"type": "frame", "id": "ContentArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [32, 32], "gap": 24, "children": [ + {"type": "frame", "id": "PageHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "HeaderLeft", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PageTitle", "fill": "$text-primary", "content": "AI CONTENT STUDIO", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "PageSubtitle", "fill": "$text-secondary", "content": "Generate content with Google Gemini AI", "fontFamily": "JetBrains Mono", "fontSize": 13} + ]}, + {"type": "frame", "id": "HeaderActions", "gap": 12, "children": [ + {"type": "frame", "id": "DraftsBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DraftsIcon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "DraftsText", "fill": "$text-secondary", "content": "DRAFTS", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ScheduleBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ScheduleIcon", "width": 14, "height": 14, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "ScheduleText", "fill": "$text-secondary", "content": "SCHEDULE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "500"} + ]} + ]} + ]}, + {"type": "frame", "id": "ContentCalendar", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "CalendarHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "CalendarHeaderLeft", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CalendarIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "CalendarTitle", "fill": "$text-primary", "content": "CONTENT CALENDAR", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CalendarNav", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "CalendarPrev", "width": 28, "height": 28, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PrevIcon", "width": 14, "height": 14, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "CalendarMonth", "fill": "$text-primary", "content": "FEBRUARY 2026", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "CalendarNext", "width": 28, "height": 28, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NextIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]} + ]}, + {"type": "frame", "id": "CalendarDays", "width": "fill_container", "padding": [8, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 0, "children": [ + {"type": "frame", "id": "Day1", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day1Text", "fill": "$text-tertiary", "content": "SUN", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day2", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day2Text", "fill": "$text-tertiary", "content": "MON", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day3", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day3Text", "fill": "$text-tertiary", "content": "TUE", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day4", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day4Text", "fill": "$text-tertiary", "content": "WED", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day5", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day5Text", "fill": "$text-tertiary", "content": "THU", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day6", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day6Text", "fill": "$text-tertiary", "content": "FRI", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "Day7", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "Day7Text", "fill": "$text-tertiary", "content": "SAT", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "CalendarGrid", "width": "fill_container", "padding": [12, 20], "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Week1", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "Cell1", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell1Date", "fill": "$text-tertiary", "content": "1", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell2", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell2Date", "fill": "$text-tertiary", "content": "2", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell3", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell3Date", "fill": "$text-tertiary", "content": "3", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell4", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell4Date", "fill": "$text-tertiary", "content": "4", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell5", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell5Date", "fill": "$text-tertiary", "content": "5", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell6", "width": "fill_container", "height": 60, "fill": "#FACC1510", "stroke": {"thickness": 1, "fill": "$yellow-primary"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell6Date", "fill": "$yellow-primary", "content": "6", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, {"type": "text", "id": "Cell6Event", "fill": "$text-secondary", "content": "FB Post", "fontFamily": "JetBrains Mono", "fontSize": 9}]}, + {"type": "frame", "id": "Cell7", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell7Date", "fill": "$text-tertiary", "content": "7", "fontFamily": "JetBrains Mono", "fontSize": 11}]} + ]}, + {"type": "frame", "id": "Week2", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "Cell8", "width": "fill_container", "height": 60, "fill": "#3B82F610", "stroke": {"thickness": 1, "fill": "#3B82F6"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell8Date", "fill": "#3B82F6", "content": "8", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, {"type": "text", "id": "Cell8Event", "fill": "$text-secondary", "content": "IG Reel", "fontFamily": "JetBrains Mono", "fontSize": 9}]}, + {"type": "frame", "id": "Cell9", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell9Date", "fill": "$text-tertiary", "content": "9", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell10", "width": "fill_container", "height": 60, "fill": "#A855F710", "stroke": {"thickness": 1, "fill": "#A855F7"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell10Date", "fill": "#A855F7", "content": "10", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, {"type": "text", "id": "Cell10Event", "fill": "$text-secondary", "content": "AI Banner", "fontFamily": "JetBrains Mono", "fontSize": 9}]}, + {"type": "frame", "id": "Cell11", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell11Date", "fill": "$text-tertiary", "content": "11", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell12", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell12Date", "fill": "$text-tertiary", "content": "12", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell13", "width": "fill_container", "height": 60, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell13Date", "fill": "$text-tertiary", "content": "13", "fontFamily": "JetBrains Mono", "fontSize": 11}]}, + {"type": "frame", "id": "Cell14", "width": "fill_container", "height": 60, "fill": "#22C55E10", "stroke": {"thickness": 1, "fill": "#22C55E"}, "padding": 8, "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "Cell14Date", "fill": "#22C55E", "content": "14", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, {"type": "text", "id": "Cell14Event", "fill": "$text-secondary", "content": "Valentine", "fontFamily": "JetBrains Mono", "fontSize": 9}]} + ]} + ]} + ]}, + {"type": "frame", "id": "UpcomingPosts", "width": "fill_container", "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "UpcomingHeader", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "UpcomingIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "UpcomingTitle", "fill": "$text-primary", "content": "UPCOMING POSTS", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "UpcomingList", "width": "fill_container", "height": "fill_container", "padding": [12, 16], "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Post1", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Post1Date", "width": 48, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "text", "id": "Post1Day", "fill": "$yellow-primary", "content": "06", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "Post1Month", "fill": "$text-tertiary", "content": "FEB", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "frame", "id": "Post1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Post1Title", "fill": "$text-primary", "content": "Spring Collection Announcement", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Post1Platforms", "fill": "#3B82F6", "content": "FB • IG", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Post1Time", "fill": "$text-tertiary", "content": "10:00 AM", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "frame", "id": "Post2", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Post2Date", "width": 48, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "text", "id": "Post2Day", "fill": "#A855F7", "content": "10", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "Post2Month", "fill": "$text-tertiary", "content": "FEB", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "frame", "id": "Post2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Post2Title", "fill": "$text-primary", "content": "AI Generated Banner", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "Post2Badge", "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Post2AIIcon", "width": 10, "height": 10, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, + {"type": "text", "id": "Post2AIText", "fill": "#A855F7", "content": "GEMINI", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]} + ]}, + {"type": "text", "id": "Post2Time", "fill": "$text-tertiary", "content": "2:00 PM", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "AIPanel", "width": 380, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "AIPanelHeader", "width": "fill_container", "padding": [20, 24], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AIHeaderIcon", "width": 18, "height": 18, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, + {"type": "text", "id": "AIHeaderTitle", "fill": "$text-primary", "content": "AI GENERATION", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "AIPromptSection", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [ + {"type": "text", "id": "PromptLabel", "fill": "$text-secondary", "content": "PROMPT", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, + {"type": "frame", "id": "PromptInput", "width": "fill_container", "height": 100, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "children": [ + {"type": "text", "id": "PromptPlaceholder", "fill": "$text-tertiary", "content": "Describe the content you want to generate...", "fontFamily": "JetBrains Mono", "fontSize": 12} + ]}, + {"type": "text", "id": "StyleLabel", "fill": "$text-secondary", "content": "STYLE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, + {"type": "frame", "id": "StyleOptions", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "StylePro", "fill": "#A855F715", "stroke": {"thickness": 1, "fill": "#A855F7"}, "padding": [8, 12], "children": [{"type": "text", "id": "StyleProText", "fill": "#A855F7", "content": "PRO", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}]}, + {"type": "frame", "id": "StyleMinimal", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "children": [{"type": "text", "id": "StyleMinimalText", "fill": "$text-secondary", "content": "MINIMAL", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"}]}, + {"type": "frame", "id": "StyleVibrant", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "children": [{"type": "text", "id": "StyleVibrantText", "fill": "$text-secondary", "content": "VIBRANT", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"}]} + ]}, + {"type": "text", "id": "OutputLabel", "fill": "$text-secondary", "content": "OUTPUT", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, + {"type": "frame", "id": "OutputOptions", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "OutPost", "fill": "$yellow-primary", "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "OutPostIcon", "width": 12, "height": 12, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$bg-card"}, + {"type": "text", "id": "OutPostText", "fill": "$bg-card", "content": "POST", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "OutImage", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "OutImageIcon", "width": 12, "height": 12, "iconFontName": "image", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "OutImageText", "fill": "$text-secondary", "content": "IMAGE", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OutVideo", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "OutVideoIcon", "width": 12, "height": 12, "iconFontName": "video", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "OutVideoText", "fill": "$text-secondary", "content": "VIDEO", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "PreviewSection", "width": "fill_container", "height": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "text", "id": "PreviewLabel", "fill": "$text-secondary", "content": "PREVIEW", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"}, + {"type": "frame", "id": "PreviewBox", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "#A855F730", "align": "inside"}, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 8, "children": [ + {"type": "icon_font", "id": "PreviewAIIcon", "width": 32, "height": 32, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F730"}, + {"type": "text", "id": "PreviewEmpty", "fill": "$text-tertiary", "content": "AI preview will appear here", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "GenerateBtn", "width": "fill_container", "fill": "#A855F7", "padding": [16, 0], "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ + {"type": "icon_font", "id": "GenerateIcon", "width": 16, "height": 16, "iconFontName": "wand-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "GenerateText", "fill": "#FFFFFF", "content": "GENERATE WITH GEMINI", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#18181B"}, + "bg-card": {"type": "color", "value": "#0F0F10"}, + "yellow-primary": {"type": "color", "value": "#FACC15"}, + "text-primary": {"type": "color", "value": "#FAFAFA"}, + "text-secondary": {"type": "color", "value": "#71717A"}, + "text-tertiary": {"type": "color", "value": "#52525B"}, + "border": {"type": "color", "value": "#27272A"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#FACC15"}, + "error": {"type": "color", "value": "#EF4444"}, + "info": {"type": "color", "value": "#3B82F6"} + } +} diff --git a/pencil-design/src/pages/tMarketing/analytics-dashboard.pen b/pencil-design/src/pages/tMarketing/analytics-dashboard.pen new file mode 100644 index 00000000..2a4ee320 --- /dev/null +++ b/pencil-design/src/pages/tMarketing/analytics-dashboard.pen @@ -0,0 +1,1677 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "AnalyticsDashboardScreen", + "x": 0, + "y": 0, + "name": "Screen/Analytics Dashboard", + "reusable": true, + "clip": true, + "width": 1280, + "height": 802, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "align": "inside", + "thickness": 3, + "fill": "$yellow-primary" + }, + "layout": "vertical", + "padding": [ + 24, + 16 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "LogoSection", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 8, + "padding": [ + 0, + 0, + 16, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LogoMark", + "width": 32, + "height": 32, + "fill": "$yellow-primary", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoLetter", + "fill": "$bg-card", + "content": "M", + "fontFamily": "JetBrains Mono", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LogoText", + "fill": "$text-primary", + "content": "tMARKETING", + "fontFamily": "JetBrains Mono", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "NavSection", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "NavHub", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavHubNum", + "fill": "$text-tertiary", + "content": "01", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavHubLabel", + "fill": "$text-secondary", + "content": "HUB", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavChat", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavChatNum", + "fill": "$text-tertiary", + "content": "02", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavChatLabel", + "fill": "$text-secondary", + "content": "CHAT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavCRM", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavCRMNum", + "fill": "$text-tertiary", + "content": "03", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavCRMLabel", + "fill": "$text-secondary", + "content": "CRM", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavAI", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavAINum", + "fill": "$text-tertiary", + "content": "04", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavAILabel", + "fill": "$text-secondary", + "content": "AI STUDIO", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavStats", + "width": "fill_container", + "fill": "#FACC1515", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$yellow-primary" + }, + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavStatsNum", + "fill": "$yellow-primary", + "content": "05", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavStatsLabel", + "fill": "$text-primary", + "content": "ANALYTICS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "InsightBox", + "width": "fill_container", + "fill": "#22C55E15", + "stroke": { + "thickness": 1, + "fill": "#22C55E30" + }, + "layout": "vertical", + "gap": 8, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "InsightHeader", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "InsightIcon", + "width": 14, + "height": 14, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "InsightLabel", + "fill": "$success", + "content": "GROWING", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "InsightValue", + "fill": "$text-primary", + "content": "+24% vs last week", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "AccountRow", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 20, + 0, + 0, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Avatar", + "width": 32, + "height": 32, + "fill": "$border", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvatarText", + "fill": "$text-primary", + "content": "AD", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "UserName", + "fill": "$text-primary", + "content": "ADMIN", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "ChevronIcon", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": [ + 32, + 40 + ], + "children": [ + { + "type": "frame", + "id": "PageHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PageTitle", + "fill": "$text-primary", + "content": "ANALYTICS", + "fontFamily": "Space Grotesk", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PageSubtitle", + "fill": "$text-secondary", + "content": "AI-powered insights and performance metrics", + "fontFamily": "JetBrains Mono", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "HeaderActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "DateRange", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 8, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CalendarIcon", + "width": 14, + "height": 14, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "DateText", + "fill": "$text-secondary", + "content": "LAST 7 DAYS", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "DateArrow", + "width": 12, + "height": 12, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "ExportBtn", + "fill": "$yellow-primary", + "gap": 6, + "padding": [ + 10, + 18 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ExportIcon", + "width": 14, + "height": 14, + "iconFontName": "download", + "iconFontFamily": "lucide", + "fill": "$bg-card" + }, + { + "type": "text", + "id": "ExportText", + "fill": "$bg-card", + "content": "EXPORT", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPICards", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "KPIReach", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "KPIReachHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KPIReachLabel", + "fill": "$text-secondary", + "content": "TOTAL REACH", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "KPIReachIcon", + "width": 14, + "height": 14, + "iconFontName": "eye", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "KPIReachValue", + "fill": "$text-primary", + "content": "245.8K", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIReachChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIReachArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIReachPercent", + "fill": "$success", + "content": "+18.2%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIEngage", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "KPIEngageHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KPIEngageLabel", + "fill": "$text-secondary", + "content": "ENGAGEMENT", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "KPIEngageIcon", + "width": 14, + "height": 14, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "KPIEngageValue", + "fill": "$text-primary", + "content": "14.2%", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIEngageChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIEngageArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIEngagePercent", + "fill": "$success", + "content": "+5.4%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIConversions", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "KPIConversionsHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KPIConversionsLabel", + "fill": "$text-secondary", + "content": "CONVERSIONS", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "KPIConversionsIcon", + "width": 14, + "height": 14, + "iconFontName": "target", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "KPIConversionsValue", + "fill": "$text-primary", + "content": "1,842", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIConversionsChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIConversionsArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIConversionsPercent", + "fill": "$success", + "content": "+32.1%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIROI", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "KPIROIHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KPIROILabel", + "fill": "$text-secondary", + "content": "ROI", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "KPIROIIcon", + "width": 14, + "height": 14, + "iconFontName": "dollar-sign", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "text", + "id": "KPIROIValue", + "fill": "$yellow-primary", + "content": "324%", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIROIChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIROIArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIROIPercent", + "fill": "$success", + "content": "+48%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChartsRow", + "width": "fill_container", + "height": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "TrendChart", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TrendHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TrendHeaderLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TrendIcon", + "width": 16, + "height": 16, + "iconFontName": "trending-up", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "TrendTitle", + "fill": "$text-primary", + "content": "PERFORMANCE TREND", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "TrendLegend", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "LegendReach", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LegendReachDot", + "width": 8, + "height": 8, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "LegendReachText", + "fill": "$text-secondary", + "content": "REACH", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "LegendEngage", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LegendEngageDot", + "width": 8, + "height": 8, + "fill": "#3B82F6" + }, + { + "type": "text", + "id": "LegendEngageText", + "fill": "$text-secondary", + "content": "ENGAGE", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChartArea", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ChartBars", + "width": "fill_container", + "height": "fill_container", + "gap": 12, + "alignItems": "end", + "children": [ + { + "type": "frame", + "id": "Bar1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar1Fill", + "width": 24, + "height": 80, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar1Label", + "fill": "$text-tertiary", + "content": "MON", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar2Fill", + "width": 24, + "height": 100, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar2Label", + "fill": "$text-tertiary", + "content": "TUE", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar3Fill", + "width": 24, + "height": 65, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar3Label", + "fill": "$text-tertiary", + "content": "WED", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar4Fill", + "width": 24, + "height": 120, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar4Label", + "fill": "$text-tertiary", + "content": "THU", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar5Fill", + "width": 24, + "height": 140, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar5Label", + "fill": "$text-tertiary", + "content": "FRI", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar6", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar6Fill", + "width": 24, + "height": 110, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar6Label", + "fill": "$text-tertiary", + "content": "SAT", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Bar7", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Bar7Fill", + "width": 24, + "height": 90, + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Bar7Label", + "fill": "$text-tertiary", + "content": "SUN", + "fontFamily": "JetBrains Mono", + "fontSize": 9, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "AIInsights", + "width": 320, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "AIHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "AIIcon", + "width": 16, + "height": 16, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#A855F7" + }, + { + "type": "text", + "id": "AITitle", + "fill": "$text-primary", + "content": "AI INSIGHTS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "AIList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "Insight1", + "width": "fill_container", + "fill": "#22C55E10", + "stroke": { + "thickness": 1, + "fill": "#22C55E30" + }, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "Insight1Header", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Insight1Icon", + "width": 12, + "height": 12, + "iconFontName": "lightbulb", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "Insight1Label", + "fill": "$success", + "content": "OPPORTUNITY", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "Insight1Text", + "fill": "$text-primary", + "content": "Instagram engagement peaks at 6-8 PM. \nSchedule posts earlier.", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Insight2", + "width": "fill_container", + "fill": "#FACC1510", + "stroke": { + "thickness": 1, + "fill": "#FACC1530" + }, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "Insight2Header", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Insight2Icon", + "width": 12, + "height": 12, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "Insight2Label", + "fill": "$yellow-primary", + "content": "ACTION", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "Insight2Text", + "fill": "$text-primary", + "content": "Video content gets 3x more engagement. \nConsider Reels.", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Insight3", + "width": "fill_container", + "fill": "#3B82F610", + "stroke": { + "thickness": 1, + "fill": "#3B82F630" + }, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "Insight3Header", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Insight3Icon", + "width": 12, + "height": 12, + "iconFontName": "info", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + }, + { + "type": "text", + "id": "Insight3Label", + "fill": "#3B82F6", + "content": "TREND", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "Insight3Text", + "fill": "$text-primary", + "content": "Zalo shows fastest growth in VN market. \nIncrease focus.", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChannelPerformance", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ChannelHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 14, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ChannelIcon", + "width": 14, + "height": 14, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "ChannelTitle", + "fill": "$text-primary", + "content": "CHANNEL PERFORMANCE", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ChannelList", + "width": "fill_container", + "gap": 16, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "ChFB", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "ChFBTop", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "ChFBName", + "fill": "#3B82F6", + "content": "FACEBOOK", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ChFBValue", + "fill": "$text-primary", + "content": "45.2K", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ChFBBar", + "width": "fill_container", + "height": 4, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "ChFBFill", + "width": "fit_content(0)", + "height": 4, + "fill": "#3B82F6" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChIG", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "ChIGTop", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "ChIGName", + "fill": "#E1306C", + "content": "INSTAGRAM", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ChIGValue", + "fill": "$text-primary", + "content": "38.7K", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ChIGBar", + "width": "fill_container", + "height": 4, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "ChIGFill", + "width": "fit_content(0)", + "height": 4, + "fill": "#E1306C" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChZalo", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "ChZaloTop", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "ChZaloName", + "fill": "#0068FF", + "content": "ZALO", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ChZaloValue", + "fill": "$text-primary", + "content": "28.1K", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ChZaloBar", + "width": "fill_container", + "height": 4, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "ChZaloFill", + "width": "fit_content(0)", + "height": 4, + "fill": "#0068FF" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ChWA", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "ChWATop", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "ChWAName", + "fill": "#25D366", + "content": "WHATSAPP", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ChWAValue", + "fill": "$text-primary", + "content": "12.4K", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ChWABar", + "width": "fill_container", + "height": 4, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "ChWAFill", + "width": "fit_content(0)", + "height": 4, + "fill": "#25D366" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#18181B" + }, + "bg-card": { + "type": "color", + "value": "#0F0F10" + }, + "yellow-primary": { + "type": "color", + "value": "#FACC15" + }, + "text-primary": { + "type": "color", + "value": "#FAFAFA" + }, + "text-secondary": { + "type": "color", + "value": "#71717A" + }, + "text-tertiary": { + "type": "color", + "value": "#52525B" + }, + "border": { + "type": "color", + "value": "#27272A" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#FACC15" + }, + "error": { + "type": "color", + "value": "#EF4444" + }, + "info": { + "type": "color", + "value": "#3B82F6" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/chatbot-automation.pen b/pencil-design/src/pages/tMarketing/chatbot-automation.pen new file mode 100644 index 00000000..82a0e6e3 --- /dev/null +++ b/pencil-design/src/pages/tMarketing/chatbot-automation.pen @@ -0,0 +1,274 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ChatbotAutomationScreen", + "name": "Screen/Chatbot Automation", + "reusable": true, + "width": 1280, + "height": 720, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, + "layout": "vertical", + "justifyContent": "space_between", + "padding": [24, 16], + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + {"type": "frame", "id": "LogoSection", "width": "fill_container", "padding": [0, 0, 16, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "JetBrains Mono", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "frame", "id": "NavHub", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavChat", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavBot", "width": "fill_container", "fill": "#FACC1515", "stroke": {"thickness": 1, "fill": "$yellow-primary", "align": "inside"}, "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavBotNum", "fill": "$yellow-primary", "content": "03", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavBotLabel", "fill": "$text-primary", "content": "BOT", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "NavCRM", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "04", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavAI", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavAINum", "fill": "$text-tertiary", "content": "05", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavAILabel", "fill": "$text-secondary", "content": "AI STUDIO", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavStats", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "06", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + {"type": "frame", "id": "BotStatus", "width": "fill_container", "fill": "#22C55E15", "stroke": {"thickness": 1, "fill": "#22C55E30"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "BotHeader", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BotIcon", "width": 14, "height": 14, "iconFontName": "bot", "iconFontFamily": "lucide", "fill": "$success"}, + {"type": "text", "id": "BotLabel", "fill": "$success", "content": "BOT ACTIVE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "BotInfo", "fill": "$text-secondary", "content": "3 flows running", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "AccountRow", "width": "fill_container", "padding": [20, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "horizontal", + "gap": 0, + "children": [ + {"type": "frame", "id": "FlowList", "width": 280, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "FlowHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "FlowHeaderLeft", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FlowIcon", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "FlowTitle", "fill": "$text-primary", "content": "FLOWS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "AddFlowBtn", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddFlowIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$bg-card"} + ]} + ]}, + {"type": "frame", "id": "FlowItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "Flow1", "width": "fill_container", "fill": "#FACC1510", "stroke": {"thickness": 2, "fill": "$yellow-primary", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "Flow1Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ + {"type": "text", "id": "Flow1Name", "fill": "$text-primary", "content": "Welcome Message", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "Flow1StatusDot", "width": 8, "height": 8, "fill": "$success"} + ]}, + {"type": "text", "id": "Flow1Desc", "fill": "$text-secondary", "content": "Greet new customers", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Flow1Stats", "gap": 12, "children": [ + {"type": "text", "id": "Flow1Sent", "fill": "$text-tertiary", "content": "1.2K sent", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Flow1Rate", "fill": "$success", "content": "85% open", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "Flow2", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "Flow2Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ + {"type": "text", "id": "Flow2Name", "fill": "$text-primary", "content": "Product Inquiry", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "Flow2StatusDot", "width": 8, "height": 8, "fill": "$success"} + ]}, + {"type": "text", "id": "Flow2Desc", "fill": "$text-secondary", "content": "Handle product questions", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Flow2Stats", "gap": 12, "children": [ + {"type": "text", "id": "Flow2Sent", "fill": "$text-tertiary", "content": "890 sent", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Flow2Rate", "fill": "$success", "content": "72% open", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "Flow3", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "Flow3Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ + {"type": "text", "id": "Flow3Name", "fill": "$text-primary", "content": "Abandoned Cart", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "Flow3StatusDot", "width": 8, "height": 8, "fill": "$success"} + ]}, + {"type": "text", "id": "Flow3Desc", "fill": "$text-secondary", "content": "Recover lost sales", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Flow3Stats", "gap": 12, "children": [ + {"type": "text", "id": "Flow3Sent", "fill": "$text-tertiary", "content": "456 sent", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Flow3Rate", "fill": "$warning", "content": "28% conv", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "Flow4", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "Flow4Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ + {"type": "text", "id": "Flow4Name", "fill": "$text-primary", "content": "Order Update", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "frame", "id": "Flow4StatusDot", "width": 8, "height": 8, "fill": "$text-tertiary"} + ]}, + {"type": "text", "id": "Flow4Desc", "fill": "$text-secondary", "content": "Shipping notifications", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Flow4Stats", "gap": 12, "children": [ + {"type": "text", "id": "Flow4Sent", "fill": "$text-tertiary", "content": "Draft", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "FlowCanvas", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "CanvasHeader", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "CanvasHeaderLeft", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "CanvasTitle", "fill": "$text-primary", "content": "WELCOME MESSAGE", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "700"}, + {"type": "text", "id": "CanvasDesc", "fill": "$text-secondary", "content": "Trigger: New customer joins • 3 nodes", "fontFamily": "JetBrains Mono", "fontSize": 12} + ]}, + {"type": "frame", "id": "CanvasActions", "gap": 12, "children": [ + {"type": "frame", "id": "TestBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [10, 16], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TestIcon", "width": 14, "height": 14, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "TestText", "fill": "$text-secondary", "content": "TEST", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "PublishBtn", "fill": "$yellow-primary", "padding": [10, 18], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PublishIcon", "width": 14, "height": 14, "iconFontName": "rocket", "iconFontFamily": "lucide", "fill": "$bg-card"}, + {"type": "text", "id": "PublishText", "fill": "$bg-card", "content": "PUBLISH", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]} + ]} + ]}, + {"type": "frame", "id": "CanvasArea", "width": "fill_container", "height": "fill_container", "fill": "#0C0C0E", "padding": 40, "layout": "vertical", "gap": 0, "alignItems": "center", "justifyContent": "center", "children": [ + {"type": "frame", "id": "TriggerNode", "width": 280, "fill": "#22C55E15", "stroke": {"thickness": 2, "fill": "$success"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "TriggerHeader", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TriggerIcon", "width": 18, "height": 18, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}, + {"type": "text", "id": "TriggerLabel", "fill": "$success", "content": "TRIGGER", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "TriggerName", "fill": "$text-primary", "content": "New Customer Joins", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "TriggerDesc", "fill": "$text-secondary", "content": "When a customer sends first message", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "Connector1", "width": 2, "height": 32, "fill": "$border"}, + {"type": "frame", "id": "DelayNode", "width": 280, "fill": "#3B82F615", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "DelayHeader", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DelayIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}, + {"type": "text", "id": "DelayLabel", "fill": "#3B82F6", "content": "DELAY", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "DelayName", "fill": "$text-primary", "content": "Wait 2 seconds", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "DelayDesc", "fill": "$text-secondary", "content": "Make response feel natural", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "Connector2", "width": 2, "height": 32, "fill": "$border"}, + {"type": "frame", "id": "MessageNode", "width": 280, "fill": "#FACC1515", "stroke": {"thickness": 2, "fill": "$yellow-primary"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "MsgHeader", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "MsgIcon", "width": 18, "height": 18, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "MsgLabel", "fill": "$yellow-primary", "content": "SEND MESSAGE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "MsgName", "fill": "$text-primary", "content": "Welcome Greeting", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "MsgPreview", "fill": "$text-secondary", "content": "\"Xin chào! Cảm ơn bạn đã liên hệ...\"", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]} + ]} + ]}, + {"type": "frame", "id": "NodePanel", "width": 260, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "NodeHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NodePanelIcon", "width": 16, "height": 16, "iconFontName": "box", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "NodePanelTitle", "fill": "$text-primary", "content": "ADD NODE", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "NodeList", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "NodeTrigger", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "NodeTriggerIcon", "width": 32, "height": 32, "fill": "#22C55E20", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NTIcon", "width": 16, "height": 16, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"} + ]}, + {"type": "frame", "id": "NodeTriggerInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "NTName", "fill": "$text-primary", "content": "Trigger", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NTDesc", "fill": "$text-tertiary", "content": "Start flow", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "NodeMessage", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "NodeMsgIcon", "width": 32, "height": 32, "fill": "#FACC1520", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NMIcon", "width": 16, "height": 16, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"} + ]}, + {"type": "frame", "id": "NodeMsgInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "NMName", "fill": "$text-primary", "content": "Send Message", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NMDesc", "fill": "$text-tertiary", "content": "Text/Image/Video", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "NodeCondition", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "NodeCondIcon", "width": 32, "height": 32, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NCIcon", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "#A855F7"} + ]}, + {"type": "frame", "id": "NodeCondInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "NCName", "fill": "$text-primary", "content": "Condition", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NCDesc", "fill": "$text-tertiary", "content": "Branch logic", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "NodeDelay", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "NodeDelayIcon", "width": 32, "height": 32, "fill": "#3B82F620", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NDIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "NodeDelayInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "NDName", "fill": "$text-primary", "content": "Delay", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NDDesc", "fill": "$text-tertiary", "content": "Wait time", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "NodeAI", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "#A855F730"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "NodeAIIcon", "width": 32, "height": 32, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NAIcon", "width": 16, "height": 16, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"} + ]}, + {"type": "frame", "id": "NodeAIInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "NAName", "fill": "$text-primary", "content": "AI Response", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NADesc", "fill": "#A855F7", "content": "Gemini AI", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#18181B"}, + "bg-card": {"type": "color", "value": "#0F0F10"}, + "yellow-primary": {"type": "color", "value": "#FACC15"}, + "text-primary": {"type": "color", "value": "#FAFAFA"}, + "text-secondary": {"type": "color", "value": "#71717A"}, + "text-tertiary": {"type": "color", "value": "#52525B"}, + "border": {"type": "color", "value": "#27272A"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#FACC15"}, + "error": {"type": "color", "value": "#EF4444"}, + "info": {"type": "color", "value": "#3B82F6"} + } +} diff --git a/pencil-design/src/pages/tMarketing/customer-crm.pen b/pencil-design/src/pages/tMarketing/customer-crm.pen new file mode 100644 index 00000000..4388d917 --- /dev/null +++ b/pencil-design/src/pages/tMarketing/customer-crm.pen @@ -0,0 +1,293 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerCRMScreen", + "name": "Screen/Customer CRM", + "reusable": true, + "width": 1280, + "height": 720, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, + "layout": "vertical", + "justifyContent": "space_between", + "padding": [24, 16], + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + {"type": "frame", "id": "LogoSection", "width": "fill_container", "padding": [0, 0, 16, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "JetBrains Mono", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "frame", "id": "NavHub", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavChat", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavCRM", "width": "fill_container", "fill": "#FACC1515", "stroke": {"thickness": 1, "fill": "$yellow-primary", "align": "inside"}, "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavCRMNum", "fill": "$yellow-primary", "content": "03", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavCRMLabel", "fill": "$text-primary", "content": "CRM", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "NavAI", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavAINum", "fill": "$text-tertiary", "content": "04", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavAILabel", "fill": "$text-secondary", "content": "AI STUDIO", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavStats", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "05", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + {"type": "frame", "id": "StorageBox", "width": "fill_container", "fill": "#FACC1510", "stroke": {"thickness": 1, "fill": "#FACC1530"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "StorageHeader", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StorageIcon", "width": 14, "height": 14, "iconFontName": "database", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "StorageLabel", "fill": "$yellow-primary", "content": "STORAGE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "StorageValue", "fill": "$text-primary", "content": "2.4 GB / 10 GB", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "frame", "id": "StorageBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ + {"type": "frame", "id": "StorageFill", "width": "24%", "height": 4, "fill": "$yellow-primary"} + ]} + ]}, + {"type": "frame", "id": "AccountRow", "width": "fill_container", "padding": [20, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "padding": [32, 40], + "gap": 24, + "children": [ + {"type": "frame", "id": "PageHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "HeaderLeft", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PageTitle", "fill": "$text-primary", "content": "CUSTOMERS", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "700"}, + {"type": "text", "id": "PageSubtitle", "fill": "$text-secondary", "content": "Manage customer profiles for re-marketing campaigns", "fontFamily": "JetBrains Mono", "fontSize": 14} + ]}, + {"type": "frame", "id": "HeaderActions", "gap": 12, "children": [ + {"type": "frame", "id": "SearchBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [10, 14], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SearchIcon", "width": 14, "height": 14, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SearchText", "fill": "$text-secondary", "content": "SEARCH", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ExportBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [10, 14], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExportIcon", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "ExportText", "fill": "$text-secondary", "content": "EXPORT", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "AddBtn", "fill": "$yellow-primary", "padding": [10, 18], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PlusIcon", "width": 14, "height": 14, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$bg-card"}, + {"type": "text", "id": "AddText", "fill": "$bg-card", "content": "ADD", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]} + ]} + ]}, + {"type": "frame", "id": "KPICards", "width": "fill_container", "gap": 16, "children": [ + {"type": "frame", "id": "KPITotal", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "KPITotalLabel", "fill": "$text-secondary", "content": "TOTAL CUSTOMERS", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"}, + {"type": "frame", "id": "KPITotalRow", "justifyContent": "space_between", "alignItems": "end", "children": [ + {"type": "text", "id": "KPITotalValue", "fill": "$text-primary", "content": "12,456", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "KPITotalChange", "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KPITotalArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, + {"type": "text", "id": "KPITotalPercent", "fill": "$success", "content": "5%", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "KPIActive", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "KPIActiveLabel", "fill": "$text-secondary", "content": "ACTIVE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"}, + {"type": "frame", "id": "KPIActiveRow", "justifyContent": "space_between", "alignItems": "end", "children": [ + {"type": "text", "id": "KPIActiveValue", "fill": "$text-primary", "content": "4,892", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "KPIActiveChange", "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KPIActiveArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, + {"type": "text", "id": "KPIActivePercent", "fill": "$success", "content": "12%", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "KPINew", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "KPINewLabel", "fill": "$text-secondary", "content": "NEW TODAY", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"}, + {"type": "frame", "id": "KPINewRow", "justifyContent": "space_between", "alignItems": "end", "children": [ + {"type": "text", "id": "KPINewValue", "fill": "$text-primary", "content": "+342", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "KPINewBadge", "fill": "$info", "content": "NEW", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "KPISegments", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "KPISegmentsLabel", "fill": "$text-secondary", "content": "SEGMENTS", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"}, + {"type": "frame", "id": "KPISegmentsRow", "justifyContent": "space_between", "alignItems": "end", "children": [ + {"type": "text", "id": "KPISegmentsValue", "fill": "$text-primary", "content": "8", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "KPISegmentsDesc", "fill": "$text-tertiary", "content": "GROUPS", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "CustomerTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "TableHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "TableHeaderLeft", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TableIcon", "width": 16, "height": 16, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, + {"type": "text", "id": "TableTitle", "fill": "$text-primary", "content": "CUSTOMER LIST", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "TableActions", "gap": 8, "children": [ + {"type": "frame", "id": "FilterBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 10], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FilterIcon", "width": 12, "height": 12, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "FilterText", "fill": "$text-secondary", "content": "FILTERS", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"}, + {"type": "icon_font", "id": "FilterArrow", "width": 10, "height": 10, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]}, + {"type": "frame", "id": "TagsBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 10], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TagsIcon", "width": 12, "height": 12, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "TagsText", "fill": "$text-secondary", "content": "TAGS", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"}, + {"type": "icon_font", "id": "TagsArrow", "width": 10, "height": 10, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]}, + {"type": "frame", "id": "TableColumnHeaders", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "children": [ + {"type": "frame", "id": "ColCheck", "width": 32, "justifyContent": "center", "children": [ + {"type": "frame", "id": "CheckAll", "width": 16, "height": 16, "stroke": {"thickness": 1, "fill": "$border"}} + ]}, + {"type": "text", "id": "ColName", "width": "fill_container", "fill": "$text-secondary", "content": "NAME", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "ColPhone", "width": 140, "fill": "$text-secondary", "content": "PHONE", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "ColChannel", "width": 100, "fill": "$text-secondary", "content": "CHANNEL", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "ColScore", "width": 120, "fill": "$text-secondary", "content": "SCORE", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "ColActions", "width": 80, "fill": "$text-secondary", "content": "ACTIONS", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "TableBody", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "Row1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "alignItems": "center", "children": [ + {"type": "frame", "id": "Row1Check", "width": 32, "justifyContent": "center", "children": [ + {"type": "frame", "id": "Check1", "width": 16, "height": 16, "stroke": {"thickness": 1, "fill": "$border"}} + ]}, + {"type": "text", "id": "Row1Name", "width": "fill_container", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Row1Phone", "width": 140, "fill": "$text-secondary", "content": "0912 xxx xxx", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "text", "id": "Row1Channel", "width": 100, "fill": "#0068FF", "content": "ZALO", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "Row1Score", "width": 120, "fill": "$yellow-primary", "content": "★★★★☆", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "frame", "id": "Row1Actions", "width": 80, "gap": 8, "children": [ + {"type": "icon_font", "id": "Row1View", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "icon_font", "id": "Row1Edit", "width": 14, "height": 14, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "Row2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "alignItems": "center", "children": [ + {"type": "frame", "id": "Row2Check", "width": 32, "justifyContent": "center", "children": [ + {"type": "frame", "id": "Check2", "width": 16, "height": 16, "stroke": {"thickness": 1, "fill": "$border"}} + ]}, + {"type": "text", "id": "Row2Name", "width": "fill_container", "fill": "$text-primary", "content": "Trần Thị B", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Row2Phone", "width": 140, "fill": "$text-secondary", "content": "0987 xxx xxx", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "text", "id": "Row2Channel", "width": 100, "fill": "#3B82F6", "content": "FB", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "Row2Score", "width": 120, "fill": "$yellow-primary", "content": "★★★☆☆", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "frame", "id": "Row2Actions", "width": 80, "gap": 8, "children": [ + {"type": "icon_font", "id": "Row2View", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "icon_font", "id": "Row2Edit", "width": 14, "height": 14, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "Row3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "alignItems": "center", "children": [ + {"type": "frame", "id": "Row3Check", "width": 32, "justifyContent": "center", "children": [ + {"type": "frame", "id": "Check3", "width": 16, "height": 16, "stroke": {"thickness": 1, "fill": "$border"}} + ]}, + {"type": "text", "id": "Row3Name", "width": "fill_container", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Row3Phone", "width": 140, "fill": "$text-secondary", "content": "0909 xxx xxx", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "text", "id": "Row3Channel", "width": 100, "fill": "#E1306C", "content": "IG", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "Row3Score", "width": 120, "fill": "$yellow-primary", "content": "★★★★★", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "frame", "id": "Row3Actions", "width": 80, "gap": 8, "children": [ + {"type": "icon_font", "id": "Row3View", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "icon_font", "id": "Row3Edit", "width": 14, "height": 14, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "Row4", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [ + {"type": "frame", "id": "Row4Check", "width": 32, "justifyContent": "center", "children": [ + {"type": "frame", "id": "Check4", "width": 16, "height": 16, "stroke": {"thickness": 1, "fill": "$border"}} + ]}, + {"type": "text", "id": "Row4Name", "width": "fill_container", "fill": "$text-primary", "content": "Phạm Thị D", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Row4Phone", "width": 140, "fill": "$text-secondary", "content": "0888 xxx xxx", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "text", "id": "Row4Channel", "width": 100, "fill": "#25D366", "content": "WA", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "text", "id": "Row4Score", "width": 120, "fill": "$yellow-primary", "content": "★★☆☆☆", "fontFamily": "JetBrains Mono", "fontSize": 12}, + {"type": "frame", "id": "Row4Actions", "width": 80, "gap": 8, "children": [ + {"type": "icon_font", "id": "Row4View", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "icon_font", "id": "Row4Edit", "width": 14, "height": 14, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "Footer", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "BulkActions", "gap": 8, "children": [ + {"type": "frame", "id": "BulkEmail", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BulkEmailIcon", "width": 14, "height": 14, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "BulkEmailText", "fill": "$text-secondary", "content": "EMAIL", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "BulkSMS", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BulkSMSIcon", "width": 14, "height": 14, "iconFontName": "smartphone", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "BulkSMSText", "fill": "$text-secondary", "content": "SMS", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "BulkCampaign", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BulkCampaignIcon", "width": 14, "height": 14, "iconFontName": "target", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "BulkCampaignText", "fill": "$text-secondary", "content": "CAMPAIGN", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "BulkExport", "fill": "$yellow-primary", "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BulkExportIcon", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$bg-card"}, + {"type": "text", "id": "BulkExportText", "fill": "$bg-card", "content": "EXPORT ALL", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Pagination", "gap": 8, "children": [ + {"type": "frame", "id": "Page1", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Page1Text", "fill": "$bg-card", "content": "01", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Page2", "width": 32, "height": 32, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Page2Text", "fill": "$text-secondary", "content": "02", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Page3", "width": 32, "height": 32, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Page3Text", "fill": "$text-secondary", "content": "03", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "PageNext", "width": 32, "height": 32, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PageNextIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#18181B"}, + "bg-card": {"type": "color", "value": "#0F0F10"}, + "yellow-primary": {"type": "color", "value": "#FACC15"}, + "text-primary": {"type": "color", "value": "#FAFAFA"}, + "text-secondary": {"type": "color", "value": "#71717A"}, + "text-tertiary": {"type": "color", "value": "#52525B"}, + "border": {"type": "color", "value": "#27272A"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#FACC15"}, + "error": {"type": "color", "value": "#EF4444"}, + "info": {"type": "color", "value": "#3B82F6"} + } +} diff --git a/pencil-design/src/pages/tMarketing/livechat-console.pen b/pencil-design/src/pages/tMarketing/livechat-console.pen new file mode 100644 index 00000000..de5a707a --- /dev/null +++ b/pencil-design/src/pages/tMarketing/livechat-console.pen @@ -0,0 +1,276 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "LivechatScreen", + "name": "Screen/Livechat Console", + "reusable": true, + "width": 1280, + "height": 720, + "fill": "$bg-page", + "layout": "horizontal", + "clip": true, + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, + "layout": "vertical", + "justifyContent": "space_between", + "padding": [24, 16], + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + {"type": "frame", "id": "LogoSection", "width": "fill_container", "padding": [0, 0, 16, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "JetBrains Mono", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "frame", "id": "NavHub", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavChat", "width": "fill_container", "fill": "#FACC1515", "stroke": {"thickness": 1, "fill": "$yellow-primary", "align": "inside"}, "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavChatNum", "fill": "$yellow-primary", "content": "02", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavChatLabel", "fill": "$text-primary", "content": "CHAT", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "NavCRM", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "03", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavAI", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavAINum", "fill": "$text-tertiary", "content": "04", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavAILabel", "fill": "$text-secondary", "content": "AI STUDIO", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "NavStats", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "05", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + {"type": "frame", "id": "AgentStatus", "width": "fill_container", "fill": "#22C55E15", "stroke": {"thickness": 1, "fill": "#22C55E30"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "AgentHeader", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "AgentDot", "width": 8, "height": 8, "fill": "$success"}, + {"type": "text", "id": "AgentLabel", "fill": "$success", "content": "ONLINE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "text", "id": "AgentInfo", "fill": "$text-secondary", "content": "5 active conversations", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "AccountRow", "width": "fill_container", "padding": [20, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]}, + {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"}, + {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ] + } + ] + }, + { + "type": "frame", + "id": "ConversationList", + "width": 300, + "height": "fill_container", + "fill": "$bg-card", + "stroke": {"thickness": 1, "fill": "$border"}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "ConvHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "ConvTitle", "fill": "$text-primary", "content": "CONVERSATIONS", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "700"}, + {"type": "frame", "id": "ConvActions", "gap": 8, "children": [ + {"type": "frame", "id": "FilterConv", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "FilterConvText", "fill": "$text-secondary", "content": "ALL", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "600"}, + {"type": "icon_font", "id": "FilterConvIcon", "width": 10, "height": 10, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]}, + {"type": "frame", "id": "SearchConv", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 4, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SearchConvIcon", "width": 12, "height": 12, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]}, + {"type": "frame", "id": "ConvList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "Conv1", "width": "fill_container", "fill": "#FACC1510", "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Conv1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv1Left", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv1Dot", "width": 8, "height": 8, "fill": "$success"}, + {"type": "text", "id": "Conv1Name", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Conv1Time", "fill": "$text-tertiary", "content": "2m", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "text", "id": "Conv1Preview", "fill": "$text-secondary", "content": "\"Tôi muốn hỏi về sản phẩm...\"", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Conv1Channel", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Conv1Via", "fill": "$text-tertiary", "content": "via", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Conv1Platform", "fill": "#0068FF", "content": "ZALO", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Conv2", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Conv2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv2Left", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv2Dot", "width": 8, "height": 8, "fill": "$warning"}, + {"type": "text", "id": "Conv2Name", "fill": "$text-primary", "content": "Trần Thị B", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Conv2Time", "fill": "$text-tertiary", "content": "5m", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "text", "id": "Conv2Preview", "fill": "$text-secondary", "content": "\"Giá bao nhiêu vậy shop?\"", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Conv2Channel", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Conv2Via", "fill": "$text-tertiary", "content": "via", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Conv2Platform", "fill": "#3B82F6", "content": "FB", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Conv3", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Conv3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv3Left", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv3Dot", "width": 8, "height": 8, "fill": "$text-tertiary"}, + {"type": "text", "id": "Conv3Name", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Conv3Time", "fill": "$text-tertiary", "content": "12m", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "text", "id": "Conv3Preview", "fill": "$text-secondary", "content": "\"Cảm ơn shop nhé!\"", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Conv3Channel", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Conv3Via", "fill": "$text-tertiary", "content": "via", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Conv3Platform", "fill": "#E1306C", "content": "IG", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Conv4", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Conv4Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv4Left", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Conv4Dot", "width": 8, "height": 8, "fill": "$success"}, + {"type": "text", "id": "Conv4Name", "fill": "$text-primary", "content": "+84912xxx", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Conv4Time", "fill": "$text-tertiary", "content": "15m", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]}, + {"type": "text", "id": "Conv4Preview", "fill": "$text-secondary", "content": "\"Hi, I want to order...\"", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "frame", "id": "Conv4Channel", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Conv4Via", "fill": "$text-tertiary", "content": "via", "fontFamily": "JetBrains Mono", "fontSize": 10}, + {"type": "text", "id": "Conv4Platform", "fill": "#25D366", "content": "WA", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ChatArea", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "ChatHeader", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "ChatHeaderLeft", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "CustomerAvatar", "width": 40, "height": 40, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "CustomerInitial", "fill": "$bg-card", "content": "NA", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CustomerInfo", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "CustomerName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "700"}, + {"type": "frame", "id": "CustomerMeta", "gap": 12, "children": [ + {"type": "frame", "id": "CustomerChannel", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "ChannelLabel", "fill": "$text-tertiary", "content": "via", "fontFamily": "JetBrains Mono", "fontSize": 11}, + {"type": "text", "id": "ChannelValue", "fill": "#0068FF", "content": "ZALO", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CustomerLocation", "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LocationIcon", "width": 12, "height": 12, "iconFontName": "map-pin", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "LocationText", "fill": "$text-secondary", "content": "TP. Hồ Chí Minh", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "ChatHeaderActions", "gap": 12, "children": [ + {"type": "frame", "id": "ViewProfileBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ProfileIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "ProfileText", "fill": "$text-secondary", "content": "PROFILE", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "MoreBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "MoreIcon", "width": 14, "height": 14, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]} + ]}, + {"type": "frame", "id": "ChatMessages", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 16, "children": [ + {"type": "frame", "id": "MsgCustomer1", "width": "fill_container", "children": [ + {"type": "frame", "id": "MsgBubble1", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [12, 16], "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "MsgText1", "fill": "$text-primary", "content": "Xin chào shop!", "fontFamily": "JetBrains Mono", "fontSize": 13}, + {"type": "text", "id": "MsgTime1", "fill": "$text-tertiary", "content": "10:30 AM", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "MsgAgent1", "width": "fill_container", "justifyContent": "end", "children": [ + {"type": "frame", "id": "MsgBubbleAgent1", "fill": "$yellow-primary", "padding": [12, 16], "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "MsgTextAgent1", "fill": "$bg-card", "content": "Dạ chào anh/chị! Em có thể giúp gì ạ?", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "MsgTimeAgent1", "fill": "$bg-page", "content": "10:31 AM", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "MsgCustomer2", "width": "fill_container", "children": [ + {"type": "frame", "id": "MsgBubble2", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [12, 16], "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "MsgText2", "fill": "$text-primary", "content": "Tôi muốn hỏi về sản phẩm X có còn hàng không ạ?", "fontFamily": "JetBrains Mono", "fontSize": 13}, + {"type": "text", "id": "MsgTime2", "fill": "$text-tertiary", "content": "10:32 AM", "fontFamily": "JetBrains Mono", "fontSize": 10} + ]} + ]}, + {"type": "frame", "id": "TypingIndicator", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "TypingDot1", "width": 6, "height": 6, "fill": "$text-tertiary"}, + {"type": "frame", "id": "TypingDot2", "width": 6, "height": 6, "fill": "$text-tertiary"}, + {"type": "frame", "id": "TypingDot3", "width": 6, "height": 6, "fill": "$text-tertiary"}, + {"type": "text", "id": "TypingText", "fill": "$text-tertiary", "content": "Customer is typing...", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "QuickReplies", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": [12, 24], "gap": 8, "children": [ + {"type": "text", "id": "QuickLabel", "fill": "$text-tertiary", "content": "QUICK:", "fontFamily": "JetBrains Mono", "fontSize": 10, "fontWeight": "700"}, + {"type": "frame", "id": "Quick1", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 12], "children": [ + {"type": "text", "id": "Quick1Text", "fill": "$text-secondary", "content": "Xin chào!", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "Quick2", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 12], "children": [ + {"type": "text", "id": "Quick2Text", "fill": "$text-secondary", "content": "Cảm ơn", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "Quick3", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 12], "children": [ + {"type": "text", "id": "Quick3Text", "fill": "$text-secondary", "content": "Đang kiểm tra", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]}, + {"type": "frame", "id": "Quick4", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [6, 12], "children": [ + {"type": "text", "id": "Quick4Text", "fill": "$text-secondary", "content": "Liên hệ CSKH", "fontFamily": "JetBrains Mono", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "MessageInput", "width": "fill_container", "fill": "$bg-card", "padding": [16, 24], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "AttachBtn", "width": 40, "height": 40, "stroke": {"thickness": 1, "fill": "$border"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AttachIcon", "width": 18, "height": 18, "iconFontName": "paperclip", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "frame", "id": "InputField", "width": "fill_container", "height": 40, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [0, 16], "alignItems": "center", "children": [ + {"type": "text", "id": "InputPlaceholder", "fill": "$text-tertiary", "content": "Type your message...", "fontFamily": "JetBrains Mono", "fontSize": 13} + ]}, + {"type": "frame", "id": "SendBtn", "width": 40, "height": 40, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SendIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$bg-card"} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-page": {"type": "color", "value": "#18181B"}, + "bg-card": {"type": "color", "value": "#0F0F10"}, + "yellow-primary": {"type": "color", "value": "#FACC15"}, + "text-primary": {"type": "color", "value": "#FAFAFA"}, + "text-secondary": {"type": "color", "value": "#71717A"}, + "text-tertiary": {"type": "color", "value": "#52525B"}, + "border": {"type": "color", "value": "#27272A"}, + "success": {"type": "color", "value": "#22C55E"}, + "warning": {"type": "color", "value": "#FACC15"}, + "error": {"type": "color", "value": "#EF4444"}, + "info": {"type": "color", "value": "#3B82F6"} + } +} diff --git a/pencil-design/src/pages/tMarketing/social-hub.pen b/pencil-design/src/pages/tMarketing/social-hub.pen new file mode 100644 index 00000000..51eed3df --- /dev/null +++ b/pencil-design/src/pages/tMarketing/social-hub.pen @@ -0,0 +1,1646 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "SocialHubScreen", + "x": 0, + "y": 0, + "name": "Screen/Social Hub", + "reusable": true, + "clip": true, + "width": 1280, + "height": 920, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "Sidebar", + "width": 240, + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "align": "inside", + "thickness": 3, + "fill": "$yellow-primary" + }, + "layout": "vertical", + "padding": [ + 24, + 16 + ], + "justifyContent": "space_between", + "children": [ + { + "type": "frame", + "id": "SidebarTop", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "LogoSection", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 8, + "padding": [ + 0, + 0, + 16, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LogoMark", + "width": 32, + "height": 32, + "fill": "$yellow-primary", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LogoLetter", + "fill": "$bg-card", + "content": "M", + "fontFamily": "JetBrains Mono", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LogoText", + "fill": "$text-primary", + "content": "tMARKETING", + "fontFamily": "JetBrains Mono", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "NavSection", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "NavHub", + "width": "fill_container", + "fill": "#FACC1515", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$yellow-primary" + }, + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavHubNum", + "fill": "$yellow-primary", + "content": "01", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavHubLabel", + "fill": "$text-primary", + "content": "HUB", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NavChat", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavChatNum", + "fill": "$text-tertiary", + "content": "02", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavChatLabel", + "fill": "$text-secondary", + "content": "CHAT", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavCRM", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavCRMNum", + "fill": "$text-tertiary", + "content": "03", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavCRMLabel", + "fill": "$text-secondary", + "content": "CRM", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavAI", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavAINum", + "fill": "$text-tertiary", + "content": "04", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavAILabel", + "fill": "$text-secondary", + "content": "AI STUDIO", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NavStats", + "width": "fill_container", + "gap": 10, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NavStatsNum", + "fill": "$text-tertiary", + "content": "05", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "NavStatsLabel", + "fill": "$text-secondary", + "content": "ANALYTICS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SidebarBottom", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "MetricsBox", + "width": "fill_container", + "fill": "#FACC1510", + "stroke": { + "thickness": 1, + "fill": "#FACC1530" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "MetricsHeader", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MetricsIcon", + "width": 14, + "height": 14, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "MetricsLabel", + "fill": "$yellow-primary", + "content": "REACH TODAY", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "MetricsValue", + "fill": "$text-primary", + "content": "45.2K", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "AccountRow", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 20, + 0, + 0, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Avatar", + "width": 32, + "height": 32, + "fill": "$border", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AvatarText", + "fill": "$text-primary", + "content": "AD", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "UserName", + "fill": "$text-primary", + "content": "ADMIN", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "ChevronIcon", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MainContent", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "gap": 24, + "padding": [ + 32, + 40 + ], + "children": [ + { + "type": "frame", + "id": "PageHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "HeaderLeft", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "PageTitle", + "fill": "$text-primary", + "content": "SOCIAL HUB", + "fontFamily": "Space Grotesk", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "PageSubtitle", + "fill": "$text-secondary", + "content": "Manage all your social media channels in one place", + "fontFamily": "JetBrains Mono", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "HeaderActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SearchBtn", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 8, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SearchIcon", + "width": 14, + "height": 14, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SearchText", + "fill": "$text-secondary", + "content": "SEARCH", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "NewPostBtn", + "fill": "$yellow-primary", + "gap": 6, + "padding": [ + 10, + 18 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PlusIcon", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$bg-card" + }, + { + "type": "text", + "id": "NewPostText", + "fill": "$bg-card", + "content": "NEW POST", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "TopRow", + "width": "fill_container", + "gap": 20, + "children": [ + { + "type": "frame", + "id": "PlatformStatus", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PlatformHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PlatformIcon", + "width": 16, + "height": 16, + "iconFontName": "globe", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "PlatformTitle", + "fill": "$text-primary", + "content": "PLATFORM STATUS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PlatformList", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "PlatformFB", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatformFBLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FBDot", + "width": 8, + "height": 8, + "fill": "$success" + }, + { + "type": "text", + "id": "FBName", + "fill": "$text-primary", + "content": "Facebook", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "FBStatus", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PlatformIG", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatformIGLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IGDot", + "width": 8, + "height": 8, + "fill": "$success" + }, + { + "type": "text", + "id": "IGName", + "fill": "$text-primary", + "content": "Instagram", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "IGStatus", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PlatformZalo", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatformZaloLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ZaloDot", + "width": 8, + "height": 8, + "fill": "$success" + }, + { + "type": "text", + "id": "ZaloName", + "fill": "$text-primary", + "content": "Zalo OA", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "ZaloStatus", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PlatformX", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatformXLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "XDot", + "width": 8, + "height": 8, + "fill": "$warning" + }, + { + "type": "text", + "id": "XName", + "fill": "$text-primary", + "content": "X (Twitter)", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "XStatus", + "fill": "$warning", + "content": "PENDING", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "PlatformWA", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PlatformWALeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "WADot", + "width": 8, + "height": 8, + "fill": "$success" + }, + { + "type": "text", + "id": "WAName", + "fill": "$text-primary", + "content": "WhatsApp", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "WAStatus", + "fill": "$success", + "content": "ACTIVE", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuickActions", + "width": 280, + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ActionsHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionsIcon", + "width": 16, + "height": 16, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "ActionsTitle", + "fill": "$text-primary", + "content": "QUICK ACTIONS", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "ActionsList", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "ActionPost", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionPostIcon", + "width": 14, + "height": 14, + "iconFontName": "edit-3", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ActionPostText", + "fill": "$text-primary", + "content": "CREATE POST", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ActionStats", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionStatsIcon", + "width": 14, + "height": 14, + "iconFontName": "bar-chart-2", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ActionStatsText", + "fill": "$text-primary", + "content": "VIEW STATS", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ActionReply", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionReplyIcon", + "width": 14, + "height": 14, + "iconFontName": "message-circle", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ActionReplyText", + "fill": "$text-primary", + "content": "REPLY ALL", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ActionSchedule", + "width": "fill_container", + "fill": "$bg-page", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 10, + "padding": [ + 10, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ActionScheduleIcon", + "width": 14, + "height": 14, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ActionScheduleText", + "fill": "$text-primary", + "content": "SCHEDULE", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "UnifiedFeed", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "FeedHeader", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FeedHeaderLeft", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FeedIcon", + "width": 16, + "height": 16, + "iconFontName": "rss", + "iconFontFamily": "lucide", + "fill": "$yellow-primary" + }, + { + "type": "text", + "id": "FeedTitle", + "fill": "$text-primary", + "content": "UNIFIED FEED", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FeedActions", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "FilterBtn", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "gap": 6, + "padding": [ + 6, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FilterText", + "fill": "$text-secondary", + "content": "ALL", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "FilterArrow", + "width": 12, + "height": 12, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "RefreshBtn", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "padding": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RefreshIcon", + "width": 14, + "height": 14, + "iconFontName": "refresh-cw", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FeedList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": 16, + "children": [ + { + "type": "frame", + "id": "FeedItem1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 12, + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Indicator1", + "width": 3, + "height": 36, + "fill": "#3B82F6" + }, + { + "type": "frame", + "id": "FeedContent1", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FeedTitle1", + "fill": "$text-primary", + "content": "@customer1 commented on your post", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FeedDesc1", + "fill": "$text-secondary", + "content": "\"Great product! Love it!\"", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "FeedBadge1", + "fill": "#3B82F6", + "content": "FB", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FeedItem2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 12, + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Indicator2", + "width": 3, + "height": 36, + "fill": "#E1306C" + }, + { + "type": "frame", + "id": "FeedContent2", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FeedTitle2", + "fill": "$text-primary", + "content": "@user123 liked your post", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FeedDesc2", + "fill": "$text-secondary", + "content": "Spring Collection 2026 announcement", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "FeedBadge2", + "fill": "#E1306C", + "content": "IG", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FeedItem3", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border" + }, + "gap": 12, + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Indicator3", + "width": 3, + "height": 36, + "fill": "#0068FF" + }, + { + "type": "frame", + "id": "FeedContent3", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FeedTitle3", + "fill": "$text-primary", + "content": "Khách hàng gửi tin nhắn mới", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FeedDesc3", + "fill": "$text-secondary", + "content": "\"Cho mình hỏi giá sản phẩm X...\"", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "FeedBadge3", + "fill": "#0068FF", + "content": "ZALO", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "FeedItem4", + "width": "fill_container", + "gap": 12, + "padding": [ + 12, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Indicator4", + "width": 3, + "height": 36, + "fill": "#25D366" + }, + { + "type": "frame", + "id": "FeedContent4", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FeedTitle4", + "fill": "$text-primary", + "content": "+84912xxx sent a message", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FeedDesc4", + "fill": "$text-secondary", + "content": "\"Hi, I want to order...\"", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "FeedBadge4", + "fill": "#25D366", + "content": "WA", + "fontFamily": "JetBrains Mono", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPICards", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "KPIReach", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "KPIReachLabel", + "fill": "$text-secondary", + "content": "TOTAL REACH", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "KPIReachValue", + "fill": "$text-primary", + "content": "45.2K", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIReachChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIReachArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIReachPercent", + "fill": "$success", + "content": "12.5%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIEngage", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "KPIEngageLabel", + "fill": "$text-secondary", + "content": "ENGAGEMENT", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "KPIEngageValue", + "fill": "$text-primary", + "content": "12.8%", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIEngageChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIEngageArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIEngagePercent", + "fill": "$success", + "content": "8.2%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIFollowers", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "KPIFollowersLabel", + "fill": "$text-secondary", + "content": "NEW FOLLOWERS", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "KPIFollowersValue", + "fill": "$text-primary", + "content": "+1.2K", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIFollowersChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIFollowersArrow", + "width": 12, + "height": 12, + "iconFontName": "arrow-up-right", + "iconFontFamily": "lucide", + "fill": "$success" + }, + { + "type": "text", + "id": "KPIFollowersPercent", + "fill": "$success", + "content": "24.1%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KPIMessages", + "width": "fill_container", + "fill": "$bg-card", + "stroke": { + "thickness": 1, + "fill": "$border" + }, + "layout": "vertical", + "gap": 12, + "padding": 20, + "children": [ + { + "type": "text", + "id": "KPIMessagesLabel", + "fill": "$text-secondary", + "content": "MESSAGES", + "fontFamily": "JetBrains Mono", + "fontSize": 11, + "fontWeight": "600" + }, + { + "type": "text", + "id": "KPIMessagesValue", + "fill": "$text-primary", + "content": "234", + "fontFamily": "Space Grotesk", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "KPIMessagesChange", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KPIMessagesArrow", + "width": 12, + "height": 12, + "iconFontName": "minus", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "KPIMessagesPercent", + "fill": "$text-tertiary", + "content": "0.0%", + "fontFamily": "JetBrains Mono", + "fontSize": 12, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { + "type": "color", + "value": "#18181B" + }, + "bg-card": { + "type": "color", + "value": "#0F0F10" + }, + "yellow-primary": { + "type": "color", + "value": "#FACC15" + }, + "text-primary": { + "type": "color", + "value": "#FAFAFA" + }, + "text-secondary": { + "type": "color", + "value": "#71717A" + }, + "text-tertiary": { + "type": "color", + "value": "#52525B" + }, + "border": { + "type": "color", + "value": "#27272A" + }, + "success": { + "type": "color", + "value": "#22C55E" + }, + "warning": { + "type": "color", + "value": "#FACC15" + }, + "error": { + "type": "color", + "value": "#EF4444" + }, + "info": { + "type": "color", + "value": "#3B82F6" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/coupon-redeem.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/coupon-redeem.pen new file mode 100644 index 00000000..be9e8471 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/coupon-redeem.pen @@ -0,0 +1,92 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CouponRedeemDialog", + "name": "Dialog/CouponRedeem", + "reusable": true, + "width": 400, + "height": 480, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CouponContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [28, 24], + "children": [ + {"type": "frame", "id": "CouponIconWrap", "width": "fill_container", "justifyContent": "center", "children": [ + {"type": "frame", "id": "CouponIconBg", "width": 72, "height": 72, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC489920", "position": 0}, {"color": "#F472B615", "position": 1}]}, "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "CouponIconInner", "width": 52, "height": 52, "fill": "#EC489920", "cornerRadius": 26, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CouponIcon", "width": 28, "height": 28, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#EC4899"} + ]} + ]} + ]}, + {"type": "frame", "id": "CouponTitle", "width": "fill_container", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "CouponTitleText", "fill": "$text-primary", "content": "Đổi Mã Coupon", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"}, + {"type": "text", "id": "CouponSubtitle", "fill": "$text-tertiary", "content": "Nhập mã để áp dụng ưu đãi", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"} + ]}, + {"type": "frame", "id": "CouponInput", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CouponInputIcon", "width": 22, "height": 22, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "CouponInputVal", "fill": "$text-primary", "content": "SUMMER2026", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700", "letterSpacing": 2, "width": "fill_container"} + ]}, + {"type": "frame", "id": "CouponResult", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 14, "padding": 16, "gap": 12, "layout": "vertical", "children": [ + {"type": "frame", "id": "ResultHeader", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ResultIcon", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "ResultTitle", "fill": "#22C55E", "content": "Mã hợp lệ!", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "ResultDetails", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ + {"type": "frame", "id": "ResultRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ResultLabel1", "fill": "$text-secondary", "content": "Ưu đãi", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "ResultValue1", "fill": "#EC4899", "content": "Giảm 50,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "ResultRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ResultLabel2", "fill": "$text-secondary", "content": "Đơn tối thiểu", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "ResultValue2", "fill": "$text-primary", "content": "100,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ResultRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ResultLabel3", "fill": "$text-secondary", "content": "Hết hạn", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "ResultValue3", "fill": "$text-primary", "content": "31/03/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "CouponFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 24], + "children": [ + {"type": "frame", "id": "CancelCouponBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "CancelCouponText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ApplyCouponBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ApplyCouponIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "ApplyCouponText", "fill": "#FFFFFF", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-history.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-history.pen new file mode 100644 index 00000000..21e7142a --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-history.pen @@ -0,0 +1,136 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerHistoryDialog", + "name": "Dialog/CustomerHistory", + "reusable": true, + "width": 460, + "height": 600, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CustHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "CustAvatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#8B5CF6", "position": 0}, {"color": "#A78BFA", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "CustInitials", "fill": "#FFFFFF", "content": "TL", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CustInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "CustName", "fill": "$text-primary", "content": "Trần Thị Lan", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "frame", "id": "CustMeta", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "CustVip", "fill": "#EAB30820", "cornerRadius": 6, "padding": [3, 8], "children": [ + {"type": "text", "id": "CustVipText", "fill": "#EAB308", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "text", "id": "CustPhone", "fill": "$text-tertiary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "CustClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CustCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "CustStats", + "width": "fill_container", + "padding": [12, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Stat1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "Stat1Value", "fill": "$orange-primary", "content": "47", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "Stat1Label", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Stat2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "Stat2Value", "fill": "#22C55E", "content": "2.8M", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "Stat2Label", "fill": "$text-tertiary", "content": "Tổng chi", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Stat3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "Stat3Value", "fill": "#3B82F6", "content": "1,250", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "Stat3Label", "fill": "$text-tertiary", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 11} + ]} + ] + }, + { + "type": "frame", + "id": "CustOrders", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [0, 20], + "gap": 8, + "children": [ + {"type": "text", "id": "OrdersTitle", "fill": "$text-secondary", "content": "Lịch sử gần đây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 6, 0]}, + {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Order1Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order1IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "Order1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Order1Id", "fill": "$text-primary", "content": "#00458 - Cà phê sữa đá (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Order1Date", "fill": "$text-tertiary", "content": "Hôm nay, 14:30", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Order1Total", "fill": "$text-primary", "content": "70,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Order2Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order2IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "Order2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Order2Id", "fill": "$text-primary", "content": "#00412 - Combo sáng (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Order2Date", "fill": "$text-tertiary", "content": "Hôm qua, 08:15", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Order2Total", "fill": "$text-primary", "content": "55,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Order3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Order3Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order3IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "Order3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Order3Id", "fill": "$text-primary", "content": "#00389 - Trà sữa (3)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Order3Date", "fill": "$text-tertiary", "content": "03/02, 16:45", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Order3Total", "fill": "$text-primary", "content": "135,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "CustFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "EditCustBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "EditCustIcon", "width": 18, "height": 18, "iconFontName": "user-pen", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "EditCustText", "fill": "$text-secondary", "content": "Sửa thông tin", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ApplyBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ApplyIcon", "width": 18, "height": 18, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "ApplyText", "fill": "#FFFFFF", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen new file mode 100644 index 00000000..8dc7fc40 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen @@ -0,0 +1,126 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "DataExportDialog", + "name": "Dialog/DataExport", + "reusable": true, + "width": 420, + "height": 540, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ExportHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "ExportIconBg", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExportIcon", "width": 22, "height": 22, "iconFontName": "file-down", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "ExportTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "ExportTitle", "fill": "$text-primary", "content": "Xuất Dữ Liệu", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "ExportSubtitle", "fill": "$text-tertiary", "content": "Tải về dữ liệu báo cáo", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "ExportClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExportCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "ExportContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 14, + "children": [ + {"type": "frame", "id": "DataTypeField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "DataTypeLabel", "fill": "$text-secondary", "content": "Loại dữ liệu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "DataTypeSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DataTypeIcon", "width": 20, "height": 20, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "DataTypeValue", "fill": "$text-primary", "content": "Báo cáo doanh thu", "fontFamily": "Roboto", "fontSize": 14, "width": "fill_container"}, + {"type": "icon_font", "id": "DataTypeChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "DateRange", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "DateFrom", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "DateFromLabel", "fill": "$text-secondary", "content": "Từ ngày", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "frame", "id": "DateFromInput", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DateFromIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "DateFromVal", "fill": "$text-primary", "content": "01/02/2026", "fontFamily": "Roboto", "fontSize": 13} + ]} + ]}, + {"type": "frame", "id": "DateTo", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "DateToLabel", "fill": "$text-secondary", "content": "Đến ngày", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "frame", "id": "DateToInput", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DateToIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "DateToVal", "fill": "$text-primary", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 13} + ]} + ]} + ]}, + {"type": "frame", "id": "FormatField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "FormatLabel", "fill": "$text-secondary", "content": "Định dạng xuất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "FormatOptions", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "FormatExcel", "width": "fill_container", "height": 56, "fill": "$orange-primary", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FormatExcelIcon", "width": 22, "height": 22, "iconFontName": "file-spreadsheet", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "FormatExcelText", "fill": "#FFFFFF", "content": "Excel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "FormatPDF", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FormatPDFIcon", "width": 22, "height": 22, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "FormatPDFText", "fill": "$text-secondary", "content": "PDF", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "FormatCSV", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FormatCSVIcon", "width": 22, "height": 22, "iconFontName": "file", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "FormatCSVText", "fill": "$text-secondary", "content": "CSV", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]} + ]}, + {"type": "frame", "id": "EstimateInfo", "width": "fill_container", "fill": "#3B82F615", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "EstimateIcon", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#3B82F6"}, + {"type": "frame", "id": "EstimateText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "EstimateTitle", "fill": "#3B82F6", "content": "Ước tính: 245 records", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "EstimateSize", "fill": "$text-tertiary", "content": "Kích thước file: ~1.2 MB", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ExportFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "CancelExportBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "CancelExportText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "DownloadBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DownloadIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "DownloadText", "fill": "#FFFFFF", "content": "Tải xuống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen new file mode 100644 index 00000000..e28a111f --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen @@ -0,0 +1,575 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "DepositWithdrawalDialog", + "x": 0, + "y": 0, + "name": "Dialog/DepositWithdrawal", + "reusable": true, + "width": 420, + "height": 539, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DepositHeader", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DepositIconBg", + "width": 44, + "height": 44, + "fill": "#3B82F615", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DepositIcon", + "width": 22, + "height": 22, + "iconFontName": "wallet", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "DepositTitleBox", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "DepositTitle", + "fill": "$text-primary", + "content": "Nộp/Rút Tiền", + "fontFamily": "Roboto", + "fontSize": 17, + "fontWeight": "700" + }, + { + "type": "text", + "id": "DepositSubtitle", + "fill": "$text-tertiary", + "content": "Di chuyển tiền vào/ra két", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "DepositClose", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DepositCloseIcon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DepositContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 14, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "TypeToggle", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 12, + "gap": 4, + "padding": 4, + "children": [ + { + "type": "frame", + "id": "DepositTab", + "width": "fill_container", + "height": 40, + "fill": "#22C55E", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "DepositTabIcon", + "width": 18, + "height": 18, + "iconFontName": "arrow-down-to-line", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "DepositTabText", + "fill": "#FFFFFF", + "content": "Nộp vào", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "WithdrawTab", + "width": "fill_container", + "height": 40, + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "WithdrawTabIcon", + "width": 18, + "height": 18, + "iconFontName": "arrow-up-from-line", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "WithdrawTabText", + "fill": "$text-secondary", + "content": "Rút ra", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "AmountField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "AmountLabel", + "fill": "$text-secondary", + "content": "Số tiền", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "AmountInput", + "width": "fill_container", + "height": 56, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "#22C55E" + }, + "gap": 8, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "AmountPlusIcon", + "width": 20, + "height": 20, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "AmountVal", + "fill": "$text-primary", + "content": "1,000,000", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "AmountUnit", + "fill": "$text-tertiary", + "content": "đ", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuickAmounts", + "width": "fill_container", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "Quick1", + "width": "fill_container", + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Quick1Text", + "fill": "$text-secondary", + "content": "500K", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Quick2", + "width": "fill_container", + "height": 36, + "fill": "#22C55E20", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Quick2Text", + "fill": "#22C55E", + "content": "1M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "Quick3", + "width": "fill_container", + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Quick3Text", + "fill": "$text-secondary", + "content": "2M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Quick4", + "width": "fill_container", + "height": 36, + "fill": "$bg-page", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Quick4Text", + "fill": "$text-secondary", + "content": "5M", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReasonField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ReasonLabel", + "fill": "$text-secondary", + "content": "Lý do", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ReasonSelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ReasonValue", + "fill": "$text-primary", + "content": "Nộp tiền từ két sắt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "ReasonChevron", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NoteField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "NoteLabel", + "fill": "$text-secondary", + "content": "Ghi chú (tùy chọn)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "NoteInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NoteVal", + "fill": "$text-tertiary", + "content": "Nhập ghi chú...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "DepositFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "CancelDepositBtn", + "width": "fill_container", + "height": 46, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CancelDepositText", + "fill": "$text-secondary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ConfirmDepositBtn", + "width": "fill_container", + "height": 46, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#22C55E", + "position": 0 + }, + { + "color": "#16A34A", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ConfirmDepositIcon", + "width": 18, + "height": 18, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ConfirmDepositText", + "fill": "#FFFFFF", + "content": "Xác nhận nộp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/expense-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expense-entry.pen new file mode 100644 index 00000000..4ad0167c --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expense-entry.pen @@ -0,0 +1,550 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "ExpenseEntryDialog", + "x": 0, + "y": 0, + "name": "Dialog/ExpenseEntry", + "reusable": true, + "width": 420, + "height": 635, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ExpenseHeader", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ExpenseIconBg", + "width": 44, + "height": 44, + "fill": "#EF444415", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ExpenseIcon", + "width": 22, + "height": 22, + "iconFontName": "receipt", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "ExpenseTitleBox", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ExpenseTitle", + "fill": "$text-primary", + "content": "Nhập Chi Phí", + "fontFamily": "Roboto", + "fontSize": 17, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ExpenseSubtitle", + "fill": "$text-tertiary", + "content": "Ghi nhận chi phí phát sinh", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ExpenseClose", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ExpenseCloseIcon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ExpenseContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 14, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "CategoryField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "CategoryLabel", + "fill": "$text-secondary", + "content": "Danh mục chi phí", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CategorySelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CatIcon", + "width": 32, + "height": 32, + "fill": "#F9731620", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CatIconI", + "width": 16, + "height": 16, + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "fill": "#F97316" + } + ] + }, + { + "type": "text", + "id": "CatValue", + "fill": "$text-primary", + "content": "Nguyên liệu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "CatChevron", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "AmountField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "AmountLabel", + "fill": "$text-secondary", + "content": "Số tiền", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "AmountInput", + "width": "fill_container", + "height": 52, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "gap": 8, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AmountVal", + "fill": "$text-primary", + "content": "150,000", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "AmountUnit", + "fill": "$text-tertiary", + "content": "đ", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DescField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "DescLabel", + "fill": "$text-secondary", + "content": "Mô tả chi tiết", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "DescInput", + "width": "fill_container", + "height": 72, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "DescVal", + "fill": "$text-primary", + "content": "Mua thêm sữa tươi, đường cát...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReceiptField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ReceiptLabel", + "fill": "$text-secondary", + "content": "Chứng từ đính kèm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ReceiptUpload", + "width": "fill_container", + "height": 80, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$border-default" + }, + "layout": "vertical", + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "UploadIcon", + "width": 24, + "height": 24, + "iconFontName": "camera", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "UploadText", + "fill": "$text-tertiary", + "content": "Chụp hoặc tải lên hóa đơn", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PaymentMethod", + "width": "fill_container", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "PayCash", + "width": "fill_container", + "height": 44, + "fill": "$orange-primary", + "cornerRadius": 10, + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PayCashIcon", + "width": 16, + "height": 16, + "iconFontName": "banknote", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PayCashText", + "fill": "#FFFFFF", + "content": "Tiền mặt", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PayCard", + "width": "fill_container", + "height": 44, + "fill": "$bg-page", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PayCardIcon", + "width": 16, + "height": 16, + "iconFontName": "credit-card", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "PayCardText", + "fill": "$text-secondary", + "content": "Thẻ/CK", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ExpenseFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "CancelExpenseBtn", + "width": "fill_container", + "height": 46, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CancelExpenseText", + "fill": "$text-secondary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SaveExpenseBtn", + "width": "fill_container", + "height": 46, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SaveExpenseIcon", + "width": 18, + "height": 18, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "SaveExpenseText", + "fill": "#FFFFFF", + "content": "Lưu chi phí", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/expiry-warning.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expiry-warning.pen new file mode 100644 index 00000000..73ccc4a1 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expiry-warning.pen @@ -0,0 +1,130 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ExpiryWarningDialog", + "name": "Dialog/ExpiryWarning", + "reusable": true, + "width": 420, + "height": 500, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ExpiryHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "ExpiryIconBg", "width": 44, "height": 44, "fill": "#EF444415", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExpiryIcon", "width": 22, "height": 22, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]}, + {"type": "frame", "id": "ExpiryTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "ExpiryTitle", "fill": "$text-primary", "content": "Sắp Hết Hạn Sử Dụng", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "ExpiryCount", "fill": "#EF4444", "content": "3 sản phẩm cần xử lý", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "ExpiryClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExpiryCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "ExpiryContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [14, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Exp1", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Exp1Icon", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp1IconI", "width": 20, "height": 20, "iconFontName": "alert-circle", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]}, + {"type": "frame", "id": "Exp1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Exp1Name", "fill": "$text-primary", "content": "Sữa tươi Vinamilk", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Exp1Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "Exp1Date", "fill": "#EF4444", "content": "Hết hạn: Hôm nay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "Exp1Qty", "fill": "$text-tertiary", "content": "• 5 hộp", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Exp1Action", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp1ActionIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ]}, + {"type": "frame", "id": "Exp2", "width": "fill_container", "fill": "#EAB30815", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Exp2Icon", "width": 40, "height": 40, "fill": "#EAB30820", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp2IconI", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Exp2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Exp2Name", "fill": "$text-primary", "content": "Bánh croissant", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Exp2Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "Exp2Date", "fill": "#EAB308", "content": "Hết hạn: Ngày mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Exp2Qty", "fill": "$text-tertiary", "content": "• 12 cái", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Exp2Action", "width": 32, "height": 32, "fill": "#EAB308", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp2ActionIcon", "width": 16, "height": 16, "iconFontName": "badge-percent", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ]}, + {"type": "frame", "id": "Exp3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Exp3Icon", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp3IconI", "width": 20, "height": 20, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]}, + {"type": "frame", "id": "Exp3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Exp3Name", "fill": "$text-primary", "content": "Kem tươi Whipping", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Exp3Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "Exp3Date", "fill": "$text-secondary", "content": "Hết hạn: 3 ngày nữa", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "text", "id": "Exp3Qty", "fill": "$text-tertiary", "content": "• 2 hộp", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Exp3Action", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Exp3ActionIcon", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ExpiryFooter", + "width": "fill_container", + "fill": "$bg-page", + "padding": [14, 20], + "gap": 10, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "QuickActions", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "DiscountBtn", "width": "fill_container", "height": 44, "fill": "#EAB30820", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DiscountIcon", "width": 16, "height": 16, "iconFontName": "badge-percent", "iconFontFamily": "lucide", "fill": "#EAB308"}, + {"type": "text", "id": "DiscountText", "fill": "#EAB308", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "WriteOffBtn", "width": "fill_container", "height": 44, "fill": "#EF444420", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "WriteOffIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}, + {"type": "text", "id": "WriteOffText", "fill": "#EF4444", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "DoneBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "DoneText", "fill": "#FFFFFF", "content": "Đã xử lý xong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen new file mode 100644 index 00000000..fc5cce56 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen @@ -0,0 +1,129 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "FeedbackFormDialog", + "name": "Dialog/FeedbackForm", + "reusable": true, + "width": 400, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "FeedbackHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "FeedbackIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FeedbackIcon", "width": 22, "height": 22, "iconFontName": "message-circle-heart", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "FeedbackTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "FeedbackTitle", "fill": "$text-primary", "content": "Đánh Giá Trải Nghiệm", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "FeedbackSubtitle", "fill": "$text-tertiary", "content": "Góp ý giúp chúng tôi tốt hơn", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "FeedbackClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FeedbackCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "FeedbackContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [20, 24], + "gap": 20, + "children": [ + {"type": "frame", "id": "RatingSection", "width": "fill_container", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ + {"type": "text", "id": "RatingLabel", "fill": "$text-secondary", "content": "Bạn hài lòng như thế nào?", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "frame", "id": "RatingStars", "gap": 8, "children": [ + {"type": "frame", "id": "Star1", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Star1Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Star2", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Star2Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Star3", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Star3Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Star4", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Star4Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Star5", "width": 44, "height": 44, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Star5Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "text", "id": "RatingText", "fill": "#EAB308", "content": "Rất hài lòng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "TagsSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "text", "id": "TagsLabel", "fill": "$text-secondary", "content": "Bạn thích điều gì nhất?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "TagsRow1", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "Tag1", "fill": "#22C55E", "cornerRadius": 20, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Tag1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "Tag1Text", "fill": "#FFFFFF", "content": "Đồ uống ngon", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Tag2", "fill": "#22C55E", "cornerRadius": 20, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Tag2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "Tag2Text", "fill": "#FFFFFF", "content": "Phục vụ tốt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "TagsRow2", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "Tag3", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ + {"type": "text", "id": "Tag3Text", "fill": "$text-secondary", "content": "Không gian đẹp", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Tag4", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ + {"type": "text", "id": "Tag4Text", "fill": "$text-secondary", "content": "Giá hợp lý", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Tag5", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ + {"type": "text", "id": "Tag5Text", "fill": "$text-secondary", "content": "Nhanh", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]} + ]}, + {"type": "frame", "id": "CommentSection", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "CommentLabel", "fill": "$text-secondary", "content": "Góp ý thêm (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "CommentInput", "width": "fill_container", "height": 80, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "children": [ + {"type": "text", "id": "CommentPlaceholder", "fill": "$text-tertiary", "content": "Chia sẻ thêm trải nghiệm của bạn...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "FeedbackFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 24], + "children": [ + {"type": "frame", "id": "SkipBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "SkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SubmitFeedbackBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SubmitFeedbackIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "SubmitFeedbackText", "fill": "#FFFFFF", "content": "Gửi đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen new file mode 100644 index 00000000..f9c7a4a5 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen @@ -0,0 +1,130 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "LowStockAlertDialog", + "name": "Dialog/LowStockAlert", + "reusable": true, + "width": 420, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "AlertHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "AlertIconBg", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AlertIcon", "width": 22, "height": 22, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "AlertTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "AlertTitle", "fill": "$text-primary", "content": "Cảnh Báo Tồn Kho Thấp", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "AlertCount", "fill": "#EAB308", "content": "5 sản phẩm cần nhập thêm", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "AlertClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AlertCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "AlertContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [14, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Item1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item1Status", "width": 8, "height": 44, "fill": "#EF4444", "cornerRadius": 4}, + {"type": "frame", "id": "Item1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item1Name", "fill": "$text-primary", "content": "Cà phê rang xay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Item1Meta", "gap": 12, "children": [ + {"type": "text", "id": "Item1Stock", "fill": "#EF4444", "content": "Còn: 2 kg", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Item1Min", "fill": "$text-tertiary", "content": "Tối thiểu: 10 kg", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Item1OrderBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Item1OrderText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Item2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item2Status", "width": 8, "height": 44, "fill": "#EF4444", "cornerRadius": 4}, + {"type": "frame", "id": "Item2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item2Name", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Item2Meta", "gap": 12, "children": [ + {"type": "text", "id": "Item2Stock", "fill": "#EF4444", "content": "Còn: 3 lít", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Item2Min", "fill": "$text-tertiary", "content": "Tối thiểu: 20 lít", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Item2OrderBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Item2OrderText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Item3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item3Status", "width": 8, "height": 44, "fill": "#EAB308", "cornerRadius": 4}, + {"type": "frame", "id": "Item3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item3Name", "fill": "$text-primary", "content": "Đường cát trắng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Item3Meta", "gap": 12, "children": [ + {"type": "text", "id": "Item3Stock", "fill": "#EAB308", "content": "Còn: 5 kg", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Item3Min", "fill": "$text-tertiary", "content": "Tối thiểu: 10 kg", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Item3OrderBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Item3OrderText", "fill": "$text-secondary", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "Item4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item4Status", "width": 8, "height": 44, "fill": "#EAB308", "cornerRadius": 4}, + {"type": "frame", "id": "Item4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item4Name", "fill": "$text-primary", "content": "Ly giấy 12oz", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Item4Meta", "gap": 12, "children": [ + {"type": "text", "id": "Item4Stock", "fill": "#EAB308", "content": "Còn: 50 cái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Item4Min", "fill": "$text-tertiary", "content": "Tối thiểu: 100 cái", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "Item4OrderBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Item4OrderText", "fill": "$text-secondary", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "AlertFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "RemindLaterBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "RemindLaterText", "fill": "$text-secondary", "content": "Nhắc sau", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "OrderAllBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "OrderAllIcon", "width": 18, "height": 18, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "OrderAllText", "fill": "#FFFFFF", "content": "Đặt tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen new file mode 100644 index 00000000..aa3cb88f --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen @@ -0,0 +1,97 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "OrderCancelDialog", + "name": "Dialog/OrderCancel", + "reusable": true, + "width": 400, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 24, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CancelContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [28, 24], + "children": [ + { + "type": "frame", "id": "CancelIconBg", "width": 72, "height": 72, "fill": "#EF444415", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "alignSelf": "center", "children": [ + {"type": "frame", "id": "CancelIconInner", "width": 52, "height": 52, "fill": "#EF444420", "cornerRadius": 26, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CancelIcon", "width": 28, "height": 28, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]} + ] + }, + { + "type": "frame", "id": "CancelTextContent", "width": "fill_container", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "CancelTitle", "fill": "$text-primary", "content": "Hủy Đơn Hàng", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, + {"type": "text", "id": "CancelOrderId", "fill": "$text-tertiary", "content": "Đơn hàng #00458", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14} + ] + }, + {"type": "frame", "id": "ReasonField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "ReasonLabel", "fill": "$text-secondary", "content": "Chọn lý do hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "Reason1", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Radio1", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "Radio1Inner", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 6} + ]}, + {"type": "text", "id": "Reason1Text", "fill": "$text-primary", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 14} + ]}, + {"type": "frame", "id": "Reason2", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Radio2", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, + {"type": "text", "id": "Reason2Text", "fill": "$text-secondary", "content": "Hết hàng/Nguyên liệu", "fontFamily": "Roboto", "fontSize": 14} + ]}, + {"type": "frame", "id": "Reason3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Radio3", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, + {"type": "text", "id": "Reason3Text", "fill": "$text-secondary", "content": "Nhập sai đơn", "fontFamily": "Roboto", "fontSize": 14} + ]}, + {"type": "frame", "id": "Reason4", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Radio4", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, + {"type": "text", "id": "Reason4Text", "fill": "$text-secondary", "content": "Lý do khác", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]}, + {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú thêm (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ + {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Khách đổi ý không muốn mua...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "CancelFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 24], + "children": [ + {"type": "frame", "id": "BackBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "BackText", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ConfirmCancelBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EF4444", "position": 0}, {"color": "#DC2626", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ConfirmCancelIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "ConfirmCancelText", "fill": "#FFFFFF", "content": "Hủy đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen new file mode 100644 index 00000000..334b86af --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen @@ -0,0 +1,143 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "OrderEditDialog", + "name": "Dialog/OrderEdit", + "reusable": true, + "width": 480, + "height": 620, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "EditHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "EditIconBg", "width": 40, "height": 40, "fill": "#EAB30815", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "EditIcon", "width": 20, "height": 20, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "EditTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "EditTitle", "fill": "$text-primary", "content": "Chỉnh Sửa Đơn Hàng", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "EditSubtitle", "fill": "$text-tertiary", "content": "Đơn hàng #00458 - Bàn 05", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "EditClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "EditCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "EditContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "OrderItem1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ + {"type": "frame", "id": "Item1Img", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item1Icon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "Item1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item1Name", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Item1Price", "fill": "$text-tertiary", "content": "35,000đ × 2", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Item1Controls", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item1Minus", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item1MinusIcon", "width": 16, "height": 16, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "Item1Qty", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600", "width": 24, "textAlign": "center"}, + {"type": "frame", "id": "Item1Plus", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item1PlusIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ]}, + {"type": "frame", "id": "Item1Delete", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item1DeleteIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]} + ]}, + {"type": "frame", "id": "OrderItem2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ + {"type": "frame", "id": "Item2Img", "width": 48, "height": 48, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item2Icon", "width": 24, "height": 24, "iconFontName": "croissant", "iconFontFamily": "lucide", "fill": "#F97316"} + ]}, + {"type": "frame", "id": "Item2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Item2Name", "fill": "$text-primary", "content": "Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Item2Price", "fill": "$text-tertiary", "content": "25,000đ × 1", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Item2Controls", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Item2Minus", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item2MinusIcon", "width": 16, "height": 16, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "Item2Qty", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600", "width": 24, "textAlign": "center"}, + {"type": "frame", "id": "Item2Plus", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item2PlusIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ]}, + {"type": "frame", "id": "Item2Delete", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Item2DeleteIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]} + ]}, + {"type": "frame", "id": "AddItemBtn", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddItemIcon", "width": 18, "height": 18, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "AddItemText", "fill": "$orange-primary", "content": "Thêm món mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "EditNote", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "EditNoteLabel", "fill": "$text-secondary", "content": "Ghi chú đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "EditNoteInput", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ + {"type": "text", "id": "EditNoteVal", "fill": "$text-tertiary", "content": "Ít đường, không đá", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "EditSummary", + "width": "fill_container", + "fill": "$bg-page", + "padding": [12, 20], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "SummaryLabel", "fill": "$text-secondary", "content": "Tổng cộng (3 món)", "fontFamily": "Roboto", "fontSize": 14}, + {"type": "text", "id": "SummaryTotal", "fill": "$orange-primary", "content": "95,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "EditFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "DiscardBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "DiscardText", "fill": "$text-secondary", "content": "Hủy thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SaveBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SaveIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "SaveText", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen new file mode 100644 index 00000000..d210b19e --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen @@ -0,0 +1,451 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "OrderReprintDialog", + "x": 0, + "y": 0, + "name": "Dialog/OrderReprint", + "reusable": true, + "width": 380, + "height": 456, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ReprintContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [ + 28, + 24 + ], + "children": [ + { + "type": "frame", + "id": "ReprintIconWrap", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "ReprintIconBg", + "width": 72, + "height": 72, + "fill": "#3B82F615", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ReprintIconInner", + "width": 52, + "height": 52, + "fill": "#3B82F620", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ReprintIcon", + "width": 28, + "height": 28, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReprintTitle", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ReprintTitleText", + "fill": "$text-primary", + "content": "In Lại Hóa Đơn", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ReprintOrderId", + "fill": "$text-tertiary", + "content": "Đơn hàng #00458", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "PrintOptions", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "Option1", + "width": "fill_container", + "height": 52, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Option1Radio", + "width": 20, + "height": 20, + "cornerRadius": 10, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Option1Dot", + "width": 10, + "height": 10, + "fill": "$orange-primary", + "cornerRadius": 5 + } + ] + }, + { + "type": "frame", + "id": "Option1Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Option1Name", + "fill": "$text-primary", + "content": "Hóa đơn cho khách", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Option1Desc", + "fill": "$text-tertiary", + "content": "In hóa đơn đầy đủ", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "Option1Icon", + "width": 20, + "height": 20, + "iconFontName": "receipt", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "Option2", + "width": "fill_container", + "height": 52, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Option2Radio", + "width": 20, + "height": 20, + "cornerRadius": 10, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "frame", + "id": "Option2Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Option2Name", + "fill": "$text-primary", + "content": "Phiếu bếp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Option2Desc", + "fill": "$text-tertiary", + "content": "Chỉ in món ăn/đồ uống", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "Option2Icon", + "width": 20, + "height": 20, + "iconFontName": "chef-hat", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "Option3", + "width": "fill_container", + "height": 52, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Option3Radio", + "width": 20, + "height": 20, + "cornerRadius": 10, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + }, + { + "type": "frame", + "id": "Option3Info", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "Option3Name", + "fill": "$text-primary", + "content": "Bản sao lưu trữ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Option3Desc", + "fill": "$text-tertiary", + "content": "In bản sao cho cửa hàng", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "Option3Icon", + "width": 20, + "height": 20, + "iconFontName": "archive", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReprintFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 24 + ], + "children": [ + { + "type": "frame", + "id": "CancelReprintBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CancelReprintText", + "fill": "$text-secondary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PrintBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PrintBtnIcon", + "width": 18, + "height": 18, + "iconFontName": "printer", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "PrintBtnText", + "fill": "#FFFFFF", + "content": "In ngay", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/permission-denied.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/permission-denied.pen new file mode 100644 index 00000000..46d4d8ed --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/permission-denied.pen @@ -0,0 +1,78 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PermissionDeniedDialog", + "name": "Dialog/PermissionDenied", + "reusable": true, + "width": 380, + "height": 380, + "fill": "$bg-elevated", + "cornerRadius": 24, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PermContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [32, 28], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", "id": "PermIconBg", "width": 80, "height": 80, "fill": "#EF444415", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "PermIconInner", "width": 56, "height": 56, "fill": "#EF444420", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PermIcon", "width": 32, "height": 32, "iconFontName": "shield-x", "iconFontFamily": "lucide", "fill": "#EF4444"} + ]} + ] + }, + { + "type": "frame", "id": "PermTextContent", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "PermTitle", "fill": "$text-primary", "content": "Không có quyền truy cập", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "PermDesc", "fill": "$text-tertiary", "content": "Bạn không có quyền thực hiện\nthao tác này. Vui lòng liên hệ\nQuản lý để được cấp quyền.", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14, "lineHeight": 1.5} + ] + }, + { + "type": "frame", "id": "PermFeature", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FeatureIcon", "width": 18, "height": 18, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "FeatureName", "fill": "$text-secondary", "content": "Cài đặt hệ thống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ] + } + ] + }, + { + "type": "frame", + "id": "PermFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 24], + "children": [ + {"type": "frame", "id": "PermCloseBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "PermCloseText", "fill": "$text-secondary", "content": "Đóng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "PermRequestBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PermRequestIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "PermRequestText", "fill": "#FFFFFF", "content": "Yêu cầu quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen new file mode 100644 index 00000000..d0aab049 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen @@ -0,0 +1,131 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PettyCashDialog", + "name": "Dialog/PettyCash", + "reusable": true, + "width": 400, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PettyHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "PettyIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PettyIcon", "width": 22, "height": 22, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "PettyTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "PettyTitle", "fill": "$text-primary", "content": "Quỹ Tiền Lẻ", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "PettySubtitle", "fill": "$text-tertiary", "content": "Quản lý tiền lẻ đầu ca", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "PettyClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PettyCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "CurrentBalance", + "width": "fill_container", + "fill": "#22C55E15", + "padding": [16, 20], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "text", "id": "BalanceLabel", "fill": "$text-secondary", "content": "Số dư hiện tại", "fontFamily": "Roboto", "fontSize": 14}, + {"type": "text", "id": "BalanceValue", "fill": "#22C55E", "content": "500,000đ", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "PettyContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 14, + "children": [ + {"type": "frame", "id": "ActionType", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "ActionLabel", "fill": "$text-secondary", "content": "Loại giao dịch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "ActionTabs", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "AddTab", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddTabIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "AddTabText", "fill": "#FFFFFF", "content": "Thêm vào", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "WithdrawTab", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "WithdrawTabIcon", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "WithdrawTabText", "fill": "$text-secondary", "content": "Rút ra", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ]}, + {"type": "frame", "id": "AmountField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "AmountLabel", "fill": "$text-secondary", "content": "Số tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "AmountInput", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "AmountVal", "fill": "$text-primary", "content": "200,000", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "width": "fill_container"}, + {"type": "text", "id": "AmountUnit", "fill": "$text-tertiary", "content": "đ", "fontFamily": "Roboto", "fontSize": 16} + ]} + ]}, + {"type": "frame", "id": "QuickAmounts", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "Quick1", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Quick1Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Quick2", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Quick2Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Quick3", "width": "fill_container", "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Quick3Text", "fill": "#FFFFFF", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Quick4", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Quick4Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [12, 14], "children": [ + {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Bổ sung tiền lẻ đầu ca sáng...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "PettyFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "CancelPettyBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "CancelPettyText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ConfirmPettyBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ConfirmPettyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "ConfirmPettyText", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen new file mode 100644 index 00000000..88202aeb --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen @@ -0,0 +1,492 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "RoleSwitchDialog", + "x": 0, + "y": 0, + "name": "Dialog/RoleSwitch", + "reusable": true, + "width": 380, + "height": 530, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SwitchContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [ + 28, + 24 + ], + "children": [ + { + "type": "frame", + "id": "SwitchIconWrap", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "SwitchIconBg", + "width": 72, + "height": 72, + "fill": "#F9731620", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SwitchIconInner", + "width": 52, + "height": 52, + "fill": "#F9731620", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SwitchIcon", + "width": 28, + "height": 28, + "iconFontName": "users", + "iconFontFamily": "lucide", + "fill": "#F97316" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SwitchTitle", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SwitchTitleText", + "fill": "$text-primary", + "content": "Chuyển Vai Trò", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SwitchSubtitle", + "fill": "$text-tertiary", + "content": "Đang đăng nhập: Thu Ngân", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "RoleList", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "RoleCashier", + "width": "fill_container", + "height": 56, + "fill": "$orange-primary", + "cornerRadius": 14, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CashierAvatar", + "width": 36, + "height": 36, + "fill": "#FFFFFF20", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CashierIcon", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "CashierInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "CashierName", + "fill": "#FFFFFF", + "content": "Thu Ngân", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CashierDesc", + "fill": "#FFFFFF90", + "content": "Đang sử dụng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "CashierCheck", + "width": 20, + "height": 20, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "RoleManager", + "width": "fill_container", + "height": 56, + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ManagerAvatar", + "width": 36, + "height": 36, + "fill": "#8B5CF620", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ManagerIcon", + "width": 18, + "height": 18, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "#8B5CF6" + } + ] + }, + { + "type": "frame", + "id": "ManagerInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "ManagerName", + "fill": "$text-primary", + "content": "Quản Lý", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ManagerDesc", + "fill": "$text-tertiary", + "content": "Toàn quyền truy cập", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "ManagerLock", + "width": 16, + "height": 16, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "RoleKitchen", + "width": "fill_container", + "height": 56, + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KitchenAvatar", + "width": 36, + "height": 36, + "fill": "#22C55E20", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KitchenIcon", + "width": 18, + "height": 18, + "iconFontName": "chef-hat", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "KitchenInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "KitchenName", + "fill": "$text-primary", + "content": "Bếp / Pha Chế", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "KitchenDesc", + "fill": "$text-tertiary", + "content": "Xem đơn hàng", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "KitchenLock", + "width": 16, + "height": 16, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + }, + { + "type": "frame", + "id": "RoleWaiter", + "width": "fill_container", + "height": 56, + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "WaiterAvatar", + "width": 36, + "height": 36, + "fill": "#3B82F620", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "WaiterIcon", + "width": 18, + "height": 18, + "iconFontName": "utensils-crossed", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "WaiterInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "WaiterName", + "fill": "$text-primary", + "content": "Phục Vụ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "WaiterDesc", + "fill": "$text-tertiary", + "content": "Gọi món & phục vụ", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "WaiterLock", + "width": 16, + "height": 16, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SwitchFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "padding": [ + 16, + 24 + ], + "children": [ + { + "type": "frame", + "id": "CancelSwitchBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CancelSwitchText", + "fill": "$text-secondary", + "content": "Đóng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/stock-in.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen new file mode 100644 index 00000000..06684980 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen @@ -0,0 +1,656 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "StockInDialog", + "x": 0, + "y": 0, + "name": "Dialog/StockIn", + "reusable": true, + "width": 440, + "height": 618, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "StockInHeader", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "StockInIconBg", + "width": 40, + "height": 40, + "fill": "#22C55E15", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockInIcon", + "width": 20, + "height": 20, + "iconFontName": "package-plus", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "StockInTitleBox", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "StockInTitle", + "fill": "$text-primary", + "content": "Nhập Kho", + "fontFamily": "Roboto", + "fontSize": 17, + "fontWeight": "700" + }, + { + "type": "text", + "id": "StockInSubtitle", + "fill": "$text-tertiary", + "content": "Thêm hàng hóa vào kho", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "StockInClose", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockInCloseIcon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StockInContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "ProductField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ProductLabel", + "fill": "$text-secondary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ProductSelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SelectedProduct", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ProdIcon", + "width": 32, + "height": 32, + "fill": "#3B82F620", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProdIconI", + "width": 16, + "height": 16, + "iconFontName": "coffee", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "text", + "id": "ProdName", + "fill": "$text-primary", + "content": "Cà phê sữa đá", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "DropdownIcon", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuantityRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "QuantityField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "QuantityLabel", + "fill": "$text-secondary", + "content": "Số lượng nhập", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "QuantityInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "QuantityVal", + "fill": "$text-primary", + "content": "100", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "UnitField", + "width": 120, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "UnitLabel", + "fill": "$text-secondary", + "content": "Đơn vị", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "UnitSelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "UnitVal", + "fill": "$text-primary", + "content": "Ly", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "UnitDropdown", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SupplierField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "SupplierLabel", + "fill": "$text-secondary", + "content": "Nhà cung cấp", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "SupplierInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SupplierIcon", + "width": 18, + "height": 18, + "iconFontName": "truck", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "SupplierVal", + "fill": "$text-primary", + "content": "Công ty ABC", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "CostRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "CostField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "CostLabel", + "fill": "$text-secondary", + "content": "Đơn giá nhập", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CostInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CostVal", + "fill": "$text-primary", + "content": "15,000", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CostUnit", + "fill": "$text-tertiary", + "content": "đ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TotalField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "TotalLabel", + "fill": "$text-secondary", + "content": "Thành tiền", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "TotalBox", + "width": "fill_container", + "height": 48, + "fill": "#22C55E15", + "cornerRadius": 12, + "gap": 6, + "padding": [ + 0, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TotalVal", + "fill": "#22C55E", + "content": "1,500,000", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "id": "TotalUnit", + "fill": "#22C55E", + "content": "đ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NoteField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "NoteLabel", + "fill": "$text-secondary", + "content": "Ghi chú", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "NoteInput", + "width": "fill_container", + "height": 72, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "NoteVal", + "fill": "$text-tertiary", + "content": "Hàng mới nhập từ đợt promotion...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "StockInFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "StockInCancelBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "StockInCancelText", + "fill": "$text-secondary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "StockInConfirmBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#22C55E", + "position": 0 + }, + { + "color": "#16A34A", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockInConfirmIcon", + "width": 18, + "height": 18, + "iconFontName": "package-plus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "StockInConfirmText", + "fill": "#FFFFFF", + "content": "Xác nhận nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/stock-out.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen new file mode 100644 index 00000000..c7543c15 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen @@ -0,0 +1,560 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "StockOutDialog", + "x": 0, + "y": 0, + "name": "Dialog/StockOut", + "reusable": true, + "width": 440, + "height": 537, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "StockOutHeader", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "StockOutIconBg", + "width": 40, + "height": 40, + "fill": "#EF444415", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockOutIcon", + "width": 20, + "height": 20, + "iconFontName": "package-minus", + "iconFontFamily": "lucide", + "fill": "#EF4444" + } + ] + }, + { + "type": "frame", + "id": "StockOutTitleBox", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "StockOutTitle", + "fill": "$text-primary", + "content": "Xuất Kho", + "fontFamily": "Roboto", + "fontSize": 17, + "fontWeight": "700" + }, + { + "type": "text", + "id": "StockOutSubtitle", + "fill": "$text-tertiary", + "content": "Xuất hàng hóa khỏi kho", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "StockOutClose", + "width": 32, + "height": 32, + "fill": "$bg-interactive", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockOutCloseIcon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "StockOutContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "ProductField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ProductLabel", + "fill": "$text-secondary", + "content": "Sản phẩm", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ProductSelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SelectedProduct", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ProdIcon", + "width": 32, + "height": 32, + "fill": "#F9731620", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ProdIconI", + "width": 16, + "height": 16, + "iconFontName": "croissant", + "iconFontFamily": "lucide", + "fill": "#F97316" + } + ] + }, + { + "type": "frame", + "id": "ProdDetails", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "ProdName", + "fill": "$text-primary", + "content": "Bánh mì thịt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ProdStock", + "fill": "$text-tertiary", + "content": "Tồn kho: 25 cái", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "icon_font", + "id": "DropdownIcon", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QuantityRow", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "QuantityField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "QuantityLabel", + "fill": "$text-secondary", + "content": "Số lượng xuất", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "QuantityInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "#EF444440" + }, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "QuantityVal", + "fill": "#EF4444", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RemainingField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "RemainingLabel", + "fill": "$text-secondary", + "content": "Còn lại sau xuất", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "RemainingBox", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "padding": [ + 0, + 14 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RemainingVal", + "fill": "$text-primary", + "content": "20 cái", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ReasonField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ReasonLabel", + "fill": "$text-secondary", + "content": "Lý do xuất", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ReasonSelect", + "width": "fill_container", + "height": 48, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 10, + "padding": [ + 0, + 14 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ReasonContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ReasonIcon", + "width": 18, + "height": 18, + "iconFontName": "alert-circle", + "iconFontFamily": "lucide", + "fill": "#EAB308" + }, + { + "type": "text", + "id": "ReasonVal", + "fill": "$text-primary", + "content": "Hàng hư hỏng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "ReasonDropdown", + "width": 18, + "height": 18, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NoteField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "NoteLabel", + "fill": "$text-secondary", + "content": "Ghi chú chi tiết", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "NoteInput", + "width": "fill_container", + "height": 72, + "fill": "$bg-page", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "NoteVal", + "fill": "$text-tertiary", + "content": "Bánh mì hết hạn sử dụng ngày 05/02...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "StockOutFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 20 + ], + "children": [ + { + "type": "frame", + "id": "StockOutCancelBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "StockOutCancelText", + "fill": "$text-secondary", + "content": "Hủy", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "StockOutConfirmBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#EF4444", + "position": 0 + }, + { + "color": "#DC2626", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "StockOutConfirmIcon", + "width": 18, + "height": 18, + "iconFontName": "package-minus", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "StockOutConfirmText", + "fill": "#FFFFFF", + "content": "Xác nhận xuất", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/stock-transfer.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-transfer.pen new file mode 100644 index 00000000..b81c0246 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-transfer.pen @@ -0,0 +1,135 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StockTransferDialog", + "name": "Dialog/StockTransfer", + "reusable": true, + "width": 440, + "height": 560, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TransferHeader", + "width": "fill_container", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "children": [ + {"type": "frame", "id": "TransferIconBg", "width": 40, "height": 40, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TransferIcon", "width": 20, "height": 20, "iconFontName": "arrow-left-right", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "TransferTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "TransferTitle", "fill": "$text-primary", "content": "Chuyển Kho", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, + {"type": "text", "id": "TransferSubtitle", "fill": "$text-tertiary", "content": "Di chuyển hàng giữa các kho", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "TransferClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TransferCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "TransferContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [20, 20], + "children": [ + {"type": "frame", "id": "ProductField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "ProductLabel", "fill": "$text-secondary", "content": "Sản phẩm chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "ProductSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "SelectedProduct", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "ProdIcon", "width": 32, "height": 32, "fill": "#10B98120", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ProdIconI", "width": 16, "height": 16, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#10B981"} + ]}, + {"type": "text", "id": "ProdName", "fill": "$text-primary", "content": "Sữa tươi không đường", "fontFamily": "Roboto", "fontSize": 14} + ]}, + {"type": "icon_font", "id": "DropdownIcon", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "LocationRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "FromField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "FromLabel", "fill": "$text-secondary", "content": "Từ kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "FromSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "FromContent", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "FromIcon", "width": 16, "height": 16, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#EF4444"}, + {"type": "text", "id": "FromVal", "fill": "$text-primary", "content": "Kho chính", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "icon_font", "id": "FromDropdown", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]}, + {"type": "frame", "id": "ArrowBox", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ArrowIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "ToField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "ToLabel", "fill": "$text-secondary", "content": "Đến kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "ToSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ToContent", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ToIcon", "width": 16, "height": 16, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "ToVal", "fill": "$text-primary", "content": "Chi nhánh 2", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "icon_font", "id": "ToDropdown", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]}, + {"type": "frame", "id": "QuantityRow", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "AvailableField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "AvailableLabel", "fill": "$text-secondary", "content": "Tồn kho nguồn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "AvailableBox", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "padding": [0, 14], "alignItems": "center", "justifyContent": "center", "children": [ + {"type": "text", "id": "AvailableVal", "fill": "$text-primary", "content": "100 hộp", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "TransferQtyField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "TransferQtyLabel", "fill": "$text-secondary", "content": "Số lượng chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "TransferQtyInput", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#3B82F6"}, "padding": [0, 14], "alignItems": "center", "justifyContent": "center", "children": [ + {"type": "text", "id": "TransferQtyVal", "fill": "#3B82F6", "content": "30", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]} + ]} + ]}, + {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Lý do chuyển kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 72, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [12, 14], "children": [ + {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Bổ sung hàng cho chi nhánh 2 do thiếu hàng...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "TransferFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "TransferCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "TransferCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "TransferConfirmBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#2563EB", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TransferConfirmIcon", "width": 18, "height": 18, "iconFontName": "arrow-left-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "TransferConfirmText", "fill": "#FFFFFF", "content": "Xác nhận chuyển", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen new file mode 100644 index 00000000..ac5596e0 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen @@ -0,0 +1,485 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "SyncConflictDialog", + "x": 0, + "y": 0, + "name": "Dialog/SyncConflict", + "reusable": true, + "width": 400, + "height": 514, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ConflictContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [ + 28, + 24 + ], + "children": [ + { + "type": "frame", + "id": "ConflictIconWrap", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "ConflictIconBg", + "width": 72, + "height": 72, + "fill": "#EAB30820", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ConflictIconInner", + "width": 52, + "height": 52, + "fill": "#EAB30820", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ConflictIcon", + "width": 28, + "height": 28, + "iconFontName": "git-merge", + "iconFontFamily": "lucide", + "fill": "#EAB308" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ConflictTitle", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ConflictTitleText", + "fill": "$text-primary", + "content": "Xung Đột Dữ Liệu", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ConflictSubtitle", + "fill": "$text-tertiary", + "content": "Có thay đổi từ nhiều nguồn", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ConflictOptions", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "KeepLocal", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "gap": 12, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KeepLocalIcon", + "width": 40, + "height": 40, + "fill": "#FF5C0020", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KeepLocalIconI", + "width": 20, + "height": 20, + "iconFontName": "smartphone", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "KeepLocalInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "KeepLocalTitle", + "fill": "$text-primary", + "content": "Giữ phiên bản thiết bị", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "KeepLocalDesc", + "fill": "$text-tertiary", + "content": "Cập nhật lúc 20:45 hôm nay", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "KeepLocalRadio", + "width": 22, + "height": 22, + "cornerRadius": 11, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KeepLocalDot", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + } + ] + }, + { + "type": "frame", + "id": "KeepServer", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KeepServerIcon", + "width": 40, + "height": 40, + "fill": "#3B82F620", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KeepServerIconI", + "width": 20, + "height": 20, + "iconFontName": "cloud", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "KeepServerInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "KeepServerTitle", + "fill": "$text-primary", + "content": "Giữ phiên bản server", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "KeepServerDesc", + "fill": "$text-tertiary", + "content": "Cập nhật lúc 19:30 hôm nay", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "KeepServerRadio", + "width": 22, + "height": 22, + "cornerRadius": 11, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + } + ] + }, + { + "type": "frame", + "id": "MergeBoth", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 14, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MergeIcon", + "width": 40, + "height": 40, + "fill": "#22C55E20", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "MergeIconI", + "width": 20, + "height": 20, + "iconFontName": "git-merge", + "iconFontFamily": "lucide", + "fill": "#22C55E" + } + ] + }, + { + "type": "frame", + "id": "MergeInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "MergeTitle", + "fill": "$text-primary", + "content": "Gộp cả hai", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "MergeDesc", + "fill": "$text-tertiary", + "content": "Tự động hợp nhất (khuyên dùng)", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "MergeRadio", + "width": 22, + "height": 22, + "cornerRadius": 11, + "stroke": { + "thickness": 2, + "fill": "$border-default" + } + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ConflictFooter", + "width": "fill_container", + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 12, + "padding": [ + 16, + 24 + ], + "children": [ + { + "type": "frame", + "id": "ViewDiffBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ViewDiffIcon", + "width": 18, + "height": 18, + "iconFontName": "eye", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ViewDiffText", + "fill": "$text-secondary", + "content": "Xem khác biệt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ResolveBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ResolveIcon", + "width": 18, + "height": 18, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ResolveText", + "fill": "#FFFFFF", + "content": "Áp dụng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "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/pos/shared/dialogs/two-factor.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen new file mode 100644 index 00000000..52ca0212 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen @@ -0,0 +1,109 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "TwoFactorDialog", + "name": "Dialog/TwoFactor", + "reusable": true, + "width": 400, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 24, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TFAContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 24, + "padding": [32, 28], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", "id": "TFAIconBg", "width": 80, "height": 80, "fill": "#3B82F615", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "TFAIconInner", "width": 56, "height": 56, "fill": "#3B82F620", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TFAIcon", "width": 32, "height": 32, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]} + ] + }, + { + "type": "frame", "id": "TFATextContent", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "TFATitle", "fill": "$text-primary", "content": "Xác thực 2 bước", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, + {"type": "text", "id": "TFADesc", "fill": "$text-tertiary", "content": "Nhập mã OTP 6 chữ số đã gửi đến\nsố điện thoại ****8899", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14} + ] + }, + { + "type": "frame", + "id": "OTPInputs", + "gap": 12, + "children": [ + {"type": "frame", "id": "OTP1", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP1Val", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OTP2", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP2Val", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OTP3", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP3Val", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OTP4", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP4Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OTP5", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP5Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "OTP6", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "OTP6Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", "id": "TFATimer", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TimerIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "TimerText", "fill": "$text-tertiary", "content": "Mã hết hạn sau 02:45", "fontFamily": "Roboto", "fontSize": 13} + ] + }, + { + "type": "frame", "id": "TFAResend", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "ResendText", "fill": "$text-tertiary", "content": "Chưa nhận được mã?", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "ResendLink", "fill": "$orange-primary", "content": "Gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ] + } + ] + }, + { + "type": "frame", + "id": "TFAFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 24], + "children": [ + {"type": "frame", "id": "TFACancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "TFACancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "TFAVerifyBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "TFAVerifyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "TFAVerifyText", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen new file mode 100644 index 00000000..78663c87 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen @@ -0,0 +1,126 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "VIPBenefitsDialog", + "name": "Dialog/VIPBenefits", + "reusable": true, + "width": 400, + "height": 520, + "fill": "$bg-elevated", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "VIPHeader", + "width": "fill_container", + "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB30820", "position": 0}, {"color": "#F5940810", "position": 1}]}, + "padding": [20, 24], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "VIPIconBg", "width": 56, "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB308", "position": 0}, {"color": "#F59408", "position": 1}]}, "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "VIPIcon", "width": 28, "height": 28, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]}, + {"type": "frame", "id": "VIPTitleBox", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "VIPTitle", "fill": "#EAB308", "content": "Thành Viên VIP Gold", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "VIPSubtitle", "fill": "$text-tertiary", "content": "Quyền lợi dành riêng cho bạn", "fontFamily": "Roboto", "fontSize": 13} + ]} + ] + }, + { + "type": "frame", + "id": "VIPContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 12, + "children": [ + {"type": "frame", "id": "Benefit1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Benefit1Icon", "width": 44, "height": 44, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit1IconI", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "Benefit1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Benefit1Title", "fill": "$text-primary", "content": "Giảm 15% mọi đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Benefit1Desc", "fill": "$text-tertiary", "content": "Tự động áp dụng khi thanh toán", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Benefit1Badge", "fill": "#22C55E", "cornerRadius": 6, "padding": [4, 8], "children": [ + {"type": "text", "id": "Benefit1BadgeText", "fill": "#FFFFFF", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Benefit2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Benefit2Icon", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit2IconI", "width": 22, "height": 22, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "Benefit2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Benefit2Title", "fill": "$text-primary", "content": "Quà sinh nhật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Benefit2Desc", "fill": "$text-tertiary", "content": "Voucher 500K vào tháng sinh nhật", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Benefit2Status", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ + {"type": "text", "id": "Benefit2Days", "fill": "#3B82F6", "content": "28 ngày", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "Benefit2Label", "fill": "$text-tertiary", "content": "nữa", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Benefit3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Benefit3Icon", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit3IconI", "width": 22, "height": 22, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EC4899"} + ]}, + {"type": "frame", "id": "Benefit3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Benefit3Title", "fill": "$text-primary", "content": "Điểm thưởng x2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Benefit3Desc", "fill": "$text-tertiary", "content": "Tích điểm gấp đôi mỗi giao dịch", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Benefit3Points", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ + {"type": "text", "id": "Benefit3PointsVal", "fill": "#EC4899", "content": "2,450", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "Benefit3PointsLabel", "fill": "$text-tertiary", "content": "điểm", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Benefit4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Benefit4Icon", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit4IconI", "width": 22, "height": 22, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "Benefit4Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Benefit4Title", "fill": "$text-primary", "content": "Ưu đãi độc quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Benefit4Desc", "fill": "$text-tertiary", "content": "Chương trình dành riêng VIP", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Benefit4New", "fill": "#8B5CF6", "cornerRadius": 6, "padding": [4, 8], "children": [ + {"type": "text", "id": "Benefit4NewText", "fill": "#FFFFFF", "content": "3 mới", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "VIPFooter", + "width": "fill_container", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "ViewHistoryBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ViewHistoryIcon", "width": 16, "height": 16, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "ViewHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "ApplyVIPBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB308", "position": 0}, {"color": "#F59408", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ApplyVIPIcon", "width": 18, "height": 18, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "ApplyVIPText", "fill": "#FFFFFF", "content": "Áp dụng -15%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/cash-reconciliation.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/cash-reconciliation.pen new file mode 100644 index 00000000..ecc751fb --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/cash-reconciliation.pen @@ -0,0 +1,158 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CashReconciliationScreen", + "name": "Report/CashReconciliation", + "reusable": true, + "width": 480, + "height": 720, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ReconcileHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "ReconcileIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ReconcileIcon", "width": 22, "height": 22, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "ReconcileTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "ReconcileTitle", "fill": "$text-primary", "content": "Đối Chiếu Tiền Mặt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "ReconcileShift", "fill": "$text-tertiary", "content": "Ca sáng - Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "ReconcileClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ReconcileCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "SystemAmount", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + {"type": "frame", "id": "SystemLabel", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "SystemLabelText", "fill": "$text-secondary", "content": "Tiền mặt theo hệ thống", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "SystemNote", "fill": "$text-tertiary", "content": "Đầu ca + Thu tiền mặt - Chi", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "text", "id": "SystemAmount", "fill": "$text-primary", "content": "2,450,000đ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "ReconcileContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 16, + "children": [ + {"type": "frame", "id": "DenominationSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "text", "id": "DenomTitle", "fill": "$text-secondary", "content": "Kiểm đếm mệnh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "Denom500k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Denom500kLabel", "width": 80, "children": [ + {"type": "text", "id": "Denom500kText", "fill": "#EC4899", "content": "500,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Denom500kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Denom500kVal", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Denom500kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, + {"type": "text", "id": "Denom500kTotal", "fill": "$text-primary", "content": "1,000,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} + ]}, + {"type": "frame", "id": "Denom200k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Denom200kLabel", "width": 80, "children": [ + {"type": "text", "id": "Denom200kText", "fill": "#F97316", "content": "200,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Denom200kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Denom200kVal", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Denom200kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, + {"type": "text", "id": "Denom200kTotal", "fill": "$text-primary", "content": "1,000,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} + ]}, + {"type": "frame", "id": "Denom100k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Denom100kLabel", "width": 80, "children": [ + {"type": "text", "id": "Denom100kText", "fill": "#22C55E", "content": "100,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Denom100kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Denom100kVal", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "text", "id": "Denom100kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, + {"type": "text", "id": "Denom100kTotal", "fill": "$text-primary", "content": "400,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} + ]}, + {"type": "frame", "id": "DenomSmall", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "DenomSmallLabel", "width": 80, "children": [ + {"type": "text", "id": "DenomSmallText", "fill": "#3B82F6", "content": "Tiền lẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "DenomSmallInput", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "alignItems": "center", "children": [ + {"type": "text", "id": "DenomSmallVal", "fill": "$text-primary", "content": "35,000", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "ActualTotal", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "ActualLabel", "fill": "$text-secondary", "content": "Tiền thực tế đếm được", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "ActualAmount", "fill": "#22C55E", "content": "2,435,000đ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "DifferenceSection", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "DiffHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "DiffLabel", "fill": "$text-secondary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "DiffAmount", "fill": "#EF4444", "content": "-15,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "DiffNote", "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "DiffNoteIcon", "width": 14, "height": 14, "iconFontName": "alert-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}, + {"type": "text", "id": "DiffNoteText", "fill": "#EF4444", "content": "Thiếu so với hệ thống", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú giải trình", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ + {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Trả lại tiền thừa cho khách khi hệ thống gặp lỗi...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ReconcileFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "SaveDraftBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SaveDraftIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "SaveDraftText", "fill": "$text-secondary", "content": "Lưu nháp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SubmitBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SubmitIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "SubmitText", "fill": "#FFFFFF", "content": "Xác nhận kết ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/staff-performance.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/staff-performance.pen new file mode 100644 index 00000000..cde89311 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/staff-performance.pen @@ -0,0 +1,147 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffPerformanceReport", + "name": "Report/StaffPerformance", + "reusable": true, + "width": 520, + "height": 700, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PerfHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PerfIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PerfIcon", "width": 22, "height": 22, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "PerfTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "PerfTitle", "fill": "$text-primary", "content": "Hiệu Suất Nhân Viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "PerfPeriod", "fill": "$text-tertiary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "PerfFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PerfFilterIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "PerfFilterText", "fill": "$text-secondary", "content": "Tháng", "fontFamily": "Roboto", "fontSize": 13} + ]} + ] + }, + { + "type": "frame", + "id": "TopPerformers", + "width": "fill_container", + "padding": [16, 20], + "gap": 10, + "layout": "vertical", + "children": [ + {"type": "text", "id": "TopTitle", "fill": "$text-secondary", "content": "Top nhân viên xuất sắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "TopList", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "Top1", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "rotation": 180, "colors": [{"color": "#EAB30820", "position": 0}, {"color": "#EAB30805", "position": 1}]}, "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Top1Crown", "width": 24, "height": 24, "fill": "#EAB308", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top1Rank", "fill": "#FFFFFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Top1Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top1Init", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "text", "id": "Top1Name", "fill": "$text-primary", "content": "Nguyễn An", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, + {"type": "text", "id": "Top1Sales", "fill": "#EAB308", "content": "5.2M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Top2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Top2Badge", "width": 24, "height": 24, "fill": "#A1A1AA", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top2Rank", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Top2Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top2Init", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "text", "id": "Top2Name", "fill": "$text-primary", "content": "Thị Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, + {"type": "text", "id": "Top2Sales", "fill": "#A1A1AA", "content": "4.8M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Top3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Top3Badge", "width": 24, "height": 24, "fill": "#CD7F32", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top3Rank", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Top3Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Top3Init", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "text", "id": "Top3Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, + {"type": "text", "id": "Top3Sales", "fill": "#CD7F32", "content": "4.1M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "StaffMetrics", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [0, 20], + "gap": 8, + "children": [ + {"type": "text", "id": "MetricsTitle", "fill": "$text-secondary", "content": "Chi tiết hiệu suất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 6, 0]}, + {"type": "frame", "id": "Staff1Row", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "text", "id": "Staff1Rank", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600", "width": 20, "textAlign": "center"}, + {"type": "frame", "id": "Staff1Avatar", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#F472B6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Staff1Init", "fill": "#FFFFFF", "content": "PL", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Phương Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Staff1Orders", "fill": "$text-tertiary", "content": "89 đơn hàng", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Staff1Sales", "fill": "#22C55E", "content": "3.6M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Staff2Row", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "text", "id": "Staff2Rank", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600", "width": 20, "textAlign": "center"}, + {"type": "frame", "id": "Staff2Avatar", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#06B6D4", "position": 0}, {"color": "#22D3EE", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Staff2Init", "fill": "#FFFFFF", "content": "HN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Hoàng Nam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Staff2Orders", "fill": "$text-tertiary", "content": "76 đơn hàng", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Staff2Sales", "fill": "#22C55E", "content": "2.9M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "PerfFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "ExportBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ExportIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "ExportText", "fill": "$text-secondary", "content": "Xuất báo cáo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "CommissionBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CommissionIcon", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "CommissionText", "fill": "#FFFFFF", "content": "Tính hoa hồng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen new file mode 100644 index 00000000..775e8b47 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen @@ -0,0 +1,163 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "BackupRestoreScreen", + "name": "Screen/BackupRestore", + "reusable": true, + "width": 480, + "height": 680, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "BackupHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "BackupIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BackupIcon", "width": 22, "height": 22, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "BackupTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "BackupTitle", "fill": "$text-primary", "content": "Sao Lưu & Khôi Phục", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "BackupSubtitle", "fill": "$text-tertiary", "content": "Quản lý dữ liệu an toàn", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "BackupClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BackupCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "BackupStatus", + "width": "fill_container", + "fill": "#22C55E15", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StatusIcon", "width": 48, "height": 48, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StatusCheckIcon", "width": 24, "height": 24, "iconFontName": "cloud-check", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]}, + {"type": "frame", "id": "StatusInfo", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "StatusTitle", "fill": "#22C55E", "content": "Đã đồng bộ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, + {"type": "text", "id": "StatusTime", "fill": "$text-tertiary", "content": "Lần cuối: 06/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "SyncBtn", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 14], "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SyncIcon", "width": 16, "height": 16, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "SyncText", "fill": "$text-secondary", "content": "Đồng bộ", "fontFamily": "Roboto", "fontSize": 13} + ]} + ] + }, + { + "type": "frame", + "id": "BackupContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 16, + "children": [ + {"type": "frame", "id": "BackupSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "text", "id": "BackupSectionTitle", "fill": "$text-secondary", "content": "Sao lưu dữ liệu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "BackupCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "BackupIconCloud", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "BackupCloudIcon", "width": 20, "height": 20, "iconFontName": "cloud-upload", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "BackupCardInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "BackupCardTitle", "fill": "$text-primary", "content": "Sao lưu lên Cloud", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "BackupCardDesc", "fill": "$text-tertiary", "content": "Tự động mỗi 6 giờ", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "BackupNowBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "BackupNowText", "fill": "#FFFFFF", "content": "Backup", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "LocalBackupCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "LocalIconBox", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LocalIcon", "width": 20, "height": 20, "iconFontName": "hard-drive", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "LocalCardInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "LocalCardTitle", "fill": "$text-primary", "content": "Lưu trữ ngoại tuyến", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "LocalCardDesc", "fill": "$text-tertiary", "content": "Tải về thiết bị", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "LocalExportBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "LocalExportText", "fill": "$text-secondary", "content": "Tải về", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]} + ]} + ]}, + {"type": "frame", "id": "RestoreSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "text", "id": "RestoreSectionTitle", "fill": "$text-secondary", "content": "Phiên bản sao lưu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "BackupList", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "Backup1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Backup1Icon", "width": 36, "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Backup1IconI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "Backup1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Backup1Time", "fill": "$text-primary", "content": "06/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Backup1Size", "fill": "$text-tertiary", "content": "45.2 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "text", "id": "Backup1Label", "fill": "#22C55E", "content": "Mới nhất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Backup2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Backup2Icon", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Backup2IconI", "width": 18, "height": 18, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]}, + {"type": "frame", "id": "Backup2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Backup2Time", "fill": "$text-primary", "content": "06/02/2026 - 14:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Backup2Size", "fill": "$text-tertiary", "content": "44.8 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Backup2Action", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [6, 10], "children": [ + {"type": "text", "id": "Backup2ActionText", "fill": "$text-secondary", "content": "Khôi phục", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Backup3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "Backup3Icon", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Backup3IconI", "width": 18, "height": 18, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]}, + {"type": "frame", "id": "Backup3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Backup3Time", "fill": "$text-primary", "content": "05/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "text", "id": "Backup3Size", "fill": "$text-tertiary", "content": "43.5 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Backup3Action", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [6, 10], "children": [ + {"type": "text", "id": "Backup3ActionText", "fill": "$text-secondary", "content": "Khôi phục", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "BackupFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": [12, 20], + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "icon_font", "id": "FooterWarnIcon", "width": 16, "height": 16, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "FooterText", "fill": "$text-tertiary", "content": "Dữ liệu được mã hóa AES-256", "fontFamily": "Roboto", "fontSize": 12, "width": "fill_container"} + ] + } + ] + } + ], + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen new file mode 100644 index 00000000..97048be7 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen @@ -0,0 +1,536 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "BiometricSetupScreen", + "x": 0, + "y": 0, + "name": "Screen/BiometricSetup", + "reusable": true, + "width": 480, + "height": 700, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "BioHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "gap": 12, + "padding": [ + 16, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BioIconBg", + "width": 44, + "height": 44, + "fill": "#8B5CF615", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BioIcon", + "width": 22, + "height": 22, + "iconFontName": "fingerprint", + "iconFontFamily": "lucide", + "fill": "#8B5CF6" + } + ] + }, + { + "type": "frame", + "id": "BioTitleBox", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "BioTitle", + "fill": "$text-primary", + "content": "Sinh Trắc Học", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "BioSubtitle", + "fill": "$text-tertiary", + "content": "Đăng nhập nhanh & bảo mật", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BioClose", + "width": 36, + "height": 36, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BioCloseIcon", + "width": 18, + "height": 18, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "BioContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": [ + 20, + 24 + ], + "children": [ + { + "type": "frame", + "id": "FingerprintSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "layout": "vertical", + "gap": 16, + "padding": 20, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FingerprintVisual", + "width": 100, + "height": 100, + "fill": { + "type": "gradient", + "gradientType": "radial", + "enabled": true, + "rotation": 0, + "size": { + "width": 1, + "height": 1 + }, + "colors": [ + { + "color": "#8B5CF630", + "position": 0 + }, + { + "color": "#8B5CF610", + "position": 1 + } + ] + }, + "cornerRadius": 50, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FingerprintInner", + "width": 70, + "height": 70, + "fill": "#8B5CF620", + "cornerRadius": 35, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FingerprintIcon", + "width": 40, + "height": 40, + "iconFontName": "fingerprint", + "iconFontFamily": "lucide", + "fill": "#8B5CF6" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FingerprintInfo", + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FingerprintTitle", + "fill": "$text-primary", + "content": "Vân tay", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FingerprintStatus", + "fill": "#22C55E", + "content": "Đã thiết lập (2 vân tay)", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "FingerprintToggle", + "width": 56, + "height": 30, + "fill": "#22C55E", + "cornerRadius": 15, + "padding": 3, + "children": [ + { + "type": "frame", + "id": "FingerprintKnob", + "width": 24, + "height": 24, + "fill": "#FFFFFF", + "cornerRadius": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FaceIDSection", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "gap": 14, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "FaceIDVisual", + "width": 52, + "height": 52, + "fill": "#3B82F620", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FaceIDIcon", + "width": 28, + "height": 28, + "iconFontName": "scan-face", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + } + ] + }, + { + "type": "frame", + "id": "FaceIDInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "FaceIDTitle", + "fill": "$text-primary", + "content": "Face ID", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "text", + "id": "FaceIDStatus", + "fill": "$text-tertiary", + "content": "Chưa thiết lập", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "FaceIDToggle", + "width": 56, + "height": 30, + "fill": "$bg-interactive", + "cornerRadius": 15, + "padding": 3, + "children": [ + { + "type": "frame", + "id": "FaceIDKnob", + "width": 24, + "height": 24, + "fill": "$text-tertiary", + "cornerRadius": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SecurityNote", + "width": "fill_container", + "fill": "#3B82F615", + "cornerRadius": 12, + "gap": 12, + "padding": 14, + "children": [ + { + "type": "icon_font", + "id": "SecurityNoteIcon", + "width": 20, + "height": 20, + "iconFontName": "shield-check", + "iconFontFamily": "lucide", + "fill": "#3B82F6" + }, + { + "type": "frame", + "id": "SecurityNoteInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "SecurityNoteTitle", + "fill": "#3B82F6", + "content": "Bảo mật nâng cao", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SecurityNoteDesc", + "fill": "$text-tertiary", + "content": "Dữ liệu sinh trắc học được lưu trữ an toàn trên thiết bị và không bao giờ được gửi lên server.", + "lineHeight": 1.4, + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "OptionsSection", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "children": [ + { + "type": "frame", + "id": "QuickAuthOption", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QuickAuthIcon", + "width": 20, + "height": 20, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "frame", + "id": "QuickAuthInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "QuickAuthTitle", + "fill": "$text-primary", + "content": "Mở khóa nhanh", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "QuickAuthDesc", + "fill": "$text-tertiary", + "content": "Bỏ qua màn hình khóa", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "QuickAuthToggle", + "width": 44, + "height": 24, + "fill": "#22C55E", + "cornerRadius": 12, + "padding": 2, + "children": [ + { + "type": "frame", + "id": "QuickAuthKnob", + "width": 20, + "height": 20, + "fill": "#FFFFFF", + "cornerRadius": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "RequireAuthOption", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 12, + "padding": 14, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RequireAuthIcon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "frame", + "id": "RequireAuthInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "RequireAuthTitle", + "fill": "$text-primary", + "content": "Xác thực thanh toán", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "RequireAuthDesc", + "fill": "$text-tertiary", + "content": "Yêu cầu khi thanh toán", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "RequireAuthToggle", + "width": 44, + "height": 24, + "fill": "$bg-interactive", + "cornerRadius": 12, + "padding": 2, + "children": [ + { + "type": "frame", + "id": "RequireAuthKnob", + "width": 20, + "height": 20, + "fill": "$text-tertiary", + "cornerRadius": 10 + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "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/pos/shared/screens/commission-setup.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/commission-setup.pen new file mode 100644 index 00000000..5883231e --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/commission-setup.pen @@ -0,0 +1,135 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CommissionSetupScreen", + "name": "Screen/CommissionSetup", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CommHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "CommIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CommIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "CommTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "CommTitle", "fill": "$text-primary", "content": "Cấu Hình Hoa Hồng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "CommSubtitle", "fill": "$text-tertiary", "content": "Thiết lập tỷ lệ hoa hồng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "CommClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CommCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "CommContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 14, + "children": [ + {"type": "frame", "id": "RuleSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "text", "id": "RuleTitle", "fill": "$text-secondary", "content": "Quy tắc hoa hồng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "Rule1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Rule1Icon", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Rule1IconI", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "Rule1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Rule1Name", "fill": "$text-primary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Rule1Desc", "fill": "$text-tertiary", "content": "Hoa hồng theo doanh số", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Rule1Value", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Rule1Percent", "fill": "#22C55E", "content": "3%", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Rule2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Rule2Icon", "width": 40, "height": 40, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Rule2IconI", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#F97316"} + ]}, + {"type": "frame", "id": "Rule2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Rule2Name", "fill": "$text-primary", "content": "Đồ ăn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Rule2Desc", "fill": "$text-tertiary", "content": "Hoa hồng theo doanh số", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Rule2Value", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Rule2Percent", "fill": "#22C55E", "content": "2%", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Rule3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Rule3Icon", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Rule3IconI", "width": 20, "height": 20, "iconFontName": "target", "iconFontFamily": "lucide", "fill": "#EC4899"} + ]}, + {"type": "frame", "id": "Rule3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Rule3Name", "fill": "$text-primary", "content": "Bonus đạt target", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Rule3Desc", "fill": "$text-tertiary", "content": "Thưởng khi đạt doanh số 5M/tháng", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Rule3Value", "fill": "#EC489920", "cornerRadius": 8, "padding": [8, 12], "children": [ + {"type": "text", "id": "Rule3Amount", "fill": "#EC4899", "content": "500K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ]} + ]}, + {"type": "frame", "id": "AddRuleBtn", "width": "fill_container", "height": 48, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddRuleIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "AddRuleText", "fill": "$orange-primary", "content": "Thêm quy tắc mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "PayoutSection", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "text", "id": "PayoutTitle", "fill": "$text-secondary", "content": "Tổng hoa hồng tháng này", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, + {"type": "frame", "id": "PayoutDetails", "width": "fill_container", "gap": 16, "children": [ + {"type": "frame", "id": "PayoutAmount", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "PayoutValue", "fill": "#22C55E", "content": "2,450,000đ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, + {"type": "text", "id": "PayoutLabel", "fill": "$text-tertiary", "content": "Cho 8 nhân viên", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "PayoutBtn", "fill": "#22C55E", "cornerRadius": 10, "padding": [10, 16], "gap": 6, "alignItems": "center", "alignSelf": "center", "children": [ + {"type": "icon_font", "id": "PayoutBtnIcon", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "PayoutBtnText", "fill": "#FFFFFF", "content": "Chi trả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "CommFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "ResetBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "ResetText", "fill": "$text-secondary", "content": "Đặt lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SaveCommBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SaveCommIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "SaveCommText", "fill": "#FFFFFF", "content": "Lưu cấu hình", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen new file mode 100644 index 00000000..0d425ce8 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen @@ -0,0 +1,133 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerGroupScreen", + "name": "Screen/CustomerGroup", + "reusable": true, + "width": 520, + "height": 680, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "GroupHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "GroupIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "GroupIcon", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "GroupTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "GroupTitle", "fill": "$text-primary", "content": "Nhóm Khách Hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "GroupSubtitle", "fill": "$text-tertiary", "content": "Quản lý phân loại khách hàng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "AddGroupBtn", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddGroupIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ] + }, + { + "type": "frame", + "id": "GroupSearch", + "width": "fill_container", + "padding": [12, 20], + "children": [ + {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm nhóm khách hàng...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ] + }, + { + "type": "frame", + "id": "GroupList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [0, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Group1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Group1Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Group1Badge", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group1Icon", "width": 22, "height": 22, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "Group1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Group1Name", "fill": "#EAB308", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "text", "id": "Group1Count", "fill": "$text-tertiary", "content": "48 khách hàng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "Group1More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group1MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]}, + {"type": "frame", "id": "Group1Benefits", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ + {"type": "frame", "id": "Benefit1", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "Benefit1Text", "fill": "$text-secondary", "content": "Giảm 15% tất cả sản phẩm", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Benefit2", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Benefit2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "Benefit2Text", "fill": "$text-secondary", "content": "Tích 2x điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]} + ]}, + {"type": "frame", "id": "Group2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Group2Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Group2Badge", "width": 44, "height": 44, "fill": "#A1A1AA15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group2Icon", "width": 22, "height": 22, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#A1A1AA"} + ]}, + {"type": "frame", "id": "Group2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Group2Name", "fill": "#A1A1AA", "content": "VIP Silver", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "text", "id": "Group2Count", "fill": "$text-tertiary", "content": "124 khách hàng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "Group2More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group2MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]}, + {"type": "frame", "id": "Group2Benefits", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ + {"type": "frame", "id": "G2Benefit1", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "G2Benefit1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "G2Benefit1Text", "fill": "$text-secondary", "content": "Giảm 10% tất cả sản phẩm", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "G2Benefit2", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "G2Benefit2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "G2Benefit2Text", "fill": "$text-secondary", "content": "Tích 1.5x điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]} + ]}, + {"type": "frame", "id": "Group3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Group3Badge", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group3Icon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "Group3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Group3Name", "fill": "#3B82F6", "content": "Khách thường", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "text", "id": "Group3Count", "fill": "$text-tertiary", "content": "892 khách hàng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "Group3More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Group3MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen new file mode 100644 index 00000000..364f0fba --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen @@ -0,0 +1,473 @@ +{ + "version": "2.7", + "children": [ + { + "type": "frame", + "id": "PasswordResetScreen", + "x": 0, + "y": 0, + "name": "Screen/PasswordReset", + "reusable": true, + "width": 480, + "height": 747, + "fill": "$bg-page", + "layout": "vertical", + "gap": 32, + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ResetBrand", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ResetIconBg", + "width": 72, + "height": 72, + "fill": "#EAB30815", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ResetIconInner", + "width": 52, + "height": 52, + "fill": "#EAB30820", + "cornerRadius": 26, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ResetIcon", + "width": 28, + "height": 28, + "iconFontName": "key-round", + "iconFontFamily": "lucide", + "fill": "#EAB308" + } + ] + } + ] + }, + { + "type": "text", + "id": "ResetTitle", + "fill": "$text-primary", + "content": "Đổi mật khẩu", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + }, + { + "type": "text", + "id": "ResetSubtitle", + "fill": "$text-tertiary", + "content": "Nhập mật khẩu mới cho tài khoản", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ResetForm", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "CurrentPassField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "CurrentPassLabel", + "fill": "$text-secondary", + "content": "Mật khẩu hiện tại", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "CurrentPassInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CurrentPassIcon", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "CurrentPassPlaceholder", + "fill": "$text-tertiary", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NewPassField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "NewPassLabel", + "fill": "$text-secondary", + "content": "Mật khẩu mới", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "NewPassInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NewPassIcon", + "width": 20, + "height": 20, + "iconFontName": "key", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NewPassPlaceholder", + "fill": "$text-tertiary", + "content": "Nhập mật khẩu mới", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ConfirmPassField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ConfirmPassLabel", + "fill": "$text-secondary", + "content": "Xác nhận mật khẩu", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "ConfirmPassInput", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 12, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ConfirmPassIcon", + "width": 20, + "height": 20, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "ConfirmPassPlaceholder", + "fill": "$text-tertiary", + "content": "Nhập lại mật khẩu mới", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PasswordRules", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "layout": "vertical", + "gap": 8, + "padding": 16, + "children": [ + { + "type": "text", + "id": "RulesTitle", + "fill": "$text-secondary", + "content": "Yêu cầu mật khẩu:", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Rule1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Rule1Icon", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "Rule1Text", + "fill": "$text-tertiary", + "content": "Ít nhất 8 ký tự", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Rule2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Rule2Icon", + "width": 14, + "height": 14, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "#22C55E" + }, + { + "type": "text", + "id": "Rule2Text", + "fill": "$text-tertiary", + "content": "Chứa chữ hoa và chữ thường", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Rule3", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Rule3Icon", + "width": 14, + "height": 14, + "iconFontName": "circle", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "Rule3Text", + "fill": "$text-tertiary", + "content": "Chứa số và ký tự đặc biệt", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ResetActions", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "ResetSubmitBtn", + "width": "fill_container", + "height": 52, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 14, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ResetSubmitIcon", + "width": 20, + "height": 20, + "iconFontName": "save", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "ResetSubmitText", + "fill": "#FFFFFF", + "content": "Đổi mật khẩu", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ResetCancelBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ResetCancelText", + "fill": "$text-secondary", + "content": "Hủy bỏ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-interactive": { + "type": "color", + "value": "#2A2A2E" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "border-default": { + "type": "color", + "value": "#2A2A2E" + }, + "orange-primary": { + "type": "color", + "value": "#FF5C00" + }, + "text-primary": { + "type": "color", + "value": "#FFFFFF" + }, + "text-secondary": { + "type": "color", + "value": "#ADADB0" + }, + "text-tertiary": { + "type": "color", + "value": "#8B8B90" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen new file mode 100644 index 00000000..1b2601a9 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen @@ -0,0 +1,144 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PendingOrdersScreen", + "name": "Screen/PendingOrders", + "reusable": true, + "width": 520, + "height": 700, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PendingHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PendingIconBg", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PendingIcon", "width": 22, "height": 22, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "frame", "id": "PendingTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "PendingTitle", "fill": "$text-primary", "content": "Đơn Hàng Đang Chờ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "PendingCount", "fill": "$text-tertiary", "content": "5 đơn hàng", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "PendingClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PendingCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "FilterTabs", + "width": "fill_container", + "padding": [12, 20], + "gap": 8, + "children": [ + {"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 20, "padding": [8, 16], "children": [ + {"type": "text", "id": "TabAllText", "fill": "#FFFFFF", "content": "Tất cả (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "TabPreparing", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 16], "children": [ + {"type": "text", "id": "TabPreparingText", "fill": "$text-secondary", "content": "Đang làm (3)", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "TabReady", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 16], "children": [ + {"type": "text", "id": "TabReadyText", "fill": "$text-secondary", "content": "Sẵn sàng (2)", "fontFamily": "Roboto", "fontSize": 13} + ]} + ] + }, + { + "type": "frame", + "id": "OrdersList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [0, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Order1Info", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Order1Id", "fill": "$text-primary", "content": "#00458", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "frame", "id": "Order1Table", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ + {"type": "text", "id": "Order1TableText", "fill": "$text-tertiary", "content": "Bàn 05", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Order1Status", "fill": "#EAB30820", "cornerRadius": 8, "padding": [6, 10], "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order1StatusIcon", "width": 12, "height": 12, "iconFontName": "loader-2", "iconFontFamily": "lucide", "fill": "#EAB308"}, + {"type": "text", "id": "Order1StatusText", "fill": "#EAB308", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Order1Items", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": 10, "gap": 6, "layout": "vertical", "children": [ + {"type": "text", "id": "Order1Item1", "fill": "$text-secondary", "content": "2× Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "text", "id": "Order1Item2", "fill": "$text-secondary", "content": "1× Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "Order1Footer", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Order1Time", "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order1TimeIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "Order1TimeText", "fill": "$text-tertiary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Order1Total", "fill": "$orange-primary", "content": "95,000đ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Order2Info", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Order2Id", "fill": "$text-primary", "content": "#00457", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "frame", "id": "Order2Table", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ + {"type": "text", "id": "Order2TableText", "fill": "$text-tertiary", "content": "Mang đi", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Order2Status", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 10], "gap": 4, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order2StatusIcon", "width": 12, "height": 12, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "Order2StatusText", "fill": "#22C55E", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Order2Items", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": 10, "gap": 6, "layout": "vertical", "children": [ + {"type": "text", "id": "Order2Item1", "fill": "$text-secondary", "content": "1× Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "Order2Footer", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Order2Time", "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Order2TimeIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "Order2TimeText", "fill": "$text-tertiary", "content": "12 phút trước", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "text", "id": "Order2Total", "fill": "$orange-primary", "content": "45,000đ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "PendingFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": [14, 20], + "justifyContent": "center", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RefreshBtn", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RefreshIcon", "width": 18, "height": 18, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "RefreshText", "fill": "$orange-primary", "content": "Làm mới danh sách", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen new file mode 100644 index 00000000..edcd250c --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen @@ -0,0 +1,139 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PromoActiveScreen", + "name": "Screen/PromoActive", + "reusable": true, + "width": 520, + "height": 680, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "PromoHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PromoIconBg", "width": 44, "height": 44, "fill": "#EC489915", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PromoIcon", "width": 22, "height": 22, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#EC4899"} + ]}, + {"type": "frame", "id": "PromoTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "PromoTitle", "fill": "$text-primary", "content": "Khuyến Mãi Đang Chạy", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "PromoCount", "fill": "$text-tertiary", "content": "4 chương trình đang hoạt động", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "PromoClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PromoCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "PromoList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 12, + "children": [ + {"type": "frame", "id": "Promo1", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC489920", "position": 0}, {"color": "#F472B610", "position": 1}]}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Promo1Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Promo1Badge", "fill": "#EC4899", "cornerRadius": 8, "padding": [6, 10], "children": [ + {"type": "text", "id": "Promo1Discount", "fill": "#FFFFFF", "content": "-30%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Promo1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo1Name", "fill": "$text-primary", "content": "Happy Hour Sáng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, + {"type": "text", "id": "Promo1Time", "fill": "$text-tertiary", "content": "06:00 - 09:00 hàng ngày", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Promo1Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ + {"type": "frame", "id": "Promo1ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} + ]} + ]}, + {"type": "frame", "id": "Promo1Stats", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 16, "children": [ + {"type": "frame", "id": "Promo1Stat1", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo1Stat1Val", "fill": "#EC4899", "content": "127", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "Promo1Stat1Label", "fill": "$text-tertiary", "content": "Đã dùng", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Promo1Stat2", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo1Stat2Val", "fill": "#22C55E", "content": "1.2M", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "Promo1Stat2Label", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]} + ]}, + {"type": "frame", "id": "Promo2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Promo2Badge", "fill": "#F97316", "cornerRadius": 8, "padding": [6, 10], "children": [ + {"type": "text", "id": "Promo2Discount", "fill": "#FFFFFF", "content": "2+1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Promo2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo2Name", "fill": "$text-primary", "content": "Mua 2 Tặng 1", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, + {"type": "text", "id": "Promo2Desc", "fill": "$text-tertiary", "content": "Áp dụng cho cà phê", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Promo2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ + {"type": "frame", "id": "Promo2ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} + ]} + ]}, + {"type": "frame", "id": "Promo3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Promo3Badge", "fill": "#3B82F6", "cornerRadius": 8, "padding": [6, 10], "children": [ + {"type": "text", "id": "Promo3Discount", "fill": "#FFFFFF", "content": "-15%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Promo3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo3Name", "fill": "$text-primary", "content": "VIP Member", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, + {"type": "text", "id": "Promo3Desc", "fill": "$text-tertiary", "content": "Ưu đãi thành viên VIP", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Promo3Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ + {"type": "frame", "id": "Promo3ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} + ]} + ]}, + {"type": "frame", "id": "Promo4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#EF444430"}, "children": [ + {"type": "frame", "id": "Promo4Badge", "fill": "#EF4444", "cornerRadius": 8, "padding": [6, 10], "children": [ + {"type": "text", "id": "Promo4Discount", "fill": "#FFFFFF", "content": "-50%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Promo4Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Promo4Name", "fill": "$text-primary", "content": "Flash Sale", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, + {"type": "frame", "id": "Promo4Timer", "gap": 6, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Promo4TimerIcon", "width": 12, "height": 12, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EF4444"}, + {"type": "text", "id": "Promo4TimerText", "fill": "#EF4444", "content": "Còn 2h 15m", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "Promo4Toggle", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [2, 2], "children": [ + {"type": "frame", "id": "Promo4ToggleKnob", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 10} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "PromoFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "padding": [16, 20], + "justifyContent": "center", + "children": [ + {"type": "frame", "id": "AddPromoBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddPromoIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "AddPromoText", "fill": "#FFFFFF", "content": "Thêm khuyến mãi mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen new file mode 100644 index 00000000..75c9861c --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen @@ -0,0 +1,154 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffListScreen", + "name": "Screen/StaffList", + "reusable": true, + "width": 520, + "height": 700, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "StaffHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StaffIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StaffIcon", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "StaffTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Quản Lý Nhân Viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "StaffCount", "fill": "$text-tertiary", "content": "8 nhân viên đang làm việc", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "AddStaffBtn", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddStaffIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} + ]} + ] + }, + { + "type": "frame", + "id": "StaffSearch", + "width": "fill_container", + "padding": [12, 20], + "children": [ + {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm nhân viên...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ] + }, + { + "type": "frame", + "id": "RoleTabs", + "width": "fill_container", + "padding": [0, 20], + "gap": 8, + "children": [ + {"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 20, "padding": [8, 14], "children": [ + {"type": "text", "id": "TabAllText", "fill": "#FFFFFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "TabCashier", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ + {"type": "text", "id": "TabCashierText", "fill": "$text-secondary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "TabKitchen", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ + {"type": "text", "id": "TabKitchenText", "fill": "$text-secondary", "content": "Bếp", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "TabWaiter", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ + {"type": "text", "id": "TabWaiterText", "fill": "$text-secondary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13} + ]} + ] + }, + { + "type": "frame", + "id": "StaffList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [12, 20], + "gap": 10, + "children": [ + {"type": "frame", "id": "Staff1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff1Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Staff1Initials", "fill": "#FFFFFF", "content": "NV", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, + {"type": "frame", "id": "Staff1Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff1Role", "fill": "#3B82F620", "cornerRadius": 6, "padding": [3, 8], "children": [ + {"type": "text", "id": "Staff1RoleText", "fill": "#3B82F6", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Staff1Status", "gap": 4, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff1StatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 3}, + {"type": "text", "id": "Staff1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]} + ]}, + {"type": "frame", "id": "Staff1More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff1MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]}, + {"type": "frame", "id": "Staff2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff2Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Staff2Initials", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Trần Thị Hương", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, + {"type": "frame", "id": "Staff2Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff2Role", "fill": "#F9731620", "cornerRadius": 6, "padding": [3, 8], "children": [ + {"type": "text", "id": "Staff2RoleText", "fill": "#F97316", "content": "Bếp", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Staff2Status", "gap": 4, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff2StatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 3}, + {"type": "text", "id": "Staff2StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]} + ]}, + {"type": "frame", "id": "Staff2More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff2MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]}, + {"type": "frame", "id": "Staff3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff3Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Staff3Initials", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "Staff3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Staff3Name", "fill": "$text-primary", "content": "Lê Minh Tuấn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, + {"type": "frame", "id": "Staff3Meta", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff3Role", "fill": "#10B98120", "cornerRadius": 6, "padding": [3, 8], "children": [ + {"type": "text", "id": "Staff3RoleText", "fill": "#10B981", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "Staff3Status", "gap": 4, "alignItems": "center", "children": [ + {"type": "frame", "id": "Staff3StatusDot", "width": 6, "height": 6, "fill": "$text-tertiary", "cornerRadius": 3}, + {"type": "text", "id": "Staff3StatusText", "fill": "$text-tertiary", "content": "Nghỉ ca", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]} + ]}, + {"type": "frame", "id": "Staff3More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff3MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen new file mode 100644 index 00000000..2d53f759 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen @@ -0,0 +1,194 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffScheduleScreen", + "name": "Screen/StaffSchedule", + "reusable": true, + "width": 560, + "height": 720, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ScheduleHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "ScheduleIconBg", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "ScheduleIcon", "width": 22, "height": 22, "iconFontName": "calendar-days", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "ScheduleTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "ScheduleTitle", "fill": "$text-primary", "content": "Lịch Làm Việc", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "ScheduleWeek", "fill": "$text-tertiary", "content": "Tuần 06/02 - 12/02/2026", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "ScheduleNav", "gap": 8, "children": [ + {"type": "frame", "id": "PrevWeek", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PrevWeekIcon", "width": 16, "height": 16, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "frame", "id": "NextWeek", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NextWeekIcon", "width": 16, "height": 16, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "DayTabs", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [12, 16], + "gap": 4, + "justifyContent": "space_between", + "children": [ + {"type": "frame", "id": "Day1", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day1Name", "fill": "$text-tertiary", "content": "T2", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day1Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day1NumText", "fill": "$text-secondary", "content": "06", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day2", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day2Name", "fill": "$text-primary", "content": "T3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, + {"type": "frame", "id": "Day2Num", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day2NumText", "fill": "#FFFFFF", "content": "07", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day3", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day3Name", "fill": "$text-tertiary", "content": "T4", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day3Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day3NumText", "fill": "$text-secondary", "content": "08", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day4", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day4Name", "fill": "$text-tertiary", "content": "T5", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day4Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day4NumText", "fill": "$text-secondary", "content": "09", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day5", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day5Name", "fill": "$text-tertiary", "content": "T6", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day5Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day5NumText", "fill": "$text-secondary", "content": "10", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day6", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day6Name", "fill": "$text-tertiary", "content": "T7", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day6Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day6NumText", "fill": "$text-secondary", "content": "11", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "Day7", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ + {"type": "text", "id": "Day7Name", "fill": "$text-tertiary", "content": "CN", "fontFamily": "Roboto", "fontSize": 11}, + {"type": "frame", "id": "Day7Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Day7NumText", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ShiftList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [16, 20], + "gap": 16, + "children": [ + {"type": "frame", "id": "MorningShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "MorningHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "MorningIcon", "width": 24, "height": 24, "fill": "#EAB30820", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "MorningIconI", "width": 14, "height": 14, "iconFontName": "sunrise", "iconFontFamily": "lucide", "fill": "#EAB308"} + ]}, + {"type": "text", "id": "MorningTitle", "fill": "$text-primary", "content": "Ca sáng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "MorningTime", "fill": "$text-tertiary", "content": "06:00 - 14:00", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "MorningStaff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "children": [ + {"type": "frame", "id": "MS1", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "MS1Text", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "MS2", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "MS2Text", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "MS3", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "MS3Text", "fill": "#FFFFFF", "content": "LT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "AddMorning", "width": 36, "height": 36, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddMorningIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]}, + {"type": "frame", "id": "AfternoonShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "AfternoonHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "AfternoonIcon", "width": 24, "height": 24, "fill": "#F9731620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AfternoonIconI", "width": 14, "height": 14, "iconFontName": "sun", "iconFontFamily": "lucide", "fill": "#F97316"} + ]}, + {"type": "text", "id": "AfternoonTitle", "fill": "$text-primary", "content": "Ca chiều", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "AfternoonTime", "fill": "$text-tertiary", "content": "14:00 - 22:00", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "AfternoonStaff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "children": [ + {"type": "frame", "id": "AS1", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#F472B6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AS1Text", "fill": "#FFFFFF", "content": "PL", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "AS2", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#06B6D4", "position": 0}, {"color": "#22D3EE", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "AS2Text", "fill": "#FFFFFF", "content": "HN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "AddAfternoon", "width": 36, "height": 36, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "AddAfternoonIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ]}, + {"type": "frame", "id": "NightShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "NightHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "NightIcon", "width": 24, "height": 24, "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NightIconI", "width": 14, "height": 14, "iconFontName": "moon", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "text", "id": "NightTitle", "fill": "$text-primary", "content": "Ca tối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "NightTime", "fill": "$text-tertiary", "content": "22:00 - 06:00", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "NightEmpty", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "NightEmptyIcon", "width": 20, "height": 20, "iconFontName": "user-x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "NightEmptyText", "fill": "$text-tertiary", "content": "Chưa có nhân viên", "fontFamily": "Roboto", "fontSize": 13} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "ScheduleFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "EditScheduleBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "EditScheduleIcon", "width": 18, "height": 18, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "EditScheduleText", "fill": "$text-secondary", "content": "Chỉnh sửa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "PublishBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PublishIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "PublishText", "fill": "#FFFFFF", "content": "Đăng lịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen new file mode 100644 index 00000000..466ea46d --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen @@ -0,0 +1,176 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StockCountScreen", + "name": "Screen/StockCount", + "reusable": true, + "width": 520, + "height": 720, + "fill": "$bg-page", + "cornerRadius": 20, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "StockCountHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 20], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StockCountIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StockCountIcon", "width": 22, "height": 22, "iconFontName": "clipboard-check", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "StockCountTitle", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "StockCountTitleText", "fill": "$text-primary", "content": "Kiểm Kê Tồn Kho", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "StockCountSubtitle", "fill": "$text-tertiary", "content": "Ca sáng - 06/02/2026", "fontFamily": "Roboto", "fontSize": 13} + ]}, + {"type": "frame", "id": "StockCountClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StockCountCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]} + ] + }, + { + "type": "frame", + "id": "StockCountSearch", + "width": "fill_container", + "padding": [12, 20], + "children": [ + {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm theo tên hoặc mã...", "fontFamily": "Roboto", "fontSize": 14} + ]} + ] + }, + { + "type": "frame", + "id": "StockCountStats", + "width": "fill_container", + "padding": [0, 20], + "gap": 12, + "children": [ + {"type": "frame", "id": "StatTotal", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "StatTotalNum", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng SP", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "StatCounted", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "StatCountedNum", "fill": "#22C55E", "content": "32", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "StatCountedLabel", "fill": "$text-tertiary", "content": "Đã kiểm", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "StatDiff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "StatDiffNum", "fill": "#EF4444", "content": "3", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, + {"type": "text", "id": "StatDiffLabel", "fill": "$text-tertiary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 11} + ]} + ] + }, + { + "type": "frame", + "id": "ProductList", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [12, 20], + "gap": 8, + "children": [ + {"type": "frame", "id": "ProductItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ + {"type": "frame", "id": "Prod1Img", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Prod1Icon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "Prod1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Prod1Name", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Prod1SKU", "fill": "$text-tertiary", "content": "SKU: CF-001", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Prod1Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ + {"type": "frame", "id": "Prod1Expected", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod1ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "text", "id": "Prod1ExpVal", "fill": "$text-secondary", "content": "50", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Prod1Actual", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod1ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "frame", "id": "Prod1ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Prod1ActVal", "fill": "#22C55E", "content": "50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "ProductItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ + {"type": "frame", "id": "Prod2Img", "width": 48, "height": 48, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Prod2Icon", "width": 24, "height": 24, "iconFontName": "croissant", "iconFontFamily": "lucide", "fill": "#F97316"} + ]}, + {"type": "frame", "id": "Prod2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Prod2Name", "fill": "$text-primary", "content": "Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Prod2SKU", "fill": "$text-tertiary", "content": "SKU: BM-003", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Prod2Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ + {"type": "frame", "id": "Prod2Expected", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod2ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "text", "id": "Prod2ExpVal", "fill": "$text-secondary", "content": "25", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Prod2Actual", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod2ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "frame", "id": "Prod2ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Prod2ActVal", "fill": "#EF4444", "content": "22", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "ProductItem3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ + {"type": "frame", "id": "Prod3Img", "width": 48, "height": 48, "fill": "#10B98120", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Prod3Icon", "width": 24, "height": 24, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#10B981"} + ]}, + {"type": "frame", "id": "Prod3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "Prod3Name", "fill": "$text-primary", "content": "Sữa tươi không đường", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Prod3SKU", "fill": "$text-tertiary", "content": "SKU: ML-012", "fontFamily": "Roboto", "fontSize": 12} + ]}, + {"type": "frame", "id": "Prod3Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ + {"type": "frame", "id": "Prod3Expected", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod3ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "text", "id": "Prod3ExpVal", "fill": "$text-secondary", "content": "100", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "Prod3Actual", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "Prod3ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, + {"type": "frame", "id": "Prod3ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Prod3ActVal", "fill": "$text-tertiary", "content": "--", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "StockCountFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle"}, + "gap": 12, + "padding": [16, 20], + "children": [ + {"type": "frame", "id": "SaveDraftBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SaveDraftIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-secondary"}, + {"type": "text", "id": "SaveDraftText", "fill": "$text-secondary", "content": "Lưu nháp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "CompleteBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CompleteIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, + {"type": "text", "id": "CompleteText", "fill": "#FFFFFF", "content": "Hoàn tất kiểm kê", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "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"} + } +}