feat: Add new Customer Lookup modal and badge components to tPOS UI kit, enhancing user interface and functionality for customer management.
This commit is contained in:
Ho Ngoc Hai
File diff suppressed because it is too large
Load Diff
608
pencil-design/src/organisms/pos/customer-lookup.pen
Normal file
608
pencil-design/src/organisms/pos/customer-lookup.pen
Normal file
@@ -0,0 +1,608 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Customer Lookup Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupSection",
|
||||
"name": "Customer Lookup Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupHeader",
|
||||
"name": "customerLookupSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerLookupBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "CUSTOMER LOOKUP",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerLookupTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Customer Search & Add",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupExample",
|
||||
"name": "customerLookupExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupModal",
|
||||
"name": "Organism/CustomerLookup/Modal",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupTopBar",
|
||||
"name": "topBar",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerLookupModalTitle", "fill": "$text-primary", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupCloseBtn",
|
||||
"name": "closeBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CustomerLookupCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupBody",
|
||||
"name": "body",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupSearchBox",
|
||||
"name": "searchBox",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CustomerLookupSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "CustomerLookupSearchText", "fill": "$text-primary", "content": "0912", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "CustomerLookupSearchSpacer", "width": "fill_container", "height": 1},
|
||||
{"type": "icon_font", "id": "CustomerLookupClearIcon", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupResults",
|
||||
"name": "results",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult1",
|
||||
"name": "customerResult1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"padding": 16,
|
||||
"gap": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult1Avatar",
|
||||
"name": "avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#3B82F630",
|
||||
"cornerRadius": 100,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult1Initials", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult1Info",
|
||||
"name": "info",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult1Name", "fill": "$text-primary", "content": "Nguyễn Hồng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CustomerResult1Phone", "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult1Points",
|
||||
"name": "points",
|
||||
"fill": "#22C55E18",
|
||||
"cornerRadius": 8,
|
||||
"padding": [6, 10],
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult1PointsText", "fill": "$green-success", "content": "120 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult2",
|
||||
"name": "customerResult2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": 16,
|
||||
"gap": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult2Avatar",
|
||||
"name": "avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#8B5CF630",
|
||||
"cornerRadius": 100,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult2Initials", "fill": "#8B5CF6", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult2Info",
|
||||
"name": "info",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult2Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CustomerResult2Phone", "fill": "$text-secondary", "content": "0912 888 999", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResult2Points",
|
||||
"name": "points",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [6, 10],
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResult2PointsText", "fill": "$text-secondary", "content": "45 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupAddNew",
|
||||
"name": "addNewBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"},
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CustomerLookupAddIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CustomerLookupAddText", "fill": "$text-secondary", "content": "Thêm khách hàng mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupActions",
|
||||
"name": "actions",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupSkipBtn",
|
||||
"name": "skipBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerLookupSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerLookupConfirmBtn",
|
||||
"name": "confirmBtn",
|
||||
"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": "CustomerLookupConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CustomerLookupConfirmText", "fill": "$text-primary", "content": "Chọn khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddSection",
|
||||
"name": "Customer Add Form Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddHeader",
|
||||
"name": "customerAddSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerAddBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "ADD CUSTOMER",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerAddTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "New Customer Form",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddExample",
|
||||
"name": "customerAddExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddModal",
|
||||
"name": "Organism/CustomerLookup/AddForm",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddTopBar",
|
||||
"name": "topBar",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddBackBtn",
|
||||
"name": "backBtn",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CustomerAddBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CustomerAddModalTitle", "fill": "$text-primary", "content": "Thêm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddCloseBtn2",
|
||||
"name": "closeBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CustomerAddCloseIcon2", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddBody",
|
||||
"name": "body",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddFieldName",
|
||||
"name": "fieldName",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddLabelName", "fill": "$text-secondary", "content": "Họ và tên *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddInputName",
|
||||
"name": "inputName",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddInputNameText", "fill": "$text-tertiary", "content": "Nhập họ và tên khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddFieldPhone",
|
||||
"name": "fieldPhone",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddLabelPhone", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddInputPhone",
|
||||
"name": "inputPhone",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$orange-primary"},
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddInputPhoneText", "fill": "$text-primary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddFieldEmail",
|
||||
"name": "fieldEmail",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddLabelEmail", "fill": "$text-secondary", "content": "Email (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddInputEmail",
|
||||
"name": "inputEmail",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddInputEmailText", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddFieldNote",
|
||||
"name": "fieldNote",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddLabelNote", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddInputNote",
|
||||
"name": "inputNote",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddInputNoteText", "fill": "$text-tertiary", "content": "Thêm ghi chú về khách hàng...", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddActions",
|
||||
"name": "actions",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddCancelBtn",
|
||||
"name": "cancelBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerAddCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddSaveBtn",
|
||||
"name": "saveBtn",
|
||||
"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": "CustomerAddSaveIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CustomerAddSaveText", "fill": "$text-primary", "content": "Lưu khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
561
pencil-design/src/organisms/pos/order-panel.pen
Normal file
561
pencil-design/src/organisms/pos/order-panel.pen
Normal file
@@ -0,0 +1,561 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Order Panel Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelSection",
|
||||
"name": "Order Panel Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelHeader",
|
||||
"name": "orderPanelSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "ORDER PANEL",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "POS Order Management Panel",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelExamples",
|
||||
"name": "orderPanelExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelFull",
|
||||
"name": "Organism/OrderPanel/Full",
|
||||
"reusable": true,
|
||||
"width": 420,
|
||||
"height": 720,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelTopBar",
|
||||
"name": "topBar",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelOrderInfo",
|
||||
"name": "orderInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelOrderNum",
|
||||
"name": "orderNumber",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đơn #0042",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelTableInfo",
|
||||
"name": "tableInfo",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Bàn 12 • 3 món",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelActions",
|
||||
"name": "actions",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelBtnHold",
|
||||
"name": "holdBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "OrderPanelHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelBtnMore",
|
||||
"name": "moreBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "OrderPanelMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItemsList",
|
||||
"name": "itemsList",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem1",
|
||||
"name": "orderItem1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem1Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem1Qty",
|
||||
"name": "qtyBadge",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem1Info",
|
||||
"name": "itemInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OrderPanelItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "OrderPanelItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem2",
|
||||
"name": "orderItem2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem2Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem2Qty",
|
||||
"name": "qtyBadge",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bánh Mì Thịt Nguội",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "OrderPanelItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem3",
|
||||
"name": "orderItem3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem3Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelItem3Qty",
|
||||
"name": "qtyBadge",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelItem3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trà Đào Cam Sả",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "OrderPanelItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelSummary",
|
||||
"name": "summarySection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelSubtotal",
|
||||
"name": "subtotalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "OrderPanelSubtotalValue", "fill": "$text-secondary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelDiscount",
|
||||
"name": "discountRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelDiscountLabel", "fill": "$green-success", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "OrderPanelDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelDivider",
|
||||
"name": "divider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelTotal",
|
||||
"name": "totalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "OrderPanelTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelPayBtn",
|
||||
"name": "payButton",
|
||||
"width": "fill_container",
|
||||
"height": 64,
|
||||
"fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "OrderPanelPayIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "OrderPanelPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelVariantsSection",
|
||||
"name": "Order Panel Variants Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelVariantsHeader",
|
||||
"name": "variantsSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelVariantsBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelVariantsBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "STATES",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderPanelVariantsTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Order Panel States",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelVariantsExamples",
|
||||
"name": "variantsExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"gap": 32,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelEmpty",
|
||||
"name": "Organism/OrderPanel/Empty",
|
||||
"reusable": true,
|
||||
"width": 360,
|
||||
"height": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "OrderPanelEmptyIcon", "width": 64, "height": 64, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "OrderPanelEmptyTitle", "fill": "$text-secondary", "content": "Chưa có món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OrderPanelEmptyDesc", "fill": "$text-tertiary", "content": "Chọn sản phẩm để thêm vào đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelCompact",
|
||||
"name": "Organism/OrderPanel/Compact",
|
||||
"reusable": true,
|
||||
"width": 360,
|
||||
"height": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelCompactHeader",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelCompactTitle", "fill": "$text-primary", "content": "Đơn #0043", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelCompactBadge",
|
||||
"name": "itemCount",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 100,
|
||||
"padding": [4, 10],
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelCompactCount", "fill": "$text-primary", "content": "5 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelCompactItems",
|
||||
"name": "itemsList",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [12, 20],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelCompactItem1", "fill": "$text-secondary", "content": "2x Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "OrderPanelCompactItem2", "fill": "$text-secondary", "content": "1x Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "OrderPanelCompactItem3", "fill": "$text-secondary", "content": "2x Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderPanelCompactFooter",
|
||||
"name": "footer",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"padding": [16, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OrderPanelCompactTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "OrderPanelCompactTotalValue", "fill": "$orange-primary", "content": "198,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
533
pencil-design/src/organisms/pos/payment-modal.pen
Normal file
533
pencil-design/src/organisms/pos/payment-modal.pen
Normal file
@@ -0,0 +1,533 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Payment Modal Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalSection",
|
||||
"name": "Payment Modal Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalHeader",
|
||||
"name": "paymentModalSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentModalBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "PAYMENT MODAL",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentModalTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Payment Flow Dialog",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalExample",
|
||||
"name": "paymentModalExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalFull",
|
||||
"name": "Organism/PaymentModal/Full",
|
||||
"reusable": true,
|
||||
"width": 520,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalTopBar",
|
||||
"name": "topBar",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalTopTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalCloseBtn",
|
||||
"name": "closeBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PaymentModalCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalBody",
|
||||
"name": "body",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 24,
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalAmount",
|
||||
"name": "amountSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalAmountLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PaymentModalAmountValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "700"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalMethods",
|
||||
"name": "methodsSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalMethodsLabel", "fill": "$text-secondary", "content": "Phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalMethodsGrid",
|
||||
"name": "methodsGrid",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayMethodCash",
|
||||
"name": "cashMethod",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayMethodCashIcon", "width": 28, "height": 28, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "PayMethodCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayMethodCard",
|
||||
"name": "cardMethod",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayMethodCardIcon", "width": 28, "height": 28, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PayMethodCardText", "fill": "$text-secondary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayMethodQR",
|
||||
"name": "qrMethod",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayMethodQRIcon", "width": 28, "height": 28, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PayMethodQRText", "fill": "$text-secondary", "content": "QR Code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalCashInput",
|
||||
"name": "cashInputSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalCashLabel", "fill": "$text-secondary", "content": "Tiền khách đưa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalCashField",
|
||||
"name": "cashField",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalCashValue", "fill": "$text-primary", "content": "200,000", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PaymentModalCashCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalQuickAmounts",
|
||||
"name": "quickAmounts",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "QuickAmt50", "name": "amt50k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt50Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "QuickAmt100", "name": "amt100k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt100Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "QuickAmt200", "name": "amt200k", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt200Text", "fill": "$text-primary", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "QuickAmt500", "name": "amt500k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt500Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "QuickAmtExact", "name": "amtExact", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmtExactText", "fill": "$text-secondary", "content": "Đủ tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalChange",
|
||||
"name": "changeSection",
|
||||
"width": "fill_container",
|
||||
"fill": "#22C55E18",
|
||||
"cornerRadius": 12,
|
||||
"padding": [16, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PaymentModalChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalActions",
|
||||
"name": "actions",
|
||||
"width": "fill_container",
|
||||
"padding": 24,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalCancelBtn",
|
||||
"name": "cancelBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentModalCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentModalConfirmBtn",
|
||||
"name": "confirmBtn",
|
||||
"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": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PaymentModalConfirmIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "PaymentModalConfirmText", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessSection",
|
||||
"name": "Payment Success Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessHeader",
|
||||
"name": "paymentSuccessSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentSuccessBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "SUCCESS STATE",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentSuccessTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Payment Confirmation",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessExample",
|
||||
"name": "paymentSuccessExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessModal",
|
||||
"name": "Organism/PaymentModal/Success",
|
||||
"reusable": true,
|
||||
"width": 420,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"padding": 40,
|
||||
"gap": 24,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessIconWrapper",
|
||||
"name": "iconWrapper",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "#22C55E18",
|
||||
"cornerRadius": 100,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PaymentSuccessIcon", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$green-success"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessContent",
|
||||
"name": "content",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentSuccessContentTitle", "fill": "$text-primary", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600", "textAlign": "center"},
|
||||
{"type": "text", "id": "PaymentSuccessContentDesc", "fill": "$text-secondary", "content": "Đơn hàng #0042 đã được thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal", "textAlign": "center"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessSummary",
|
||||
"name": "summary",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessSummaryTotal",
|
||||
"name": "totalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentSuccessTotalLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PaymentSuccessTotalValue", "fill": "$text-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessSummaryMethod",
|
||||
"name": "methodRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentSuccessMethodLabel", "fill": "$text-secondary", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PaymentSuccessMethodValue", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessSummaryChange",
|
||||
"name": "changeRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "PaymentSuccessChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PaymentSuccessChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessActions",
|
||||
"name": "actions",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessPrintBtn",
|
||||
"name": "printBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PaymentSuccessPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PaymentSuccessPrintText", "fill": "$text-secondary", "content": "In hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentSuccessNewBtn",
|
||||
"name": "newOrderBtn",
|
||||
"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": 10,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PaymentSuccessNewIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "PaymentSuccessNewText", "fill": "$text-primary", "content": "Đơn 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"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
597
pencil-design/src/organisms/pos/product-grid.pen
Normal file
597
pencil-design/src/organisms/pos/product-grid.pen
Normal file
@@ -0,0 +1,597 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Product Grid Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridSection",
|
||||
"name": "Product Grid Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridHeader",
|
||||
"name": "productGridSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductGridBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "PRODUCT GRID",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductGridTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "POS Product Selection Area",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridExample",
|
||||
"name": "productGridExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridFull",
|
||||
"name": "Organism/ProductGrid/Full",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridToolbar",
|
||||
"name": "toolbar",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridSearch",
|
||||
"name": "searchBox",
|
||||
"width": 320,
|
||||
"height": 44,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ProductGridSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "ProductGridSearchText", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridScanBtn",
|
||||
"name": "scanButton",
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"padding": [0, 16],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ProductGridScanIcon", "width": 20, "height": 20, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ProductGridScanText", "fill": "$text-secondary", "content": "Quét mã", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridViewToggle",
|
||||
"name": "viewToggle",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": 4,
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridViewGrid",
|
||||
"name": "gridView",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ProductGridViewGridIcon", "width": 18, "height": 18, "iconFontName": "grid-2x2", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridViewList",
|
||||
"name": "listView",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ProductGridViewListIcon", "width": 18, "height": 18, "iconFontName": "list", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCategories",
|
||||
"name": "categoriesBar",
|
||||
"width": "fill_container",
|
||||
"padding": [12, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCatAll",
|
||||
"name": "catAll",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "ProductGridCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCatDrinks",
|
||||
"name": "catDrinks",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "ProductGridCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCatFood",
|
||||
"name": "catFood",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "ProductGridCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCatDesserts",
|
||||
"name": "catDesserts",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "ProductGridCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridCatCombo",
|
||||
"name": "catCombo",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "ProductGridCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductGridContent",
|
||||
"name": "productsGrid",
|
||||
"width": "fill_container",
|
||||
"padding": 20,
|
||||
"gap": 16,
|
||||
"wrap": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard1",
|
||||
"name": "productCard1",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PGridCard1Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#3B82F618"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard1Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard2",
|
||||
"name": "productCard2",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PGridCard2Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#22C55E18"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard2Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard3",
|
||||
"name": "productCard3",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PGridCard3Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#F59E0B18"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard3Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard4",
|
||||
"name": "productCard4",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PGridCard4Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#8B5CF618"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard4Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard5",
|
||||
"name": "productCard5",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PGridCard5Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#EC489918"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard5Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard6",
|
||||
"name": "productCard6",
|
||||
"width": 160,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"opacity": 0.5,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard6Img",
|
||||
"name": "img",
|
||||
"width": "fill_container",
|
||||
"height": 110,
|
||||
"fill": "$bg-interactive",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard6OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PGridCard6Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "PGridCard6Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "PGridCard6Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabsSection",
|
||||
"name": "Category Tabs Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabsHeader",
|
||||
"name": "categoryTabsSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabsBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CategoryTabsBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "CATEGORY TABS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CategoryTabsTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Vertical Category Navigation",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabsExample",
|
||||
"name": "categoryTabsExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabsVertical",
|
||||
"name": "Organism/CategoryTabs/Vertical",
|
||||
"reusable": true,
|
||||
"width": 200,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"padding": 12,
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabAll",
|
||||
"name": "tabAll",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CategoryTabAllIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "CategoryTabAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabDrinks",
|
||||
"name": "tabDrinks",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CategoryTabDrinksIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CategoryTabDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabFood",
|
||||
"name": "tabFood",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CategoryTabFoodIcon", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CategoryTabFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabDesserts",
|
||||
"name": "tabDesserts",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CategoryTabDessertsIcon", "width": 20, "height": 20, "iconFontName": "cake-slice", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CategoryTabDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabCombo",
|
||||
"name": "tabCombo",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 12,
|
||||
"padding": [14, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "CategoryTabComboIcon", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CategoryTabComboText", "fill": "$text-secondary", "content": "Combo", "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"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
426
pencil-design/src/organisms/pos/quick-actions.pen
Normal file
426
pencil-design/src/organisms/pos/quick-actions.pen
Normal file
@@ -0,0 +1,426 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Quick Actions Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsSection",
|
||||
"name": "Quick Actions Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsHeader",
|
||||
"name": "quickActionsSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickActionsBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "QUICK ACTIONS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QuickActionsTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "POS Action Toolbar",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsExample",
|
||||
"name": "quickActionsExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsBar",
|
||||
"name": "Organism/QuickActions/Bar",
|
||||
"reusable": true,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": 16,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnNewOrder",
|
||||
"name": "newOrderBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnNewOrderIcon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "QABtnNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnHold",
|
||||
"name": "holdBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnHoldIcon", "width": 28, "height": 28, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnHoldText", "fill": "$text-secondary", "content": "Tạm giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnRecall",
|
||||
"name": "recallBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnRecallBadge",
|
||||
"name": "badge",
|
||||
"fill": "#EF4444",
|
||||
"cornerRadius": 100,
|
||||
"padding": [2, 6],
|
||||
"position": "absolute",
|
||||
"x": 70,
|
||||
"y": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "QABtnRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]
|
||||
},
|
||||
{"type": "icon_font", "id": "QABtnRecallIcon", "width": 28, "height": 28, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnRecallText", "fill": "$text-secondary", "content": "Đơn chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnDiscount",
|
||||
"name": "discountBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnDiscountIcon", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnDiscountText", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnCustomer",
|
||||
"name": "customerBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnCustomerIcon", "width": 28, "height": 28, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnCustomerText", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnPrint",
|
||||
"name": "printBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnPrintIcon", "width": 28, "height": 28, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnPrintText", "fill": "$text-secondary", "content": "In bill", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QABtnMore",
|
||||
"name": "moreBtn",
|
||||
"width": 100,
|
||||
"height": 90,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QABtnMoreIcon", "width": 28, "height": 28, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "QABtnMoreText", "fill": "$text-secondary", "content": "Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsVerticalSection",
|
||||
"name": "Quick Actions Vertical Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QAVerticalHeader",
|
||||
"name": "qaVerticalSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QAVerticalBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QAVerticalBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "SIDEBAR ACTIONS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QAVerticalTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Vertical Action Sidebar",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QAVerticalExample",
|
||||
"name": "qaVerticalExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsSidebar",
|
||||
"name": "Organism/QuickActions/Sidebar",
|
||||
"reusable": true,
|
||||
"width": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"padding": 12,
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideNewOrder",
|
||||
"name": "newOrderBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideNewOrderIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideHold",
|
||||
"name": "holdBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideRecall",
|
||||
"name": "recallBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideDiscount",
|
||||
"name": "discountBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideCustomer",
|
||||
"name": "customerBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASidePrint",
|
||||
"name": "printBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASidePrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideSpacer",
|
||||
"name": "spacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QASideSettings",
|
||||
"name": "settingsBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "QASideSettingsIcon", "width": 22, "height": 22, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
356
pencil-design/src/organisms/pos/receipt-preview.pen
Normal file
356
pencil-design/src/organisms/pos/receipt-preview.pen
Normal file
@@ -0,0 +1,356 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Receipt Preview Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPreviewSection",
|
||||
"name": "Receipt Preview Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPreviewHeader",
|
||||
"name": "receiptPreviewSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPreviewBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ReceiptPreviewBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "RECEIPT PREVIEW",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ReceiptPreviewTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bill Receipt Preview",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPreviewExample",
|
||||
"name": "receiptPreviewExample",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPreviewFull",
|
||||
"name": "Organism/ReceiptPreview/Full",
|
||||
"reusable": true,
|
||||
"width": 340,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 4,
|
||||
"layout": "vertical",
|
||||
"padding": [24, 20],
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptHeader",
|
||||
"name": "receiptHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptStoreName", "fill": "#111111", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"},
|
||||
{"type": "text", "id": "ReceiptStoreAddr", "fill": "#666666", "content": "123 Nguyễn Huệ, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"},
|
||||
{"type": "text", "id": "ReceiptStorePhone", "fill": "#666666", "content": "Tel: 1900 1234", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptDivider1",
|
||||
"name": "divider1",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptInfo",
|
||||
"name": "receiptInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptInfoOrder",
|
||||
"name": "orderRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptInfoOrderLabel", "fill": "#666666", "content": "Số HĐ:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptInfoOrderValue", "fill": "#111111", "content": "#0042", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptInfoDate",
|
||||
"name": "dateRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptInfoDateLabel", "fill": "#666666", "content": "Ngày:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptInfoDateValue", "fill": "#111111", "content": "05/02/2026 23:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptInfoTable",
|
||||
"name": "tableRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptInfoTableLabel", "fill": "#666666", "content": "Bàn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptInfoTableValue", "fill": "#111111", "content": "Bàn 12", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptInfoCashier",
|
||||
"name": "cashierRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptInfoCashierLabel", "fill": "#666666", "content": "Thu ngân:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptInfoCashierValue", "fill": "#111111", "content": "Minh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptDivider2",
|
||||
"name": "divider2",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptItems",
|
||||
"name": "receiptItems",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptItem1",
|
||||
"name": "receiptItem1",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptItem1Left",
|
||||
"name": "leftContent",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptItem1Name", "fill": "#111111", "content": "Cà Phê Sữa Đá x2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ReceiptItem1Note", "fill": "#888888", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "ReceiptItem1Price", "fill": "#111111", "content": "58,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptItem2",
|
||||
"name": "receiptItem2",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptItem2Name", "fill": "#111111", "content": "Bánh Mì Thịt Nguội x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ReceiptItem2Price", "fill": "#111111", "content": "45,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptItem3",
|
||||
"name": "receiptItem3",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptItem3Name", "fill": "#111111", "content": "Trà Đào Cam Sả x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "ReceiptItem3Price", "fill": "#111111", "content": "35,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptDivider3",
|
||||
"name": "divider3",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptSummary",
|
||||
"name": "receiptSummary",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptSummarySubtotal",
|
||||
"name": "subtotalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptSubtotalLabel", "fill": "#666666", "content": "Tạm tính:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptSubtotalValue", "fill": "#111111", "content": "138,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptSummaryDiscount",
|
||||
"name": "discountRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptDiscountLabel", "fill": "#666666", "content": "Giảm giá:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptDiscountValue", "fill": "#22C55E", "content": "-10,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptSummaryTotal",
|
||||
"name": "totalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptTotalLabel", "fill": "#111111", "content": "TỔNG CỘNG:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ReceiptTotalValue", "fill": "#111111", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptDivider4",
|
||||
"name": "divider4",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPayment",
|
||||
"name": "receiptPayment",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPaymentMethod",
|
||||
"name": "methodRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptPaymentMethodLabel", "fill": "#666666", "content": "Thanh toán:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptPaymentMethodValue", "fill": "#111111", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPaymentCash",
|
||||
"name": "cashRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptPaymentCashLabel", "fill": "#666666", "content": "Tiền khách:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptPaymentCashValue", "fill": "#111111", "content": "200,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptPaymentChange",
|
||||
"name": "changeRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptPaymentChangeLabel", "fill": "#666666", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ReceiptPaymentChangeValue", "fill": "#111111", "content": "72,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReceiptFooter",
|
||||
"name": "receiptFooter",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "ReceiptThanks", "fill": "#666666", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500", "textAlign": "center"},
|
||||
{"type": "text", "id": "ReceiptWifi", "fill": "#888888", "content": "WiFi: GoodGo_Guest | Pass: goodgo123", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal", "textAlign": "center"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user