feat: implement shared tPOS UI components including dialogs, reports, and payment screens, and update design guidelines for dialog height.
This commit is contained in:
Ho Ngoc Hai
@@ -291,6 +291,8 @@ python3 scripts/build.py --library
|
||||
| 9 | Emoji text for icons | Use `icon_font` with Lucide |
|
||||
| 10 | `glob()` missing subdirs | Use `rglob()` for recursive scan |
|
||||
| 11 | Components at root level | Wrap in Showcase frame with layout |
|
||||
| 12 | `wrap: true` unreliable | Use manual rows instead |
|
||||
| 13 | Footer overlapping content | Ensure footer inside dialog + calculate height |
|
||||
|
||||
|
||||
## Quick Reference / Tham Chiếu Nhanh
|
||||
|
||||
@@ -16,6 +16,7 @@ Comprehensive list of common mistakes when working with Pencil `.pen` files and
|
||||
10. [Build Script Not Scanning Subdirectories](#10-build-script-not-scanning-subdirectories)
|
||||
11. [Components at Root Level](#11-components-at-root-level)
|
||||
12. [Wrap Property Not Working Reliably](#12-wrap-property-not-working-reliably)
|
||||
13. [Dialog/Frame Height Causing Content Overlap](#13-dialogframe-height-causing-content-overlap)
|
||||
|
||||
---
|
||||
|
||||
@@ -382,5 +383,146 @@ Before committing `.pen` files:
|
||||
- [ ] Build script uses `rglob()` for subdirectories
|
||||
- [ ] Components wrapped in layout frames, not at root level
|
||||
- [ ] **Avoid `wrap: true` - use manual rows instead**
|
||||
- [ ] **Check dialog height vs content height (avoid footer overlap)**
|
||||
- [ ] Run `jq empty file.pen` to validate JSON syntax
|
||||
- [ ] Run `python3 scripts/build.py --library` before testing
|
||||
|
||||
---
|
||||
|
||||
## 13. Dialog/Frame Height Causing Content Overlap
|
||||
|
||||
**Problem**: Footer buttons or bottom sections overlap with content above because the dialog/frame `height` is too small to contain all children. This is especially common in dialogs with many form fields.
|
||||
|
||||
**Symptoms**:
|
||||
- Footer buttons covering input fields or cards
|
||||
- Bottom section text cut off or hidden
|
||||
- Content appears "squeezed" at the bottom
|
||||
|
||||
**Root causes**:
|
||||
1. **Fixed height too small**: Dialog has `height: 480` but content requires 600px
|
||||
2. **Footer outside parent frame**: Footer is a sibling at root level instead of child of dialog
|
||||
3. **Content expands but container doesn't**: Using `height: "fill_container"` on content but parent has fixed small height
|
||||
|
||||
**Solution 1: Calculate correct height**
|
||||
|
||||
```json
|
||||
// ❌ BAD: Height không đủ cho content
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerEditDialog",
|
||||
"height": 480, // Quá nhỏ!
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{ "id": "Header", "height": 80 }, // 80px
|
||||
{ "id": "Content", "height": "fill" }, // 6 fields × 70px = 420px
|
||||
{ "id": "Footer", "height": 84 } // 84px
|
||||
// Total: 80 + 420 + 84 = 584px (vượt 480px!)
|
||||
]
|
||||
}
|
||||
|
||||
// ✅ GOOD: Height đủ chứa tất cả content
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerEditDialog",
|
||||
"height": 660, // Đủ không gian
|
||||
"layout": "vertical",
|
||||
"children": [...]
|
||||
}
|
||||
```
|
||||
|
||||
**Height calculation formula:**
|
||||
```
|
||||
Total Height = Header + Content + Footer + Padding
|
||||
|
||||
Where:
|
||||
- Header: ~80-100px (icon + title)
|
||||
- Content: (field count × field height) + ((field count - 1) × gap)
|
||||
- Footer: ~84-100px (buttons + padding)
|
||||
- Padding: header/content/footer padding combined
|
||||
|
||||
Example (6 fields):
|
||||
- Header: 80px
|
||||
- Content: 6 × 70 + 5 × 18 = 420 + 90 = 510px
|
||||
- Footer: 84px
|
||||
- Padding: ~40px
|
||||
- Total: 80 + 510 + 84 + 40 = 714px → Use 720-760px
|
||||
```
|
||||
|
||||
**Solution 2: Ensure footer is INSIDE dialog frame**
|
||||
|
||||
```json
|
||||
// ❌ BAD: Footer ở cùng cấp root với Dialog (sẽ float ngoài)
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddDialog",
|
||||
"height": 600,
|
||||
"children": [
|
||||
{ "id": "Header" },
|
||||
{ "id": "Content" }
|
||||
] // Footer thiếu!
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddFooter", // ← NẰM NGOÀI dialog!
|
||||
"y": 600, // ← Absolute positioning = BAD
|
||||
"children": [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// ✅ GOOD: Footer là child của Dialog
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddDialog",
|
||||
"height": 680,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{ "id": "Header" },
|
||||
{ "id": "Content", "height": "fill_container" },
|
||||
{ "id": "AddFooter" } // ← BÊN TRONG dialog!
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Quick checks khi tạo dialog:**
|
||||
|
||||
| Check | How to verify |
|
||||
|-------|---------------|
|
||||
| Footer inside dialog? | Footer phải là child cuối cùng của dialog frame |
|
||||
| No absolute y position? | Footer không có `y: xxx` |
|
||||
| Height đủ? | Height ≥ Header + Content + Footer + Gaps |
|
||||
| Using vertical layout? | Dialog có `layout: "vertical"` |
|
||||
|
||||
**Common dialog sizes reference:**
|
||||
|
||||
| Dialog type | Recommended height |
|
||||
|-------------|-------------------|
|
||||
| Simple confirm (title + 2 buttons) | 200-250px |
|
||||
| Form 3 fields | 400-450px |
|
||||
| Form 5 fields | 550-620px |
|
||||
| Form 6+ fields | 680-760px |
|
||||
| Complex with cards/lists | 700-800px |
|
||||
|
||||
---
|
||||
|
||||
## Quick Checklist / Checklist Nhanh
|
||||
|
||||
Before committing `.pen` files:
|
||||
|
||||
- [ ] All `font-*` variables use `type: "string"`
|
||||
- [ ] `variables` block contains all used tokens
|
||||
- [ ] No `$tokens` in numeric fields (fontSize, cornerRadius, etc.)
|
||||
- [ ] Icons use `icon_font` not emoji text
|
||||
- [ ] Build script uses `rglob()` for subdirectories
|
||||
- [ ] Components wrapped in layout frames, not at root level
|
||||
- [ ] **Avoid `wrap: true` - use manual rows instead**
|
||||
- [ ] **Dialog height accommodates all children (header + content + footer)**
|
||||
- [ ] **Footer is INSIDE dialog frame, not at root level**
|
||||
- [ ] Run `jq empty file.pen` to validate JSON syntax
|
||||
- [ ] Run `python3 scripts/build.py --library` before testing
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BarcodeScanDialog",
|
||||
"name": "Dialog/BarcodeScan",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"height": 600,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScanHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "ScanTitle", "fill": "$text-primary", "content": "Quét mã vạch", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ScanCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ScanCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScanContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ScanViewfinder", "width": 280, "height": 200, "fill": "$bg-page", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ScanCornerTL", "width": 40, "height": 40, "x": 20, "y": 20, "stroke": {"thickness": 3, "fill": "$orange-primary", "sides": ["top", "left"]}, "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ScanCornerTR", "width": 40, "height": 40, "x": 220, "y": 20, "stroke": {"thickness": 3, "fill": "$orange-primary", "sides": ["top", "right"]}, "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ScanCornerBL", "width": 40, "height": 40, "x": 20, "y": 140, "stroke": {"thickness": 3, "fill": "$orange-primary", "sides": ["bottom", "left"]}, "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ScanCornerBR", "width": 40, "height": 40, "x": 220, "y": 140, "stroke": {"thickness": 3, "fill": "$orange-primary", "sides": ["bottom", "right"]}, "cornerRadius": 4},
|
||||
{"type": "frame", "id": "ScanLine", "width": 240, "height": 2, "fill": "$orange-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "ScanResult", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 14, "padding": 16, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ScanResultIcon", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ScanResultIconInner", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "ScanResultInfo", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "ScanResultName", "fill": "$text-primary", "content": "Trà sữa trân châu đen", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ScanResultMeta", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ScanResultSKU", "fill": "$text-tertiary", "content": "8936012345678", "fontFamily": "Roboto Mono", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ScanResultPrice", "fill": "#22C55E", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ScanManualSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "text", "id": "ScanManualLabel", "fill": "$text-tertiary", "content": "Hoặc nhập mã thủ công", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal", "textAlign": "center"},
|
||||
{"type": "frame", "id": "ScanManualInput", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ScanManualIcon", "width": 18, "height": 18, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "ScanManualPlaceholder", "fill": "$text-tertiary", "content": "Nhập mã vạch hoặc SKU...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ScanFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "ScanAddBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ScanAddIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ScanAddText", "fill": "$text-primary", "content": "Thêm vào đơn 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"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
224
pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen
Normal file
224
pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen
Normal file
@@ -0,0 +1,224 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmationDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/Confirmation",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 360,
|
||||
"height": 340,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
32,
|
||||
28
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmIconBg",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "#EF444415",
|
||||
"cornerRadius": 36,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmIconInner",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 26,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ConfirmIcon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "alert-triangle",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ConfirmTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xác nhận hủy đơn?",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ConfirmDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thao tác này không thể hoàn tác.\nBạn có chắc chắn muốn hủy đơn hàng này?",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmCancelBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ConfirmCancelText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Quay lại",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmYesBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#EF4444",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#DC2626",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 6,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ConfirmYesIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "trash-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ConfirmYesText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hủy đơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
468
pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen
Normal file
468
pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen
Normal file
@@ -0,0 +1,468 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerAddDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/CustomerAdd",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 440,
|
||||
"height": 680,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
20,
|
||||
24
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddIconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "user-plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Khách hàng mới",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddField1",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddLabel1",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Số điện thoại *",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddInput1",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddInput1Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "0901234567",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddField2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddLabel2",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Họ và tên *",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddInput2",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddInput2Placeholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Nhập họ và tên",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddField3",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddLabel3",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Email",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddInput3",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddInput3Placeholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Nhập email",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddField4",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddLabel4",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Ngày sinh",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddInput4",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddInput4Placeholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Chọn ngày",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddInput4Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "calendar",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddField5",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddLabel5",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Ghi chú",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddInput5",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddInput5Placeholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thêm ghi chú về khách hàng...",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddCancelBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddCancelText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Hủy",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddSaveBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#22C55E",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#16A34A",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddSaveIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddSaveText",
|
||||
"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"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,553 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerEditDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/CustomerEdit",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 440,
|
||||
"height": 760,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
20,
|
||||
24
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditAvatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 22,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditAvatarText",
|
||||
"fill": "$text-primary",
|
||||
"content": "NV",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditHeaderInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 17,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditSubtitle",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Khách thành viên • 126 điểm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EditCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 18,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField1",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel1",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Số điện thoại",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput1",
|
||||
"width": "fill_container",
|
||||
"height": 50,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditInput1Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "0901234567",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel2",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Họ và tên",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput2",
|
||||
"width": "fill_container",
|
||||
"height": 50,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditInput2Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField3",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel3",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Email",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput3",
|
||||
"width": "fill_container",
|
||||
"height": 50,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditInput3Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "nguyenvana@email.com",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField4",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel4",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Ngày sinh",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput4",
|
||||
"width": "fill_container",
|
||||
"height": 50,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditInput4Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "15/03/1990",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EditInput4Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "calendar",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField5",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel5",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhóm khách hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput5",
|
||||
"width": "fill_container",
|
||||
"height": 50,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditGroupBadge",
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
10
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditGroupText",
|
||||
"fill": "#F59E0B",
|
||||
"content": "Thành viên Vàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EditInput5Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-down",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditField6",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditLabel6",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Ghi chú",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditInput6",
|
||||
"width": "fill_container",
|
||||
"height": 72,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditInput6Value",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Khách quen, thích trà sữa ít đường",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditDeleteBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EditDeleteIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "trash-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EditSaveBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#E64D00",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EditSaveIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "save",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EditSaveText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lưu thay đổi",
|
||||
"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"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoyaltyRewardDialog",
|
||||
"name": "Dialog/LoyaltyReward",
|
||||
"reusable": true,
|
||||
"width": 420,
|
||||
"height": 700,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RewardHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardIconBg", "width": 44, "height": 44, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RewardIcon", "width": 22, "height": 22, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "RewardTitle", "fill": "$text-primary", "content": "Đổi điểm thưởng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RewardCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RewardPointsCard", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#F59E0B", "position": 0}, {"color": "#D97706", "position": 1}]}, "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RewardPointsLabel", "fill": "#FFFFFF99", "content": "Điểm thưởng hiện có", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "RewardPointsValue", "gap": 8, "alignItems": "baseline", "children": [
|
||||
{"type": "text", "id": "RewardPointsNumber", "fill": "$text-primary", "content": "2,450", "fontFamily": "Roboto", "fontSize": 44, "fontWeight": "700"},
|
||||
{"type": "text", "id": "RewardPointsUnit", "fill": "#FFFFFF99", "content": "điểm", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "RewardPointsInfo", "fill": "#FFFFFF99", "content": "= 245,000₫ giá trị quy đổi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardOptionsSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "RewardOptionsLabel", "fill": "$text-secondary", "content": "Chọn ưu đãi đổi điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "RewardOption1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption1Radio", "width": 24, "height": 24, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption1Dot", "width": 12, "height": 12, "fill": "#F59E0B", "cornerRadius": 6}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardOption1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RewardOption1Name", "fill": "$text-primary", "content": "Giảm 50,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RewardOption1Desc", "fill": "$text-tertiary", "content": "Áp dụng trực tiếp vào hóa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "RewardOption1Points", "fill": "#F59E0B", "content": "500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardOption2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption2Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption2Radio", "width": 24, "height": 24, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 12},
|
||||
{"type": "frame", "id": "RewardOption2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RewardOption2Name", "fill": "$text-primary", "content": "Giảm 100,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RewardOption2Desc", "fill": "$text-tertiary", "content": "Áp dụng trực tiếp vào hóa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "RewardOption2Points", "fill": "$text-tertiary", "content": "1,000 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardOption3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption3Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RewardOption3Radio", "width": 24, "height": 24, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 12},
|
||||
{"type": "frame", "id": "RewardOption3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RewardOption3Name", "fill": "$text-primary", "content": "Món quà sinh nhật", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RewardOption3Desc", "fill": "$text-tertiary", "content": "1 ly trà sữa miễn phí", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "RewardOption3Points", "fill": "$text-tertiary", "content": "800 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RewardSummary", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RewardSummaryLabel", "fill": "$text-secondary", "content": "Điểm sau khi đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "RewardSummaryValue", "fill": "#22C55E", "content": "1,950 điểm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "RewardApplyBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#F59E0B", "position": 0}, {"color": "#D97706", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RewardApplyIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "RewardApplyText", "fill": "$text-primary", "content": "Đổi 500 điểm", "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"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ManagerOverrideDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/ManagerOverride",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 420,
|
||||
"height": 660,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 24,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideIconBg",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OverrideIcon",
|
||||
"width": 30,
|
||||
"height": 30,
|
||||
"iconFontName": "shield-alert",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Yêu cầu phê duyệt",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideSubtitle",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thao tác này cần quản lý xác nhận",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideActionCard",
|
||||
"width": "fill_container",
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideActionIcon",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "#EF444430",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OverrideActionIconInner",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "rotate-ccw",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideActionInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideActionLabel",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thao tác yêu cầu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideActionName",
|
||||
"fill": "#EF4444",
|
||||
"content": "Hoàn tiền đơn hàng #HD240206",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideActionAmount",
|
||||
"fill": "$text-primary",
|
||||
"content": "Số tiền: 530,250₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideReasonSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideReasonLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Lý do yêu cầu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideReasonInput",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideReasonText",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Khách hàng yêu cầu hoàn tiền do không hài lòng với \ndịch vụ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideStaffSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideStaffLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhân viên yêu cầu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideStaffCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideStaffAvatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 22,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideStaffInitial",
|
||||
"fill": "$text-primary",
|
||||
"content": "NT",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideStaffInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideStaffName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Thảo",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideStaffRole",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thu ngân • 19:27",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideRejectBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OverrideRejectIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideRejectText",
|
||||
"fill": "#EF4444",
|
||||
"content": "Từ chối",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OverrideApproveBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#22C55E",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#16A34A",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OverrideApproveIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OverrideApproveText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phê duyệt",
|
||||
"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"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ModifierSelectDialog",
|
||||
"name": "Dialog/ModifierSelect",
|
||||
"reusable": true,
|
||||
"width": 420,
|
||||
"height": 580,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ModHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ModHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ModProductImg", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ModProductIcon", "width": 22, "height": 22, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModHeaderInfo", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ModTitle", "fill": "$text-primary", "content": "Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ModSubtitle", "fill": "$text-tertiary", "content": "Chọn tùy chỉnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ModCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ModCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ModContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ModSizeSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ModSizeHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSizeLabel", "fill": "$text-primary", "content": "Kích cỡ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ModSizeRequired", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [
|
||||
{"type": "text", "id": "ModSizeRequiredText", "fill": "#EF4444", "content": "Bắt buộc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSizeOptions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "ModSizeS", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSizeSText", "fill": "$text-secondary", "content": "S", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ModSizeSPrice", "fill": "$text-tertiary", "content": "+0₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSizeM", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSizeMText", "fill": "$orange-primary", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ModSizeMPrice", "fill": "$orange-primary", "content": "+5,000₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSizeL", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSizeLText", "fill": "$text-secondary", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ModSizeLPrice", "fill": "$text-tertiary", "content": "+10,000₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSugarSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ModSugarLabel", "fill": "$text-primary", "content": "Độ ngọt", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ModSugarOptions", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "ModSugar0", "width": "fill_container", "height": 42, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSugar0Text", "fill": "$text-secondary", "content": "0%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSugar30", "width": "fill_container", "height": 42, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSugar30Text", "fill": "$text-secondary", "content": "30%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSugar50", "width": "fill_container", "height": 42, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSugar50Text", "fill": "$text-primary", "content": "50%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModSugar100", "width": "fill_container", "height": 42, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ModSugar100Text", "fill": "$text-secondary", "content": "100%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ModToppingSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "ModToppingLabel", "fill": "$text-primary", "content": "Topping", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "ModToppingList", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "ModTop1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ModTop1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ModTop1Check", "width": 22, "height": 22, "fill": "$orange-primary", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ModTop1CheckIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "text", "id": "ModTop1Name", "fill": "$text-primary", "content": "Trân châu đen", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ModTop1Price", "fill": "$orange-primary", "content": "+8,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModTop2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ModTop2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ModTop2Check", "width": 22, "height": 22, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 6},
|
||||
{"type": "text", "id": "ModTop2Name", "fill": "$text-secondary", "content": "Thạch dừa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "ModTop2Price", "fill": "$text-tertiary", "content": "+6,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ModFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ModFooterPrice", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ModFooterPriceLabel", "fill": "$text-tertiary", "content": "Thành tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ModFooterPriceValue", "fill": "$orange-primary", "content": "48,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ModAddBtn", "width": 160, "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#E64D00", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ModAddIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ModAddText", "fill": "$text-primary", "content": "Thêm", "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"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetworkErrorDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/NetworkError",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorIconBg",
|
||||
"width": 88,
|
||||
"height": 88,
|
||||
"fill": "#EF444415",
|
||||
"cornerRadius": 44,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorIconInner",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "NetErrorIcon",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"iconFontName": "wifi-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NetErrorTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mất kết nối mạng",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NetErrorDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Không thể kết nối đến máy chủ.\nVui lòng kiểm tra kết nối internet của bạn.",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorStatus",
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 10,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
10,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "NetErrorStatusIcon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "clock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NetErrorStatusText",
|
||||
"fill": "#F59E0B",
|
||||
"content": "Đang thử kết nối lại...",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorOfflineBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NetErrorOfflineText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Chế độ offline",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NetErrorRetryBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#E64D00",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "NetErrorRetryIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "refresh-cw",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NetErrorRetryText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thử lại",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/PrinterError",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 420,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterIconBg",
|
||||
"width": 88,
|
||||
"height": 88,
|
||||
"fill": "#F59E0B15",
|
||||
"cornerRadius": 44,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterIconInner",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#F59E0B20",
|
||||
"cornerRadius": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterIcon",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterErrorTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lỗi máy in",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterErrorDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Không thể kết nối đến máy in.\nVui lòng kiểm tra máy in đã bật và kết nối.",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorInfo",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorInfoIcon",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterErrorInfoIconInner",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorInfoText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterErrorInfoName",
|
||||
"fill": "$text-primary",
|
||||
"content": "EPSON TM-T82III",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterErrorInfoStatus",
|
||||
"fill": "#EF4444",
|
||||
"content": "Offline - Kiểm tra kết nối USB/LAN",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterErrorFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterSkipBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterSkipText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Bỏ qua in",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PrinterRetryBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#E64D00",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PrinterRetryIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "refresh-cw",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PrinterRetryText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thử lại",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductSearchDialog",
|
||||
"name": "Dialog/ProductSearch",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 640,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SearchHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SearchHeaderTop", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchTitle", "fill": "$text-primary", "content": "Tìm sản phẩm", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "SearchCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchInputRow", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SearchInput", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchInputIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SearchInputValue", "fill": "$text-primary", "content": "trà sữa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchScanBtn", "width": 48, "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchScanIcon", "width": 22, "height": 22, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SearchContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SearchResultHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchResultCount", "fill": "$text-secondary", "content": "8 kết quả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SearchSortBtn", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchSortText", "fill": "$text-tertiary", "content": "Mới nhất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "icon_font", "id": "SearchSortIcon", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchResultList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SearchItem1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SearchItem1Img", "width": 56, "height": 56, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchItem1ImgIcon", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchItem1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SearchItem1Name", "fill": "$text-primary", "content": "Trà sữa trân châu đen", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SearchItem1Meta", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchItem1SKU", "fill": "$text-tertiary", "content": "SKU: TS001", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "SearchItem1Stock", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "SearchItem1StockText", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SearchItem1Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchItem2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SearchItem2Img", "width": 56, "height": 56, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchItem2ImgIcon", "width": 28, "height": 28, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchItem2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SearchItem2Name", "fill": "$text-primary", "content": "Trà sữa matcha", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SearchItem2Meta", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchItem2SKU", "fill": "$text-tertiary", "content": "SKU: TS002", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "SearchItem2Stock", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "SearchItem2StockText", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SearchItem2Price", "fill": "$orange-primary", "content": "40,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchItem3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SearchItem3Img", "width": 56, "height": 56, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SearchItem3ImgIcon", "width": 28, "height": 28, "iconFontName": "ice-cream-cone", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "SearchItem3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SearchItem3Name", "fill": "$text-primary", "content": "Trà sữa dâu tây", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SearchItem3Meta", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SearchItem3SKU", "fill": "$text-tertiary", "content": "SKU: TS003", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "SearchItem3Stock", "fill": "#EF444420", "cornerRadius": 6, "padding": [3, 8], "children": [
|
||||
{"type": "text", "id": "SearchItem3StockText", "fill": "#EF4444", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "SearchItem3Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuantityAdjustDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/QuantityAdjust",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 320,
|
||||
"height": 390,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyHeader",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
20,
|
||||
24
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Số lượng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyCloseBtn",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 18,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyCloseIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 24,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyProductInfo",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 14,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyProductImg",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "#8B5CF620",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyProductIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyProductText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyProductName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trà sữa trân châu đen",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyProductPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "35,000₫ / ly",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyControls",
|
||||
"gap": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyMinus",
|
||||
"width": 56,
|
||||
"height": 56,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 28,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyMinusIcon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "minus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyValueBox",
|
||||
"width": 80,
|
||||
"height": 64,
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 14,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "3",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 32,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyPlus",
|
||||
"width": 56,
|
||||
"height": 56,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 28,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyPlusIcon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtySubtotal",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtySubtotalText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thành tiền: ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtySubtotalValue",
|
||||
"fill": "#22C55E",
|
||||
"content": "105,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyDeleteBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#EF444420",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyDeleteIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "trash-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EF4444"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyConfirmBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#22C55E",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#16A34A",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyConfirmIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyConfirmText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xác nhận",
|
||||
"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"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SessionTimeoutDialog",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Dialog/SessionTimeout",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 380,
|
||||
"height": 380,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutIconBg",
|
||||
"width": 88,
|
||||
"height": 88,
|
||||
"fill": "#3B82F615",
|
||||
"cornerRadius": 44,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutIconInner",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 32,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TimeoutIcon",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"iconFontName": "timer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TimeoutTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phiên hết hạn",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TimeoutDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Phiên làm việc đã hết hạn do không hoạt động.\nVui lòng đăng nhập lại.",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutUser",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutUserAvatar",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TimeoutUserInitial",
|
||||
"fill": "$text-primary",
|
||||
"content": "NT",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TimeoutUserName",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nguyễn Thảo",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutFooter",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TimeoutLoginBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FF5C00",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#E64D00",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TimeoutLoginIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "log-in",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TimeoutLoginText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đăng nhập lại",
|
||||
"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"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentBankTransferScreen",
|
||||
"name": "Payment/BankTransfer",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 820,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BankHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "BankHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "BankBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "BankTitle", "fill": "$text-primary", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankTotalBadge", "fill": "#8B5CF620", "cornerRadius": 10, "padding": [8, 14], "children": [
|
||||
{"type": "text", "id": "BankTotalText", "fill": "#8B5CF6", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BankContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "BankMethodSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "BankMethodLabel", "fill": "$text-secondary", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "BankMethodRow", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "BankQR", "width": "fill_container", "height": 56, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankQRIcon", "width": 22, "height": 22, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "BankQRText", "fill": "$text-primary", "content": "VietQR", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankMomo", "width": "fill_container", "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankMomoIcon", "width": 22, "height": 22, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#EC4899"},
|
||||
{"type": "text", "id": "BankMomoText", "fill": "$text-secondary", "content": "MoMo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankZalo", "width": "fill_container", "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankZaloIcon", "width": 22, "height": 22, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "BankZaloText", "fill": "$text-secondary", "content": "ZaloPay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "BankQRSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 24, "layout": "vertical", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "BankQRCode", "width": 200, "height": 200, "fill": "#FFFFFF", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "BankQRPlaceholder", "width": 180, "height": 180, "fill": "#E5E5E5", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankQRPlaceholderIcon", "width": 60, "height": 60, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#9CA3AF"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "BankQRHint", "fill": "$text-tertiary", "content": "Quét mã QR để thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankInfoSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "BankInfoRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankInfoLabel1", "fill": "$text-tertiary", "content": "Ngân hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "BankInfoValue1", "fill": "$text-primary", "content": "Vietcombank", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankInfoRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankInfoLabel2", "fill": "$text-tertiary", "content": "Số tài khoản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "BankInfoValue2Wrapper", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankInfoValue2", "fill": "$text-primary", "content": "1234567890123", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "BankCopyIcon", "width": 16, "height": 16, "iconFontName": "copy", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "BankInfoRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankInfoLabel3", "fill": "$text-tertiary", "content": "Nội dung CK", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "BankInfoValue3Wrapper", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankInfoValue3", "fill": "#8B5CF6", "content": "HD240206001", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "BankCopyIcon2", "width": 16, "height": 16, "iconFontName": "copy", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "BankTimerSection", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 10, "padding": [12, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankTimerIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "BankTimerText", "fill": "#F59E0B", "content": "Giao dịch hết hạn trong 04:32", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BankFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "BankConfirmBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#8B5CF6", "position": 0}, {"color": "#7C3AED", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "BankConfirmIcon", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "BankConfirmText", "fill": "$text-primary", "content": "Đã chuyển khoản", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "BankCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "BankCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
117
pencil-design/src/pages/tPOS/pos/shared/payment/card.pen
Normal file
117
pencil-design/src/pages/tPOS/pos/shared/payment/card.pen
Normal file
@@ -0,0 +1,117 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentCardScreen",
|
||||
"name": "Payment/Card",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 760,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CardHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CardBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CardBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "CardTitle", "fill": "$text-primary", "content": "Thẻ ngân hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CardTotalBadge", "fill": "#3B82F620", "cornerRadius": 10, "padding": [8, 14], "children": [
|
||||
{"type": "text", "id": "CardTotalText", "fill": "#3B82F6", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CardTypeSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "CardTypeLabel", "fill": "$text-secondary", "content": "Loại thẻ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CardTypeRow", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CardVisa", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#3B82F6"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CardVisaIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "CardVisaText", "fill": "$text-primary", "content": "Visa/Master", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CardNapas", "width": "fill_container", "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CardNapasIcon", "width": 24, "height": 24, "iconFontName": "landmark", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "CardNapasText", "fill": "$text-secondary", "content": "Napas", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CardTerminalSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 24, "layout": "vertical", "gap": 20, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CardTerminalIcon", "width": 80, "height": 80, "fill": "#3B82F620", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CardTerminalIconInner", "width": 40, "height": 40, "iconFontName": "smartphone-nfc", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "text", "id": "CardTerminalTitle", "fill": "$text-primary", "content": "Chạm hoặc Quẹt thẻ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600", "textAlign": "center"},
|
||||
{"type": "text", "id": "CardTerminalDesc", "fill": "$text-tertiary", "content": "Đặt thẻ lên máy đọc thẻ hoặc quẹt thanh từ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "textAlign": "center"},
|
||||
{"type": "frame", "id": "CardWaiting", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CardDot1", "width": 8, "height": 8, "fill": "#3B82F6", "cornerRadius": 4},
|
||||
{"type": "frame", "id": "CardDot2", "width": 8, "height": 8, "fill": "#3B82F680", "cornerRadius": 4},
|
||||
{"type": "frame", "id": "CardDot3", "width": 8, "height": 8, "fill": "#3B82F640", "cornerRadius": 4}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CardTipSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CardTipHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CardTipLabel", "fill": "$text-secondary", "content": "Tiền tip (không bắt buộc)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CardTipValue", "fill": "$orange-primary", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CardTipRow", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "CardTip0", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CardTip0Text", "fill": "$text-primary", "content": "Không", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CardTip10", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CardTip10Text", "fill": "$text-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CardTip15", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CardTip15Text", "fill": "$text-primary", "content": "15%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CardTip20", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CardTip20Text", "fill": "$text-primary", "content": "20%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CardTotalRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CardTotalLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "CardTotalAmount", "fill": "#3B82F6", "content": "580,250₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CardCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CardCancelText", "fill": "$text-secondary", "content": "Hủy giao dịch", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
117
pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen
Normal file
117
pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen
Normal file
@@ -0,0 +1,117 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GiftCardScreen",
|
||||
"name": "Payment/GiftCard",
|
||||
"reusable": true,
|
||||
"width": 440,
|
||||
"height": 660,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GiftHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "GiftHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "GiftIconBg", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "GiftIcon", "width": 22, "height": 22, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "text", "id": "GiftTitle", "fill": "$text-primary", "content": "Thẻ quà tặng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "GiftCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GiftContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "GiftInputSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "GiftInputLabel", "fill": "$text-secondary", "content": "Mã thẻ quà tặng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "GiftInputRow", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "GiftInput", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "GiftInputValue", "fill": "$text-primary", "content": "GC-2024-ABCD-1234", "fontFamily": "Roboto Mono", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftScanBtn", "width": 52, "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "GiftScanIcon", "width": 24, "height": 24, "iconFontName": "scan-line", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftCardPreview", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#DB2777", "position": 1}]}, "cornerRadius": 20, "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "GiftCardTop", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [
|
||||
{"type": "frame", "id": "GiftCardLogo", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "GiftCardBrand", "fill": "$text-primary", "content": "tPOS", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "GiftCardType", "fill": "#FFFFFF99", "content": "Gift Card", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "icon_font", "id": "GiftCardChip", "width": 40, "height": 40, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF60"}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftCardBalance", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "GiftCardBalanceLabel", "fill": "#FFFFFF80", "content": "Số dư còn lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "GiftCardBalanceValue", "fill": "$text-primary", "content": "500,000₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftCardBottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-end", "children": [
|
||||
{"type": "frame", "id": "GiftCardCode", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "GiftCardCodeLabel", "fill": "#FFFFFF70", "content": "Mã thẻ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "GiftCardCodeValue", "fill": "$text-primary", "content": "•••• •••• •••• 1234", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftCardExpiry", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "GiftCardExpiryLabel", "fill": "#FFFFFF70", "content": "Hết hạn", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "GiftCardExpiryValue", "fill": "$text-primary", "content": "12/2026", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "GiftUseSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "GiftUseLabel", "fill": "$text-secondary", "content": "Số tiền sử dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "GiftUseInput", "width": "fill_container", "height": 60, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "GiftUseValue", "fill": "$text-primary", "content": "500,000", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "GiftUseMax", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 12], "children": [
|
||||
{"type": "text", "id": "GiftUseMaxText", "fill": "#22C55E", "content": "Toàn bộ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GiftFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "GiftApplyBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#DB2777", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "GiftApplyIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "GiftApplyText", "fill": "$text-primary", "content": "Áp dụng 500,000₫", "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"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentPartialScreen",
|
||||
"name": "Payment/Partial",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 800,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PartialHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PartialHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PartialBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "PartialTitle", "fill": "$text-primary", "content": "Thanh toán nhiều phương thức", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PartialContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PartialTotalSection", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "PartialTotalRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PartialTotalLabel", "fill": "$text-secondary", "content": "Tổng hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PartialTotalValue", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialProgressBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [
|
||||
{"type": "frame", "id": "PartialProgressFill", "width": 280, "height": 8, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 90, "size": {"height": 1}, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 4}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialProgressText", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PartialPaidLabel", "fill": "#22C55E", "content": "Đã thanh toán: 300,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PartialRemainingLabel", "fill": "$orange-primary", "content": "Còn lại: 230,250₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialMethodsSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "PartialMethodsLabel", "fill": "$text-secondary", "content": "Các khoản đã thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PartialMethod1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": [14, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PartialMethod1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PartialMethod1Icon", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialMethod1IconInner", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialMethod1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "PartialMethod1Name", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PartialMethod1Time", "fill": "$text-tertiary", "content": "19:25:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialMethod1Right", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PartialMethod1Value", "fill": "#22C55E", "content": "300,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"},
|
||||
{"type": "icon_font", "id": "PartialMethod1Check", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialAddSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "PartialAddLabel", "fill": "$text-secondary", "content": "Thêm phương thức cho 230,250₫ còn lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PartialAddRow", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "PartialAddCash", "width": "fill_container", "height": 72, "fill": "$bg-elevated", "cornerRadius": 12, "layout": "vertical", "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialAddCashIcon", "width": 24, "height": 24, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "PartialAddCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialAddCard", "width": "fill_container", "height": 72, "fill": "$bg-elevated", "cornerRadius": 12, "layout": "vertical", "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialAddCardIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "PartialAddCardText", "fill": "$text-primary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialAddQR", "width": "fill_container", "height": 72, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialAddQRIcon", "width": 24, "height": 24, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "PartialAddQRText", "fill": "$text-primary", "content": "VietQR", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialAmountSection", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "PartialAmountLabel", "fill": "$text-secondary", "content": "Số tiền thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "PartialAmountInput", "width": "fill_container", "height": 56, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PartialAmountValue", "fill": "$text-primary", "content": "230,250", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PartialAmountCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PartialFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PartialPayBtn", "width": "fill_container", "height": 52, "fill": {
|
||||
"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1},
|
||||
"colors": [{"color": "#FF5C00", "position": 0}, {"color": "#E64D00", "position": 1}]
|
||||
}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PartialPayIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "PartialPayText", "fill": "$text-primary", "content": "Thanh toán 230,250₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PartialCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PartialCancelText", "fill": "$text-secondary", "content": "Hủy giao dịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentPendingScreen",
|
||||
"name": "Payment/Pending",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"height": 580,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PendingContent",
|
||||
"width": "fill_container",
|
||||
"padding": 40,
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PendingSpinner", "width": 120, "height": 120, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PendingSpinnerOuter", "width": 120, "height": 120, "stroke": {"thickness": 4, "fill": "$bg-interactive"}, "cornerRadius": 60},
|
||||
{"type": "frame", "id": "PendingSpinnerArc", "width": 120, "height": 120, "x": 0, "y": 0, "stroke": {"thickness": 4, "fill": "$orange-primary"}, "cornerRadius": 60},
|
||||
{"type": "frame", "id": "PendingIconBg", "width": 80, "height": 80, "fill": "#FF5C0020", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PendingIcon", "width": 36, "height": 36, "iconFontName": "loader", "iconFontFamily": "lucide", "fill": "$orange-primary"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PendingTextGroup", "width": "fill_container", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PendingTitle", "fill": "$text-primary", "content": "Đang xử lý thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"},
|
||||
{"type": "text", "id": "PendingDesc", "fill": "$text-tertiary", "content": "Vui lòng chờ trong giây lát...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "PendingAmountCard", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PendingAmountLabel", "fill": "$text-tertiary", "content": "Số tiền thanh toán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PendingAmountValue", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "PendingMethodBadge", "fill": "#3B82F620", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PendingMethodIcon", "width": 16, "height": 16, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "PendingMethodText", "fill": "#3B82F6", "content": "Visa •••• 4242", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PendingDots", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PendingDot1", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 5},
|
||||
{"type": "frame", "id": "PendingDot2", "width": 10, "height": 10, "fill": "#FF5C0080", "cornerRadius": 5},
|
||||
{"type": "frame", "id": "PendingDot3", "width": 10, "height": 10, "fill": "#FF5C0040", "cornerRadius": 5}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PendingFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PendingWarning", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PendingWarningIcon", "width": 16, "height": 16, "iconFontName": "alert-circle", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "PendingWarningText", "fill": "$text-tertiary", "content": "Không đóng cửa sổ này", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
120
pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen
Normal file
120
pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TipEntryDialog",
|
||||
"name": "Dialog/TipEntry",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"height": 600,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TipHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TipHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TipIconBg", "width": 44, "height": 44, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TipIcon", "width": 22, "height": 22, "iconFontName": "heart-handshake", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipTitleGroup", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TipTitle", "fill": "$text-primary", "content": "Thêm tiền tip", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TipSubtitle", "fill": "$text-tertiary", "content": "Không bắt buộc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TipCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TipCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TipContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TipQuickSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TipQuickLabel", "fill": "$text-secondary", "content": "Chọn nhanh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "TipQuickRow", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "TipQuick10", "width": "fill_container", "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipQuick10Percent", "fill": "$text-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TipQuick10Value", "fill": "$text-tertiary", "content": "53,025₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipQuick15", "width": "fill_container", "height": 64, "fill": "#F59E0B", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipQuick15Percent", "fill": "$text-primary", "content": "15%", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TipQuick15Value", "fill": "#FFFFFF99", "content": "79,538₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipQuick20", "width": "fill_container", "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipQuick20Percent", "fill": "$text-primary", "content": "20%", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TipQuick20Value", "fill": "$text-tertiary", "content": "106,050₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TipCustomSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TipCustomLabel", "fill": "$text-secondary", "content": "Hoặc nhập số tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "TipCustomInput", "width": "fill_container", "height": 60, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 18], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipCustomValue", "fill": "$text-primary", "content": "79,538", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700"},
|
||||
{"type": "text", "id": "TipCustomCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TipSummarySection", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "TipSummaryRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipSummaryLabel1", "fill": "$text-tertiary", "content": "Hóa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "TipSummaryValue1", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipSummaryRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipSummaryLabel2", "fill": "$text-tertiary", "content": "Tip (15%)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "TipSummaryValue2", "fill": "#F59E0B", "content": "+79,538₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipSummaryDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "TipSummaryRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipSummaryLabel3", "fill": "$text-primary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TipSummaryValue3", "fill": "#F59E0B", "content": "609,788₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TipFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TipSkipBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TipSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "TipConfirmBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#F59E0B", "position": 0}, {"color": "#D97706", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TipConfirmIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "TipConfirmText", "fill": "$text-primary", "content": "Xác nhận tip", "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"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentReportScreen",
|
||||
"name": "Report/Payment",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 640,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayReportHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PayReportHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PayReportBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "PayReportTitle", "fill": "$text-primary", "content": "Báo cáo thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PayReportFilterText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "PayReportFilterIcon", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayReportContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "PayReportTotal", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PayReportTotalLabel", "fill": "$text-tertiary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "PayReportTotalValue", "fill": "#22C55E", "content": "25,680,000₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "PayReportTotalOrders", "fill": "$text-secondary", "content": "156 giao dịch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethods", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "PayReportMethod1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod1Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod1Icon", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PayReportMethod1IconInner", "width": 24, "height": 24, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethod1Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PayReportMethod1Name", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PayReportMethod1Count", "fill": "$text-tertiary", "content": "89 giao dịch (57%)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "PayReportMethod1Value", "fill": "#22C55E", "content": "14,630,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethod2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod2Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod2Icon", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PayReportMethod2IconInner", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethod2Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PayReportMethod2Name", "fill": "$text-primary", "content": "Thẻ ngân hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PayReportMethod2Count", "fill": "$text-tertiary", "content": "42 giao dịch (27%)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "PayReportMethod2Value", "fill": "#3B82F6", "content": "6,930,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethod3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod3Left", "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportMethod3Icon", "width": 48, "height": 48, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PayReportMethod3IconInner", "width": 24, "height": 24, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportMethod3Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "PayReportMethod3Name", "fill": "$text-primary", "content": "VietQR / MoMo", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "PayReportMethod3Count", "fill": "$text-tertiary", "content": "25 giao dịch (16%)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "PayReportMethod3Value", "fill": "#8B5CF6", "content": "4,120,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportChart", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 14, "children": [
|
||||
{"type": "text", "id": "PayReportChartLabel", "fill": "$text-primary", "content": "Tỷ lệ phương thức", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "PayReportChartBar", "width": "fill_container", "height": 24, "cornerRadius": 12, "clip": true, "children": [
|
||||
{"type": "frame", "id": "PayReportChartCash", "width": 230, "height": 24, "fill": "#22C55E"},
|
||||
{"type": "frame", "id": "PayReportChartCard", "width": 112, "height": 24, "x": 230, "fill": "#3B82F6"},
|
||||
{"type": "frame", "id": "PayReportChartQR", "width": 68, "height": 24, "x": 342, "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportChartLegend", "width": "fill_container", "gap": 16, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportLegend1", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportLegend1Dot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 5},
|
||||
{"type": "text", "id": "PayReportLegend1Text", "fill": "$text-tertiary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportLegend2", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportLegend2Dot", "width": 10, "height": 10, "fill": "#3B82F6", "cornerRadius": 5},
|
||||
{"type": "text", "id": "PayReportLegend2Text", "fill": "$text-tertiary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "PayReportLegend3", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PayReportLegend3Dot", "width": 10, "height": 10, "fill": "#8B5CF6", "cornerRadius": 5},
|
||||
{"type": "text", "id": "PayReportLegend3Text", "fill": "$text-tertiary", "content": "QR", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
690
pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen
Normal file
690
pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen
Normal file
@@ -0,0 +1,690 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftReportScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Report/Shift",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 480,
|
||||
"height": 762,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
20,
|
||||
24
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShiftBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Báo cáo ca làm",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPrintBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShiftPrintIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "printer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPrintText",
|
||||
"fill": "$text-primary",
|
||||
"content": "In",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftInfoCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftStaffAvatar",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 24,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftStaffInitial",
|
||||
"fill": "$text-primary",
|
||||
"content": "NT",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftStaffInfo",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftStaffName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Thảo",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftTime",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Ca Chiều: 14:02 - 22:00",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftDuration",
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
8,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftDurationText",
|
||||
"fill": "#22C55E",
|
||||
"content": "7h 58p",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftSalesCard",
|
||||
"width": "fill_container",
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#22C55E20",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#16A34A10",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "#22C55E40"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftSalesHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tổng doanh thu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesValue",
|
||||
"fill": "#22C55E",
|
||||
"content": "12,580,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftSalesStats",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftSalesStat1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesStat1Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "87",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesStat1Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đơn hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftSalesStat2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesStat2Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "144,598",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftSalesStat2Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "TB/đơn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phương thức thanh toán",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow1",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow1Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow1Icon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShiftPaymentRow1IconInner",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "banknote",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#22C55E"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow1Name",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tiền mặt",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow1Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "7,230,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow2",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow2Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow2Icon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "#3B82F620",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShiftPaymentRow2IconInner",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "credit-card",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#3B82F6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow2Name",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thẻ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow2Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "3,150,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow3",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow3Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftPaymentRow3Icon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "#8B5CF620",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShiftPaymentRow3IconInner",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "qr-code",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow3Name",
|
||||
"fill": "$text-secondary",
|
||||
"content": "VietQR",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftPaymentRow3Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "2,200,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Két tiền",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashRow1",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow1Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tiền đầu ca",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow1Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "2,000,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashRow2",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow2Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Thu tiền mặt",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow2Value",
|
||||
"fill": "#22C55E",
|
||||
"content": "+7,230,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashRow3",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow3Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Chi ra",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashRow3Value",
|
||||
"fill": "#EF4444",
|
||||
"content": "-320,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShiftCashTotal",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashTotalLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tiền cuối ca",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShiftCashTotalValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "8,910,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
504
pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen
Normal file
504
pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen
Normal file
@@ -0,0 +1,504 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxReportScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Report/Tax",
|
||||
"reusable": true,
|
||||
"clip": true,
|
||||
"width": 480,
|
||||
"height": 640,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"padding": [
|
||||
20,
|
||||
24
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxHeaderLeft",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TaxBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Báo cáo thuế",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxExportBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 10,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TaxExportIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "download",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxExportText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xuất Excel",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxPeriodSelector",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxPeriodLeft",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TaxPeriodIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "calendar",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxPeriodText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tháng 02/2026",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TaxPeriodChevron",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "chevron-down",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxSummaryCard",
|
||||
"width": "fill_container",
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#3B82F620",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#1D4ED810",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "#3B82F640"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxSummaryRow1",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxSummaryLabel1",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng doanh thu",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxSummaryValue1",
|
||||
"fill": "$text-primary",
|
||||
"content": "156,780,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxSummaryRow2",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxSummaryLabel2",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Thuế GTGT (10%)",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxSummaryValue2",
|
||||
"fill": "#3B82F6",
|
||||
"content": "15,678,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chi tiết theo nhóm hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow1Left",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đồ uống",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow1Revenue",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "DT: 98,500,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow1Tax",
|
||||
"fill": "#3B82F6",
|
||||
"content": "9,850,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow2Left",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thức ăn",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow2Revenue",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "DT: 45,280,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow2Tax",
|
||||
"fill": "#3B82F6",
|
||||
"content": "4,528,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"cornerRadius": 10,
|
||||
"padding": 14,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxBreakdownRow3Left",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Topping",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow3Revenue",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "DT: 13,000,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxBreakdownRow3Tax",
|
||||
"fill": "#3B82F6",
|
||||
"content": "1,300,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxNoteSection",
|
||||
"width": "fill_container",
|
||||
"fill": "#F59E0B15",
|
||||
"cornerRadius": 12,
|
||||
"gap": 10,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TaxNoteIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "info",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TaxNoteText",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxNoteTitle",
|
||||
"fill": "#F59E0B",
|
||||
"content": "Lưu ý",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TaxNoteDesc",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Báo cáo này chỉ mang tính chất tham khảo. \nVui lòng liên hệ kế toán để có số liệu chính xác.",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#1A1A1D"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#0A0A0B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#2A2A2E"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#1F1F23"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF5C00"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#ADADB0"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#8B8B90"
|
||||
}
|
||||
}
|
||||
}
|
||||
137
pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen
Normal file
137
pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen
Normal file
@@ -0,0 +1,137 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TopSellersScreen",
|
||||
"name": "Report/TopSellers",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 680,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TopHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TopHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "TopTitle", "fill": "$text-primary", "content": "Sản phẩm bán chạy", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TopFilterText", "fill": "$text-primary", "content": "7 ngày", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "icon_font", "id": "TopFilterIcon", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TopContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TopItem1", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 90, "size": {"height": 1}, "colors": [{"color": "#F59E0B20", "position": 0}, {"color": "#F59E0B05", "position": 1}]}, "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "padding": 16, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopItem1Rank", "width": 40, "height": 40, "fill": "#F59E0B", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem1RankIcon", "width": 22, "height": 22, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "$text-primary"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem1Img", "width": 56, "height": 56, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem1ImgIcon", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "TopItem1Name", "fill": "$text-primary", "content": "Trà sữa trân châu đen", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TopItem1Stats", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TopItem1Qty", "fill": "#F59E0B", "content": "342 ly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TopItem1Revenue", "fill": "$text-tertiary", "content": "11,970,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopItem2Rank", "width": 32, "height": 32, "fill": "#94A3B8", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TopItem2RankText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem2Img", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem2ImgIcon", "width": 24, "height": 24, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TopItem2Name", "fill": "$text-primary", "content": "Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TopItem2Stats", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TopItem2Qty", "fill": "$text-secondary", "content": "289 ly", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "TopItem2Revenue", "fill": "$text-tertiary", "content": "8,670,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopItem3Rank", "width": 32, "height": 32, "fill": "#CD7F32", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TopItem3RankText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem3Img", "width": 48, "height": 48, "fill": "#EC489920", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem3ImgIcon", "width": 24, "height": 24, "iconFontName": "ice-cream-cone", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TopItem3Name", "fill": "$text-primary", "content": "Trà sữa dâu tây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TopItem3Stats", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TopItem3Qty", "fill": "$text-secondary", "content": "256 ly", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "TopItem3Revenue", "fill": "$text-tertiary", "content": "9,728,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopItem4Rank", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TopItem4RankText", "fill": "$text-secondary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem4Img", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem4ImgIcon", "width": 24, "height": 24, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem4Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TopItem4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TopItem4Stats", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TopItem4Qty", "fill": "$text-secondary", "content": "198 ly", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "TopItem4Revenue", "fill": "$text-tertiary", "content": "7,920,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TopItem5Rank", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "TopItem5RankText", "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem5Img", "width": 48, "height": 48, "fill": "#F59E0B20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TopItem5ImgIcon", "width": 24, "height": 24, "iconFontName": "cookie", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "TopItem5Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TopItem5Name", "fill": "$text-primary", "content": "Bánh Tiramisu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "TopItem5Stats", "gap": 12, "children": [
|
||||
{"type": "text", "id": "TopItem5Qty", "fill": "$text-secondary", "content": "145 cái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "TopItem5Revenue", "fill": "$text-tertiary", "content": "5,800,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
130
pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen
Normal file
130
pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen
Normal file
@@ -0,0 +1,130 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CashDrawerScreen",
|
||||
"name": "Screen/CashDrawer",
|
||||
"reusable": true,
|
||||
"width": 480,
|
||||
"height": 720,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DrawerHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [20, 24],
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DrawerHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]},
|
||||
{"type": "text", "id": "DrawerTitle", "fill": "$text-primary", "content": "Quản lý két tiền", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerOpenBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerOpenIcon", "width": 18, "height": 18, "iconFontName": "archive", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "DrawerOpenText", "fill": "$text-primary", "content": "Mở két", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DrawerContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "DrawerSummary", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "DrawerSummaryRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DrawerSummaryLabel1", "fill": "$text-secondary", "content": "Tiền đầu ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "DrawerSummaryValue1", "fill": "$text-primary", "content": "2,000,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerSummaryRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DrawerSummaryLabel2", "fill": "$text-secondary", "content": "Thu tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "DrawerSummaryValue2", "fill": "#22C55E", "content": "+5,430,500₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerSummaryRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DrawerSummaryLabel3", "fill": "$text-secondary", "content": "Chi tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "DrawerSummaryValue3", "fill": "#EF4444", "content": "-320,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
|
||||
{"type": "frame", "id": "DrawerSummaryTotal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DrawerTotalLabel", "fill": "$text-primary", "content": "Tiền trong két (dự kiến)", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"},
|
||||
{"type": "text", "id": "DrawerTotalValue", "fill": "$orange-primary", "content": "7,110,500₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerActionsSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "text", "id": "DrawerActionsLabel", "fill": "$text-secondary", "content": "Thao tác két tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "DrawerActionsRow", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "DrawerPayIn", "width": "fill_container", "height": 80, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerPayInIcon", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerPayInIconInner", "width": 22, "height": 22, "iconFontName": "arrow-down-left", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "text", "id": "DrawerPayInText", "fill": "$text-primary", "content": "Thu vào", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerPayOut", "width": "fill_container", "height": 80, "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerPayOutIcon", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerPayOutIconInner", "width": 22, "height": 22, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "text", "id": "DrawerPayOutText", "fill": "$text-primary", "content": "Chi ra", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerHistorySection", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DrawerHistoryLabel", "fill": "$text-secondary", "content": "Lịch sử giao dịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "DrawerHistoryLink", "fill": "$orange-primary", "content": "Xem tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerHistoryList", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 4, "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryItem1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryItem1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryItem1Icon", "width": 36, "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerHistoryItem1IconInner", "width": 18, "height": 18, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerHistoryItem1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DrawerHistoryItem1Name", "fill": "$text-primary", "content": "Thanh toán #HD240206015", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "DrawerHistoryItem1Time", "fill": "$text-tertiary", "content": "19:25", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "DrawerHistoryItem1Amount", "fill": "#22C55E", "content": "+530,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerHistoryItem2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryItem2Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DrawerHistoryItem2Icon", "width": 36, "height": 36, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DrawerHistoryItem2IconInner", "width": 18, "height": 18, "iconFontName": "truck", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "frame", "id": "DrawerHistoryItem2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DrawerHistoryItem2Name", "fill": "$text-primary", "content": "Trả tiền ship COD", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "DrawerHistoryItem2Time", "fill": "$text-tertiary", "content": "18:45", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "DrawerHistoryItem2Amount", "fill": "#EF4444", "content": "-120,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
104
pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen
Normal file
104
pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen
Normal file
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ClockInOutScreen",
|
||||
"name": "Screen/ClockInOut",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"height": 640,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ClockHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [24, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "ClockTitle", "fill": "$text-primary", "content": "Chấm công", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ClockCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ClockCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ClockContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ClockTimeSection", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ClockTime", "fill": "$text-primary", "content": "19:28", "fontFamily": "Roboto", "fontSize": 56, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ClockDate", "fill": "$text-tertiary", "content": "Thứ Năm, 06/02/2026", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockStaffCard", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 16, "padding": 20, "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ClockStaffAvatar", "width": 64, "height": 64, "fill": "$orange-primary", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ClockStaffInitial", "fill": "$text-primary", "content": "NT", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockStaffInfo", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "ClockStaffName", "fill": "$text-primary", "content": "Nguyễn Thảo", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ClockStaffRole", "fill": "$text-tertiary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "ClockStaffStatus", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ClockStatusDot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 4},
|
||||
{"type": "text", "id": "ClockStatusText", "fill": "#22C55E", "content": "Đang làm việc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockShiftInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ClockShiftRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ClockShiftLabel1", "fill": "$text-tertiary", "content": "Ca làm việc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ClockShiftValue1", "fill": "$text-primary", "content": "Ca Chiều (14:00 - 22:00)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockShiftRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ClockShiftLabel2", "fill": "$text-tertiary", "content": "Vào ca", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ClockShiftValue2", "fill": "#22C55E", "content": "14:02 (+2 phút)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockShiftRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ClockShiftLabel3", "fill": "$text-tertiary", "content": "Đã làm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "ClockShiftValue3", "fill": "$orange-primary", "content": "5h 26p", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ClockBreakBtn", "width": "fill_container", "height": 52, "fill": "#F59E0B20", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ClockBreakIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "ClockBreakText", "fill": "#F59E0B", "content": "Nghỉ giải lao", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ClockFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"children": [
|
||||
{"type": "frame", "id": "ClockOutBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#EF4444", "position": 0}, {"color": "#DC2626", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ClockOutIcon", "width": 22, "height": 22, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "ClockOutText", "fill": "$text-primary", "content": "Kết thúc ca làm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
124
pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen
Normal file
124
pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen
Normal file
@@ -0,0 +1,124 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinEntryDialog",
|
||||
"name": "Dialog/PinEntry",
|
||||
"reusable": true,
|
||||
"width": 360,
|
||||
"height": 620,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [24, 24],
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PinIconBg", "width": 60, "height": 60, "fill": "#EF444420", "cornerRadius": 30, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PinIcon", "width": 28, "height": 28, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#EF4444"}
|
||||
]},
|
||||
{"type": "text", "id": "PinTitle", "fill": "$text-primary", "content": "Nhập mã PIN", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"},
|
||||
{"type": "text", "id": "PinSubtitle", "fill": "$text-tertiary", "content": "Xác thực để tiếp tục thao tác", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "textAlign": "center"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": [16, 32],
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PinDotsRow", "gap": 16, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PinDot1", "width": 20, "height": 20, "fill": "$orange-primary", "cornerRadius": 10},
|
||||
{"type": "frame", "id": "PinDot2", "width": 20, "height": 20, "fill": "$orange-primary", "cornerRadius": 10},
|
||||
{"type": "frame", "id": "PinDot3", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10},
|
||||
{"type": "frame", "id": "PinDot4", "width": 20, "height": 20, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}
|
||||
]},
|
||||
{"type": "frame", "id": "PinPad", "width": 280, "layout": "vertical", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "PinRow1", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PinKey1", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey1Text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey2", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey2Text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey3", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey3Text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PinRow2", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PinKey4", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey4Text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey5", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey5Text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey6", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey6Text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PinRow3", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PinKey7", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey7Text", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey8", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey8Text", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey9", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey9Text", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "PinRow4", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "PinKeyClear", "width": 72, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PinKeyClearIcon", "width": 22, "height": 22, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKey0", "width": 72, "height": 56, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinKey0Text", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "PinKeyBackspace", "width": 72, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "PinKeyBackspaceIcon", "width": 22, "height": 22, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinFooter",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PinCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "PinCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user