feat: Add initial UI for various tMarketing features and tPOS screens, dialogs, and reports.
This commit is contained in:
Ho Ngoc Hai
1654
pencil-design/src/pages/tMarketing/ai-chatbot.pen
Normal file
1654
pencil-design/src/pages/tMarketing/ai-chatbot.pen
Normal file
File diff suppressed because it is too large
Load Diff
259
pencil-design/src/pages/tMarketing/ai-content-studio.pen
Normal file
259
pencil-design/src/pages/tMarketing/ai-content-studio.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
1677
pencil-design/src/pages/tMarketing/analytics-dashboard.pen
Normal file
1677
pencil-design/src/pages/tMarketing/analytics-dashboard.pen
Normal file
File diff suppressed because it is too large
Load Diff
274
pencil-design/src/pages/tMarketing/chatbot-automation.pen
Normal file
274
pencil-design/src/pages/tMarketing/chatbot-automation.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
293
pencil-design/src/pages/tMarketing/customer-crm.pen
Normal file
293
pencil-design/src/pages/tMarketing/customer-crm.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
276
pencil-design/src/pages/tMarketing/livechat-console.pen
Normal file
276
pencil-design/src/pages/tMarketing/livechat-console.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
1646
pencil-design/src/pages/tMarketing/social-hub.pen
Normal file
1646
pencil-design/src/pages/tMarketing/social-hub.pen
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
126
pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen
Normal file
126
pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
143
pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen
Normal file
143
pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
131
pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen
Normal file
131
pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
492
pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen
Normal file
492
pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
656
pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen
Normal file
656
pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
560
pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen
Normal file
560
pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
109
pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen
Normal file
109
pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
126
pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen
Normal file
126
pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
139
pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen
Normal file
139
pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
154
pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen
Normal file
154
pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
176
pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen
Normal file
176
pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user