diff --git a/.agent/skills/pencil-design/SKILL.md b/.agent/skills/pencil-design/SKILL.md index d63fb0eb..f5fafd4a 100644 --- a/.agent/skills/pencil-design/SKILL.md +++ b/.agent/skills/pencil-design/SKILL.md @@ -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 diff --git a/.agent/skills/pencil-design/references/PITFALLS.md b/.agent/skills/pencil-design/references/PITFALLS.md index cf612419..ba772cdb 100644 --- a/.agent/skills/pencil-design/references/PITFALLS.md +++ b/.agent/skills/pencil-design/references/PITFALLS.md @@ -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 diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/barcode-scan.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/barcode-scan.pen new file mode 100644 index 00000000..1e7d2a06 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/barcode-scan.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen new file mode 100644 index 00000000..e2cdc0fe --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen new file mode 100644 index 00000000..9f83e95b --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-edit.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-edit.pen new file mode 100644 index 00000000..4b43eb01 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-edit.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen new file mode 100644 index 00000000..442fb120 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/manager-override.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/manager-override.pen new file mode 100644 index 00000000..e89507de --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/manager-override.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/modifier-select.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/modifier-select.pen new file mode 100644 index 00000000..65ec67e6 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/modifier-select.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/network-error.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/network-error.pen new file mode 100644 index 00000000..e079e7ba --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/network-error.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/printer-error.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/printer-error.pen new file mode 100644 index 00000000..26198284 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/printer-error.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/product-search.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/product-search.pen new file mode 100644 index 00000000..3a8f25bd --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/product-search.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/quantity-adjust.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/quantity-adjust.pen new file mode 100644 index 00000000..ee46cc91 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/quantity-adjust.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen new file mode 100644 index 00000000..132a6be4 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/bank-transfer.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/bank-transfer.pen new file mode 100644 index 00000000..387f562c --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/bank-transfer.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/card.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/card.pen new file mode 100644 index 00000000..7b6d48ca --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/card.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen new file mode 100644 index 00000000..52b9bc4b --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/partial-payment.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/partial-payment.pen new file mode 100644 index 00000000..1e370310 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/partial-payment.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/payment-pending.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/payment-pending.pen new file mode 100644 index 00000000..098d3431 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/payment-pending.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen new file mode 100644 index 00000000..6420aa0e --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/payment-report.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/payment-report.pen new file mode 100644 index 00000000..fbb4d8be --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/payment-report.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen new file mode 100644 index 00000000..f10c998e --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen new file mode 100644 index 00000000..c9c75741 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen @@ -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" + } + } +} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen new file mode 100644 index 00000000..d24ba3d6 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen new file mode 100644 index 00000000..00170704 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen new file mode 100644 index 00000000..e0353d09 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen new file mode 100644 index 00000000..4de93988 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen @@ -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"} + } +}